• It is easy to learn, fast and simple.
• It supports classes, interfaces, etc. object-oriented programming features.
• It uses an error-checking feature at the time of compilation. It highlighted the errors before running the script.
• It is a superset of JavaScript and supports all JavaScript libraries.
• It allows reusability with the usage of inheritance.
• The latest JavaScript features of ECMAScript 2015 is also supported by TypeScript
• It increases productivity and gives the benefits of ES6.
• It supports various functions and features, static typing, Strongly type, Modules, etc.

• Object-Oriented language
• Support Javascript Libraries
• JavaScript is TypeScript
• Typescript is portable
• DOM Manipulation
• TypeScript is just Javascript

• It easily adds variables, functions, properties, etc.
• Typescript compiles with JavaScript and runs on all browsers.
• It also highlights errors at the time of compiling during development.
• TypeScript supports static typing or strong typing.
• It structure codes.
• Class-based object-oriented programming is used in TypeScript.
• It provides tool support with IntelliSense.

• Its code compilation time is longer.
• It doesn’t support abstract classes.
• To run a TypeScript application in any browser, a compiler, and its setup is required to convert TypeScript into JavaScript.
• Developers are using JavaScript for years and TypeScript does not bring anything new.
• To use a third-party library, the definition file is required and all the third-party libraries don’t have it.

There are majorly three components of typescripts use which are:

Language: It contains elements like keywords, type annotations, new syntax, etc., and permits the developer to write TypeScript.

Compiler: It is an open-source, cross-platform which is written in TypeScript. It converts the code written in TypeScript to JavaScript code. It executes the parsing, type checking of TypeScript code to JavaScript code. It concatenates different files to one file and generates source maps.

Language Service: It provides information due to which editors and other tools can give better assistance features like IntelliSense and automated refactoring.

To install and use TypeScript you will be required node via npm (the Node.js package manager). Ensure that the npm is properly installed, then run the command to install TypeScript.

$ npm install -g typescript

The command line code “tsc” is used to install and compile our Typescript code. Check the version of TypeScript before installing.

Follow the steps to install TypeScript:

• Download and run the .msi installer for the node.
• Place command “node -v” to check whether the installation is successful or not.
• Enter the given command in the terminal window to install Typescript

The primitive data types are also known as built-in data types in Typescript.

Number type: It represents the numerical type values. All the numbers are saved in floating-point values.

Syntax: let identifier: number = value;

String type: It displays Unicode UTF-16 code (a stored sequence of characters). To use string literals in scripts we need to enclose them in single or double quotation marks.

Syntax: let identifier: string = " “;

Boolean type: It displays a logical value. Boolean type gives the result only in true or false.

Syntax: let identifier: bool = Boolean value;

Null type: Null shows a variable whose value is not defined and because of this it is impossible to directly mention the null type value itself. It is not quite useful as we can only assign an undefined or null value to it.

Syntax: let num: number = null;

Undefined type: It denotes all uninitialized variables so this is why it is not useful because only an undefined value can be assigned to it. This type of primitive date type is the sub-type of all the types.

Syntax: let num: number = undefined;

Void type: It is the return type function that doesn’t return any type of value. It is only used where no datatype is available.

Syntax: let unusable: void = undefined;

A variable is basically a storage location that saves value/information used by programs. Variables act like a container for value in a program. The var keyword is used to declare a variable. At the time of declaring a variable, some rules need to be followed-

• The name should be limited to the alphabet or numeric.
• The variable name cannot be started with a digit.
• The name must not have any spaces and special character with exception of underscore (_) and the dollar($) sign.

Four ways to declare a variable:

1. If you are declaring type and value in a single statement. Syntax: var [identifier] : [type-annotation] = value;
2. If you are declaring type without value. Syntax: var [identifier] : [type-annotation];
3. If you are declaring its value without type. Syntax: var [identifier] = value;
4. If you are declaring without value and type. Syntax: var [identifier];

Follow this command used to compile a Typescript file into JavaScript.

$ tsc

For example, to compile “jobinterviewninjas.ts.”

