TYPESCRIPT

[Pages:111]TYPESCRIPT

Table of Contents

TypeScript Overview ...............................................................................................................................................................5 TypeScript Version History ..................................................................................................................................................5 Why TypeScript? ........................................................................................................................................................................6 How to use TypeScript?..........................................................................................................................................................6 TypeScript Features .................................................................................................................................................................7 TypeScript Advantages ...........................................................................................................................................................8 Install TypeScript.......................................................................................................................................................................9 Install TypeScript using NPM ..............................................................................................................................................9 TypeScript Playground ...........................................................................................................................................................9 TypeScript - Type Annotations........................................................................................................................................10 TypeScript - Variable ............................................................................................................................................................12

var ......................................................................................................................................................................................... 12 let ..........................................................................................................................................................................................12 Advantages of using let over var................................................................................................................................14 Const .................................................................................................................................................................................... 16 TypeScript Data Type - Number .....................................................................................................................................18 Number Methods ..........................................................................................................................................................18 toExponential().............................................................................................................................................................. 18 toFixed() ............................................................................................................................................................................ 19 toLocaleString()............................................................................................................................................................. 19 toPrecision() ...................................................................................................................................................................20 toString()........................................................................................................................................................................... 20 valueOf()............................................................................................................................................................................ 21 TypeScript ? String.................................................................................................................................................................22 Template String ..................................................................................................................................................................22 String methods....................................................................................................................................................................22 charAt().............................................................................................................................................................................. 23 concat() .............................................................................................................................................................................. 23 indexOf() ...........................................................................................................................................................................23 replace() ............................................................................................................................................................................24 split()................................................................................................................................................................................... 24 toUpperCase() ................................................................................................................................................................25 toLowerCase() ................................................................................................................................................................ 25 TypeScript Data Type ? Boolean.....................................................................................................................................26 TypeScript - Arrays................................................................................................................................................................27

1

Accessing Array Elements: ......................................................................................................................................28 Array Methods.....................................................................................................................................................................29 TypeScript ? Tuples...............................................................................................................................................................30

Accessing Tuple Elements........................................................................................................................................31 Add Elements into Tuple ..........................................................................................................................................31 TypeScript Data Type ? Enum..........................................................................................................................................33 Numeric Enum ....................................................................................................................................................................33 Computed Enums:........................................................................................................................................................35 String Enum..........................................................................................................................................................................36 Heterogeneous Enum ......................................................................................................................................................36 Reverse Mapping ...............................................................................................................................................................37 TypeScript - Union .................................................................................................................................................................39 TypeScript Data Type - Any...............................................................................................................................................40 TypeScript Data Type ? Void ............................................................................................................................................41 TypeScript Data Type - Never ..........................................................................................................................................42 Difference between never and void .........................................................................................................................42 Type Inference in TypeScript ...........................................................................................................................................43 Type inference in complex objects ...........................................................................................................................43 Type Assertion in TypeScript ...........................................................................................................................................45 TypeScript - if else..................................................................................................................................................................47 if else Condition..................................................................................................................................................................47 else if ........................................................................................................................................................................................48 Ternary operator ...............................................................................................................................................................48 TypeScript - switch ................................................................................................................................................................49 TypeScript - for Loops..........................................................................................................................................................51 for Loop...................................................................................................................................................................................51 for...of Loop ...........................................................................................................................................................................52 for...in Loop ...........................................................................................................................................................................52 TypeScript - while Loop ......................................................................................................................................................53 do..while loop.......................................................................................................................................................................54 TypeScript - Functions.........................................................................................................................................................55 Named Functions...............................................................................................................................................................55 Anonymous Function.......................................................................................................................................................55 Function Parameters .......................................................................................................................................................56 Optional Parameters ........................................................................................................................................................56 Default Parameters...........................................................................................................................................................57 TypeScript - Arrow Functions..........................................................................................................................................58

2

TypeScript - Function Overloading ...............................................................................................................................60 TypeScript - Rest Parameters...........................................................................................................................................61 TypeScript - Interfaces.........................................................................................................................................................62

Interface as Type................................................................................................................................................................62 Interface as Function Type ...........................................................................................................................................63 Interface for Array Type.................................................................................................................................................64 Optional Property..............................................................................................................................................................64 Read only Properties .......................................................................................................................................................65 Extending Interfaces ........................................................................................................................................................65 Implementing an Interface ...........................................................................................................................................66 TypeScript - Classes...............................................................................................................................................................67 Constructor ........................................................................................................................................................................... 68 Creating an Object of Class............................................................................................................................................68 Inheritance ............................................................................................................................................................................ 69 Class Implements Interface ..........................................................................................................................................70 Interface extends Class ...................................................................................................................................................71 Method Overriding............................................................................................................................................................71 TypeScript - Abstract Class................................................................................................................................................73 TypeScript - Data Modifiers...............................................................................................................................................75 public........................................................................................................................................................................................75 private...................................................................................................................................................................................... 75 protected ................................................................................................................................................................................ 76 TypeScript - ReadOnly .........................................................................................................................................................77 TypeScript - Static ..................................................................................................................................................................79 TypeScript - Modules............................................................................................................................................................81 Export ......................................................................................................................................................................................82 Import ...................................................................................................................................................................................... 82

