Getting Started with TypeScript

TypeScript is an open-source programming language that was 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 prevents us from accidentally corrupting the program. The Type system helps in bringing JavaScript closer to other strongly typed languages such as Java and C#.

1. TypeScript vs JavaScript

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

2. TypeScript Compiler

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

The current version of the compiler supports ES 5 by default. TypeScript can compile the source code 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

3. TypeScript Compiler Configuration

TypeScipt compiler options are given in tsconfig.json. 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"
    ]
  }
}

4. Installing TypeScript

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

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

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

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

5. Running TypeScript

Create a file helloworld.ts in the workspace. Add the below-console log statement in the 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 a file, run using node command.

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

That’s all for the introduction to typescript.

Happy Learning !!

Comments

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

About Us

HowToDoInJava provides tutorials and how-to guides on Java and related technologies.

It also shares the best practices, algorithms & solutions and frequently asked interview questions.

Our Blogs

REST API Tutorial

Dark Mode

Dark Mode