$ tsc jobinterviewninjas.ts

The result would be jobinterviewninjas.js.

You need to use –outFILE [OutputJSFileName] compiling option.

$ tsc –outFile comman.js file1.ts file2.ts file3.ts

The given command will compile all files that are file1, file2, and file3 “.ts” file, and the output file is stored into one “comman.js” file. In this case, the .js file name is mentioned in the command.

$ tsc –outFile file1.ts file2.ts file3.ts

In case there is no name of the .js file mentioned then, file2.ts and file3.ts will be compiled, and the final file will be placed in file1.ts. So now the newly generated file1.ts contains JavaScript code.

By using the –watch compiler option you can automatically compile with real-time changes in the .ts file.

tsc –watch file1.ts

The given command compiles file1.ts in file1.js and automatically watches for the file changes. If any changes are found, the file will compile itself again. Just make sure that the command is not closed promptly on running with –watch option.

In Interface a structure that performs as a contract in an application. It explains through syntax which classes to follow, which simply states that a class that implements an interface is sure to implement all its members. It can’t be instantiated but refers to the class object that implements it. The compiler uses an interface for type-checking (also called “duck typing” or “structural subtyping”) whether the object structure is specified or not.

Syntax:

interface interface_name {

// variables’ declaration

// methods’ declaration

}

The interface only states the methods and fields and cannot be used to build or develop anything. It does not require any conversion to JavaScript for execution and has zero runtime JavaScript impact. So, the interface’s core purpose is to help in the development stage.

It is a type of Object-Oriented JS language that supports OOPs programming features like classes, interfaces, etc. As an example, Java classes are the fundamental units that develop reusable components. Classes are a group of objects which share common properties. It is basically a template or blueprint which is used for creating objects. To declare it use the “class” keyword.

Example:

class Student {

studCode: number;

studName: string;

constructor(code: number, name: string) {

this.studName = name;

this.studCode = code;

}

getGrade() : string {

return “A+” ;

}

}

• Modules
• Classes
• Interfaces
• Inheritance
• Data Types
• Member functions

1. Inheritance
2. Encapsulation
3. Polymorphism
4. Abstraction

In TypeScript the compiler will show an error if we try to run a function without declaring the exact number and types of parameters in the function signature. To rectify this fault, optional parameters are added by using the question mark sign ('?'). It shows that the parameters which may or may not receive a value can be affixed with a ‘?’ to mark them optional.

function Demo(arg1: number, arg2? :number) {

}So, arg1 is always required, and arg2 is an optional parameter.

Note: Optional parameters need to follow the required parameters. If you are making arg1 optional and arg2 required, then we need to change the orders

function Demo(arg2: number, arg1? :number) {

}

To debug a TypeScript file, you do require a .js source map file. So you need to compile the .ts file with the –sourcemap flag to finally get a source map file.

$ tsc -sourcemap file1.ts

The above command will create file1.js and file1.js.map. And the last line mentioned in file1.js would refer to a source map file.

//# sourceMappingURL=file1.js.map

TSD is a package manager which is used to search and install TypeScript definition files directly from the DefinitelyTyped repository.

Let assume to use some jQuery code in our .ts file.