Importing a Single export from a Module:.......................................................................................................83 Importing the Entire Module into a Variable.................................................................................................83 Renaming an Export from a Module:..................................................................................................................83 Compiling a TypeScript Module......................................................................................................................................84 Using Module in Web Application.............................................................................................................................86 TypeScript - Namespaces ...................................................................................................................................................87 Compiling Namespace.....................................................................................................................................................89 Namespace vs Module.....................................................................................................................................................90 TypeScript - Generics............................................................................................................................................................91 Multiple Type Variables:................................................................................................................................................92

3

Methods and Properties of Generic Type..............................................................................................................93 Generic Constraints ..........................................................................................................................................................94 TypeScript - Generic Interface .........................................................................................................................................95 TypeScript - Generic Classes.............................................................................................................................................98 Compile TypeScript Project............................................................................................................................................100 tsconfig.json....................................................................................................................................................................... 100 TypeScript - Build Tools................................................................................................................................................... 103 Browserify .......................................................................................................................................................................... 103 Grunt...................................................................................................................................................................................... 103 Gulp........................................................................................................................................................................................ 104 Webpack .............................................................................................................................................................................. 105 Converting Existing JavaScript to TypeScript ....................................................................................................... 106 Add tsconfig.json File to Project.............................................................................................................................. 106 Integrate with a build tool.......................................................................................................................................... 107 Converting .js files to .ts files .................................................................................................................................... 108 Check for Errors .............................................................................................................................................................. 108 Using Third-party JavaScript Libraries ............................................................................................................... 110

4

TypeScript Overview

TypeScript is an open-source, object-oriented language developed and maintained by Microsoft, licensed under Apache 2 license. TypeScript extends JavaScript by adding data types, classes, and other object-oriented features with type-checking. It is a typed superset of JavaScript that compiles to plain JavaScript. Official website: Source code:

TypeScript Version History

5

Why TypeScript?

JavaScript is a dynamic programming language with no type system. JavaScript provides primitive types like string, number, object, etc., but it doesn't check assigned values. JavaScript variables are declared using the var keyword, and it can point to any value. JavaScript doesn't support classes and other object-oriented features. So, without the type system, it is not easy to use JavaScript to build complex applications with large teams working on the same code. The type system increases the code quality, readability and makes it easy to maintain and refactor codebase. More importantly, errors can be caught at compile time rather than at runtime. Hence, the reason to use TypeScript is that it catches errors at compile-time, so that you can fix it before you run code. It supports object-oriented programming features like data types, classes, enums, etc., allowing JavaScript to be used at scale. TypeScript compiles into simple JavaScript. The TypeScript compiler is also implemented in TypeScript and can be used with any browser or JavaScript engines like Node.js. TypeScript needs an ECMAScript 3 or higher compatible environment to compile. This is a condition met by all browsers and JavaScript engines today. Some of the most popular JavaScript frameworks like Angular.js and WinJS are written in TypeScript.

How to use TypeScript?

TypeScript code is written in a file with .ts extension and then compiled into JavaScript using the TypeScript compiler. A TypeScript file can be written in any code editor. A TypeScript compiler needs to be installed on your platform. Once installed, the command tsc .ts compiles the TypeScript code into a plain JavaScript file. JavaScript files can then be included in the HTML and run on any browser.

6

TypeScript Features

1. Cross-Platform: TypeScript runs on any platform that JavaScript runs on. The TypeScript compiler can be installed on any Operating System such as Windows, macOS, and Linux.

2. Object-Oriented Language: TypeScript provides powerful features such as Classes, Interfaces, and Modules. You can write pure object-oriented code for client-side as well as server-side development.

3. Static type-checking: TypeScript uses static typing. This is done using type annotations. It helps type checking at compile time. Thus, you can find errors while typing the code without running your script each time. Additionally, using the type inference mechanism, if a variable is declared without a type, it will be inferred based on its value.

4. Optional Static Typing: TypeScript static typing is optional if you prefer to use JavaScript's dynamic typing.

5. DOM Manipulation: Like JavaScript, TypeScript can be used to manipulate the DOM. 6. ES 6 Features: TypeScript includes most features of planned ECMAScript 2015 (ES 6, 7)

such as class, interface, Arrow functions etc.

7

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download