TypeScript Basic Syntax

Installations

TypeScript can be installed very easily. Installation of TypeScript is possible using an npm module, a NuGet package, or a Visual Studio extension.

Npm Module

npm install typescript commond command are used to install typescript in our system.

npm install typescript --save-dev

When install typescript successful then check its version using following command.

tsc --version

Here tsc indicate typescript compiler. There are many options are available to compile typescript source code file.

tsc --help
Version 3.5.3
Syntax:   tsc [options] [file...]

Examples: tsc hello.ts
          tsc --outFile file.js file.ts
          tsc @args.txt
          tsc --build tsconfig.json

Options:
 -h, --help                                         Print this message.
 -w, --watch                                        Watch input files.
 --pretty                                           Stylize errors and messages using color and context (experimental).
 --all                                              Show all compiler options.
 -v, --version                                      Print the compiler's version.
 --init                                             Initializes a TypeScript project and creates a tsconfig.json file.
 -p FILE OR DIRECTORY, --project FILE OR DIRECTORY  Compile the project given the path to its configuration file, or to a folder with a 'tsconfig.json'.
 -b, --build                                        Build one or more projects and their dependencies, if out of date
 -t VERSION, --target VERSION                       Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'.
 -m KIND, --module KIND                             Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
 --lib                                              Specify library files to be included in the compilation.
                                                      'es5' 'es6' 'es2015' 'es7' 'es2016' 'es2017' 'es2018' 'es2019' 'es2020' 'esnext' 'dom' 'dom.iterable' 'webworker' 'webworker.importscripts' 'scripthost' 'es2015.core' 'es2015.collection' 'es2015.generator' 'es2015.iterable' 'es2015.promise' 'es2015.proxy' 'es2015.reflect' 'es2015.symbol' 'es2015.symbol.wellknown' 'es2016.array.include' 'es2017.object' 'es2017.sharedmemory' 'es2017.string' 'es2017.intl' 'es2017.typedarrays' 'es2018.asynciterable' 'es2018.intl' 'es2018.promise' 'es2018.regexp' 'es2019.array' 'es2019.object' 'es2019.string' 'es2019.symbol' 'es2020.string' 'es2020.symbol.wellknown' 'esnext.array' 'esnext.symbol' 'esnext.asynciterable' 'esnext.intl' 'esnext.bigint' 
 --allowJs                                          Allow javascript files to be compiled.
 --jsx KIND                                         Specify JSX code generation: 'preserve', 'react-native', or 'react'.
 -d, --declaration                                  Generates corresponding '.d.ts' file.
 --declarationMap                                   Generates a sourcemap for each corresponding '.d.ts' file.
 --sourceMap                                        Generates corresponding '.map' file.
 --outFile FILE                                     Concatenate and emit output to single file.
 --outDir DIRECTORY                                 Redirect output structure to the directory.
 --removeComments                                   Do not emit comments to output.
 --noEmit                                           Do not emit outputs.
 --strict                                           Enable all strict type-checking options.
 --noImplicitAny                                    Raise error on expressions and declarations with an implied 'any' type.
 --strictNullChecks                                 Enable strict null checks.
 --strictFunctionTypes                              Enable strict checking of function types.
 --strictBindCallApply                              Enable strict 'bind', 'call', and 'apply' methods on functions.
 --strictPropertyInitialization                     Enable strict checking of property initialization in classes.
 --noImplicitThis                                   Raise error on 'this' expressions with an implied 'any' type.
 --alwaysStrict                                     Parse in strict mode and emit "use strict" for each source file.
 --noUnusedLocals                                   Report errors on unused locals.
 --noUnusedParameters                               Report errors on unused parameters.
 --noImplicitReturns                                Report error when not all code paths in function return a value.
 --noFallthroughCasesInSwitch                       Report errors for fallthrough cases in switch statement.
 --types                                            Type declaration files to be included in compilation.
 --esModuleInterop                                  Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'.
 @                                            Insert command line options and files from a file.

The TypeScript source code file is saved with the .ts extension. Here .ts indicates the typescript. tsc filename.ts command are generate a .js file. and this file are execute by node in terminal. Suppose source file contain following code.

var num : number = 20;

console.log(num);

Save this file by code.ts. Here code is file name and .ts indicates typescript file. Open a terminal where this code file is stored. And type following command.

kalki@code:/source$ tsc code.ts

This command are create a new code.js file. Which is execute by node.

kalki@code:/source$ node code.js
20

See other way to Installation typescript.

Comments

The comment is used to describe the logic of code explanation and short description. Typically, the programmer uses commentary to warn about the functioning of the alert. Which proves useful for oneself and others. There are two types of comments are supported in typescript. Single line comment and multi line comment.

// Declare variables

let a = 10;
let b = 20;

/*
    Addition of two numbers a and b.
    And assign into sum variable.
*/
let sum = a + b;

// Display calculate sum
console.log(sum); // 30

Single line comments are used to provide short description it starts with // (two forward slash). Scope of this comment are based on single line.

Multi line comments are used to describe long descriptions that may be in more than one lines. This is start with (backslash star symbol) /* and end with */ (star backslash).

Hello Word

In the programming language, displaying results and messages are very important. Because there is no benefit to the program without producing results. console.log() method are used to display message on console screen.

// Display message in console screen
console.log("Hello Word");
console.log("Number", 123);

This method is capable of handling N number of parameters. Here the parameter places a single space between the values and insert a new line at the end of the result. This method are capable to display object value variable value and constant literals.

Template string is used to include regular expressions, variables and expression statement of inside the string.

var person : string = "willey";

// Template string `${}`
console.log(`Hello ${person}`); // Hello willey