$(document).ready(function() { //Your jQuery code });

Now, if you compile the code using tsc, then it shows a compile-time error: Cannot find the name “$”. So, you notify the TypeScript compiler that “$” belongs to jQuery and for this, TSD is used. You need to download the jQuery Type Definition file and add it to our .ts file. Follow the steps to run:

First, install TSD.

$ npm install tsd -g

In the TypeScript directory, create a new TypeScript project by running:

$ tsd init

Now install the definition file for jQuery.

tsd query jquery –action install

Through this command, you can download and create a new directory that has a jQuery definition file that ends with “.d.ts”. Now, add this definition file by upgrading the TypeScript file to point to the jQuery definition.

/// <reference path="typings/jquery/jquery.d.ts” />

$(document).ready(function() { //To Do

});

Now, try to compile again and the js file will be created without any error. Hence, the requirement of TSD helps us to get a type definition file for the required framework.

It is known to all that JavaScript libraries/frameworks don’t contain TypeScript declaration files, but it is required in TypeScript files with no compilation errors. The declare keyword is utilized for ambient declarations & methods where you need to define a variable that may exist elsewhere.

For example, let assume we already have a library called myLibrary with no TypeScript declaration file and the namespace given to it is myLibrary in the global namespace. If we use that library in our TypeScript code, then we require this code:

declare var myLibrary;

By using tsc compiler we can generate a TypeScript definition file from any .ts file which makes it reusable.

tsc –declaration file1.ts

This file is in a JSON format, with the help of this file, we can have multiple options to inform the compiler about how to compile the current project. This file directory specifies that the directory is used as a root of a TypeScript project.

{

“compilerOptions”: {

“declaration”: true,

“emitDecoratorMetadata”: false,

“experimentalDecorators”: false,

“module”: “none”,

“moduleResolution”: “node”

“removeComments”: true,

“sourceMap”: true

},

“files”: [

“main.ts”,

“othermodule.ts”

]

}

It is a tool that creates reusable components that can work with a variety of data types. It provides type safety and also does not negotiate the performance or productivity. Through generics, you can create generic methods, generic functions, generic classes, and generic interfaces.

In generics, a type parameter is represented between the open (<) and close (>) brackets which make a stronglytyped collection. It is denoted by a special kind of type variable . The generics collections contain only one types of object.

1. function identity(arg: T): T {

2. return arg;

3. }

4. let output1 = identity(“myString”);

5. let output2 = identity( 100 );

6. console.log(output1);

7. console.log(output2);

• Encapsulation,
• Inheritance,
• Abstraction, and
• Polymorphism.

You can use the juggling-check method to check both null and undefined:

1. if (x == null) {

2. }

Example

1. var a: number;

2. var b: number = null;

3. function check(x, name) {

4. if (x == null) {

5. console.log(name + ' == null’);

6. }

7. if (x === null) {

8. console.log(name + ' === null’);

9. }

10. if (typeof x === ‘undefined’) {

11. console.log(name + ' is undefined’);

12. }

13. }

14. check(a, ‘a’);

15. check(b, ‘b’);

Output

1. “a == null”

2. “a is undefined”

3. “b == null”

4. “b === null”

Here are some examples which tell you how to use the TypeScript on the backend. Firstly we need to choose Node.js and have some additional safety types and the other required abstraction that the language brings.

Install Typescript compiler

1. npm i -g typescript

Compile using tsconfig.json file.

1. {

2. “compilerOptions”: {

3. “target”: “es5”,

4. “module”: “commonjs”,

5. “declaration”: true,

6. “outDir”: “build”

7. }

8. }

Compile ts files

1. tsc

Run

1. node build/index.js

1. interface X {

2. a: number

3. b: string

4. }

5. type X = {

6. a: number

7. b: string

8. };

Differences are as follows:

• Interface declaration is a named object type whereas the type aliases can be any kind of type, including primitive, union, and intersection types.
• It can be named in an extends or implements clause and type aliases cannot be named in these clauses.
• It creates a new name that is used everywhere and on the other hand, Type aliases don’t create a new name

• It is basically a source map file that contains information on original files.
• .map files are source map file that allows tools to map between the emitted JavaScript and TypeScript code source files that created it.
• Many debuggers utilize these files to debug the TypeScript file instead of the JavaScript file.

It works as a typecasting in other programming languages, but it doesn’t execute type checking or restructuring of data as we can do in C# and Java. There is no impact on runtime in type assertion. Nonetheless, type assertions are only used by the compiler.

Example

1. let empCode: any = 111;

2. let employeeCode = code;

3. console.log(typeof(employeeCode)); //Output: number

It is an additional syntax for Type assertion. The main reason to add as-syntax is that the () syntax conflicts with JSX.

Example

1. let empCode: any = 111;

2. let employeeCode = code as number;

If you are using TypeScript with JSX only “as” syntax style assertions are used.

JSX is a Javascript with a different extension. This new extension helps in distinguishing the XML-like implementation of HTML in JavaScript. It is an embeddable XML-like syntax that transforms into valid JavaScript. It became popular with the React framework. TypeScript supports many features like embedding, type checking, and most importantly compiling JSX directly into JavaScript.

To use JSX, these two things are essentially required.

• Name the files with a .tsx extension
• Enable the jsx option

It is used to pass zero or more values to a function. To declare the rest parameters you need to prefix the three dots ('…') before the parameter. It permits the functions to contain a variable number of arguments without any use of the arguments object. It is helpful where we don’t know the number of parameters.

Rules to follow in rest parameter:

• You can use only one rest parameter in a function.
• It must be an array type.
• In the parameter list, the rest parameters need transforms to be last.

1. function sum(a: number, …b: number[]): number {

2. let result = a;

3. for (var i = 0; i < b.length; i++) {

4. result += b[i];

5. }

6. console.log(result);

7. }

8. let result1 = sum(3, 5);

9. let result2 = sum(3, 5, 7, 9);

Enumerations or Enums is a TypeScipt data type that permits you to define a set of named constants. Enums can make document intent easy and create a set of distinct cases as well. It is a collection of different values which can be numeric or string values.

Example

1. enum Gender {

2. Male,

3. Female

4. Other

5. }

6. console.log(Gender.Female); // Output: 1

7. //We can also access an enum value by it’s number value.

8. console.log(Gender[1]); // Output: Female

It allows a function to unload the object given as an argument into one or more local variables. For example:

function multiply({ a, b, c }: { a: number; b: number; c: number }) {

console.log(a * b * c);

}

multiply({ a: 1, b: 2, c: 3 });

Use an interface or a named type to simplify the code, like:

type ABC = { a: number; b: number; c: number };

function multiply({ a, b, c }: ABC) {

console.log(a * b * c);

}

multiply({ a: 1, b: 2, c: 3 });

An anonymous function is a function that doesn’t have any named identifier. These functions are declared at runtime. These functions can receive inputs and return outputs, as regular functions do. An anonymous function is usually not available after its initial creation.

Example

1. let myAdd = function(x: number, y: number): number {

2. return x + y;

3. };

4. console.log(myAdd())

It is a process of a compiler to merge two or more declarations. The declaration needs to be declared with the same name in one definition. This merged definition contains features of both original declarations.

Example

1. interface Cloner {

2. clone(animal: Animal): Animal;

3. }

4. interface Cloner {

5. clone(animal: Sheep): Sheep;

6. }

7. interface Cloner {

8. clone(animal: Dog): Dog;

9. clone(animal: Cat): Cat;

10. }

To create a single declaration, the three interfaces will merge as so:

1. interface Cloner {

2. clone(animal: Dog): Dog;

3. clone(animal: Cat): Cat;

4. clone(animal: Sheep): Sheep;

5. clone(animal: Animal): Animal;

6. }

If child class (subclass) contains a similar method as declared in the parent class then it is called overriding.

Rules for Method Overriding

• The method must have a similar name as used in the parent class
• The method must have child class parameters as used in the parent class.
• Must have an IS-A relationship (inheritance).

Example

1. class NewPrinter extends Printer {

2. doPrint(): any {

3. super.doPrint();

4. console.log(“Called Child class.");

5. }

6. doInkJetPrint(): any {

7. console.log(“Called doInkJetPrint().");

8. }

9. }

10. let printer: new () => NewPrinter;

11. printer.doPrint();

12. printer.doInkJetPrint();

ES6 Typescript version has shorthand syntax for describing the anonymous function, i.e., for function expressions. A lambda function or arrow function is a nameless function i.e. without a name. Arrow function ignores the function keyword.

Example

let sum = (a: number, b: number): number => {

return a + b;

}

console.log(sum(20, 30)); //returns 50

In the above example,

• the ?=>? represents lambda operator
• (a + b) represents the body of the function
• (a: number, b: number) represents inline parameters.