TypeScript Beginning

Introduction

TypeScript is JavaScript with syntax for types.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Official website: TypeScriptLang
First Release: Oct 2012
Creator: Microsoft ( Anders Hejlsberg creator of C# )

Prerequisits

In order to learn TypeScript efficitively you need to have basic knowledge of JavaScript and its package managers.

• JavaScriptm Basics
• Node js installed
• JavaScript Package Manager

Installation and basics

TypeScript can be installed using JavaScript package managers, i.e, npm or yarn and -g flag to install it globally.

    npm install typescript -g

For compiling the TypeScript file to JavaScript:

    tsc <filemane>.ts

If you want your JavaScript filename different from your TypeScript file:

    tsc <filemane>.ts <outputFileName>.js

If you want your TypeScript file to auto recompile:

    tsc <filename>.ts -w

Understanding tsconfig.json

For initialization of tsconfig.json

    tsc --init

Now, the tsconfig.json file appears in your root / directory.

Firstly we need to specify the root directory for our project which is commented by default.
Search for rootDir in tsconfig.json, uncomment it and specify the directory where your TypeScript files to be located. In my case, I will be creating all TypeScript files inside src directory.

    "compilerOptions":{
    //other settings here
        "rootDir": "./src",
    }

Similarly, we also need compiled output of TypeScript file as JavaScript file, for that we need to specify output directory in tsconfig.json
Search for outDir in tsconfig.json, uncomment it and specify your output directory after compilation. In my case, I have made build directory and js directory.

    "compilerOptions":{
    //other settings here
        "outDir": "./build/js",
    }

If you want your TypeScript files to be compiled inside specific directory i.e, /src you need to add some setting in your tsconfig.json file in the end, and final tsconfig.json looks like

    {
    "compilerOptions":{
    //all other settings here
    },
    "include": [
    "src"
    ]
    }

After all these configurations in our tsconfig.json we should make sure we include all TypeScript files inside /src directory and look for compiled files in /build/js according to our configuration in our tsconfig.json

For constantly monitoring for change in our /src directory

    tsc -w

Till the terminal is closed or killed, TypeScript will constantly monitor the changes in /src directory and produce output inside /build/js

My folder structure after all these settings and a file

Project

• build
  • js
    • main.js
  • index.html
• src
  • main.ts
• tsconfig.json

Another killer TypeScript feature is it can compile your .ts file into any version of JavaScript .js file

    "compilerOptions":{
    //other settings here
        "target": "es2016",
    }

By default, target is set to es2016 but you can compile to any version of JavaScript, i.e, 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022',...

If you remove .ts file from /src then the compiled file in /build/js should be removed manually.

To prevent auto compiling of the TypeScript file with error, for which we are using TypeScript, we need to enable noEmitOnError feature in tsconfig.json by uncommenting that specific line

    "compilerOptions":{
    //other settings here
        "noEmitOnError": true,
    }

Now only valid TypeScript files will be compiled to JavaScript file.