HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / TypeScript / TypeScript Tutorial

TypeScript Tutorial

TypeScript is an open source programming language that is developed and maintained by Microsoft in 2012. TypeScript brings ‘types’ (or datatypes) to JavaScript.

Generally, types check the validity of the supplied values, before they are stored or manipulated by the program. This ensures that the code behaves as expected and prevent you to accidentally corrupt the program. This helps in bringing JavaScript closer to other strongly typed languages such as Java and C#.

In this tutorial, we will learn about TypeScript in detail with all you should know before start working on language.

Table of Contents

TypeScript vs JavaScript
TypeScript Compiler
Install TypeScript
Run TypeScript

TypeScript vs JavaScript

TypeScript vs JavaScript
TypeScript vs JavaScript
  1. TypeScript is the ES6 version of JavaScript + a few other TypeScript only features which Angular needs in order to work.
  2. TypeScript is superset of JavaScript. It scales JavaScript with datatype support.
  3. Existing JavaScript programs are also valid TypeScript programs.
  4. TypeScript supports definition files that can contain type information of existing JavaScript libraries.
  5. TypeScript is only for development. To run in browser, it must be converted to either ES6 or ES5 version of JavaScript.

TypeScript Compiler

Browsers don’t support TypeScript. So program sourcecode written in TypeScript must be re-written in supported JavaScript sourcecode. For this, TypeScript distribution comes with TypeScript compiler, named tsc.

The current version of the compiler supports ES 5 by default. TypeScript can compile the sourcecode to any module pattern – AMD, CommonJS, ES 6, SystemJS etc.

As with any npm package, you can install it locally or globally, or both, and compile the TS files by running tsc on the command line.

$ tsc helloworld.ts 	//It compile the file into helloworld.js

Compiler Configuration

TypeScipt compiler options are given in tsconfig.js. A sample config file looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

Install TypeScript

As TypeScript is only for development purpose, and not used in runtime, It should be installed as dev dependency.

$ npm install typescript --save-dev   //As dev dependency

$ npm install typescript -g          //Install as global module

$ npm install typescript@latest -g   //Install latest if you have older version

Run TypeScript

Create a file helloworld.ts in workspace. Add below console log statement in file.

console.log("Welcome to TypeScript !!");

To compile from typescript to javascript, use command tsc filename.

$ tsc helloworld.ts 	//Generates file helloworld.js

To execute file, run using node command.

$ node helloworld.ts 	//Output "Welcome to TypeScript !!"
Run TypeScript from Console
Run TypeScript from Console

That’s all for introduction to typescript.

Drop me your questions in comments section.

Happy Learning !!

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

Share this:

  • Twitter
  • Facebook
  • LinkedIn
  • Reddit

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Comments are closed on this article!

Search Tutorials

TypeScript Tutorial

  • TypeScript – Introduction
  • TypeScript – Types
  • TypeScript – Union Types
  • TypeScript – String Literal Types
  • TypeScript – var, let and const
  • TypeScript – Template Strings
  • TypeScript – Arithmetic Operators
  • TypeScript – Logical Operators
  • TypeScript – Comparison Operators
  • TypeScript – for Loop
  • TypeScript – Spread Operator
  • TypeScript – Arrays
  • TypeScript – Enums
  • TypeScript – Map
  • TypeScript – Set
  • TypeScript – Functions
  • TypeScript – Function Overloading
  • TypeScript – Transpiler
  • TypeScript – Truthy and falsy
  • TypeScript – == vs ===
  • TypeScript – undefined vs null
  • TypeScript – Variable Hoisting
  • TypeScript – tsconfig.json

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Java 15 New Features
  • Sealed Classes and Interfaces
  • EdDSA (Ed25519 / Ed448)