TypeScript Notes for Professionals typed superset of JavaScript (GoalKicker.com Stack Overflow Documentation) (Z-Library)

📄 File Format: PDF

💾 File Size: 937.5 KB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

TypeScript TypeScript Notes for Professionals 80+ pages of professional hints and tricks GoalKicker.com Disclaimer This is an uno cial free book created for educational purposes and is Free Programming Books

📄 Page 3

not a liated with o cial TypeScript group(s) or company(s). All trademarks and registered trademarks are the property of their respective owners Contents About ........................................................................................................................... ........................................................ 1 Chapter 1: Getting started with TypeScript .................................................................................................... 2 Section 1.1: Installation and setup ........................................................................................................................... ...... 2 Section 1.2: Basic syntax ........................................................................................................................... .................... 4 Section 1.3: Hello World ........................................................................................................................... ...................... 5 Section 1.4: Running TypeScript using ts-node .......................................................................................................... 6 Section 1.5: TypeScript REPL in Node.js ....................................................................................................................... 6 Chapter 2: Why and when to use TypeScript ................................................................................................. 8 Section 2.1: Safety ........................................................................................................................... ............................... 8 Section 2.2: Readability ........................................................................................................................... ..................... 8 Section 2.3: Tooling ........................................................................................................................... ............................ 8 Chapter 3: TypeScript Core Types ....................................................................................................................... 9 Section 3.1: String Literal Types

📄 Page 4

........................................................................................................................... ......... 9 Section 3.2: Tuple ........................................................................................................................... ............................. 12 Section 3.3: Boolean ........................................................................................................................... ......................... 12 Section 3.4: Intersection Types ........................................................................................................................... ....... 13 Section 3.5: Types in function arguments and return value. Number ................................................................... 13 Section 3.6: Types in function arguments and return value. String ....................................................................... 14 Section 3.7: const Enum ........................................................................................................................... ................... 14 Section 3.8: Number ........................................................................................................................... ......................... 15 Section 3.9: String ........................................................................................................................... ............................. 15 Section 3.10: Array ........................................................................................................................... ............................ 16 Section 3.11: Enum ........................................................................................................................... ............................. 16 Section 3.12: Any ........................................................................................................................... ............................... 16 Section 3.13: Void ........................................................................................................................... .............................. 16 Chapter 4: Arrays

📄 Page 5

........................................................................................................................... ............................ 17 Section 4.1: Finding Object in Array ........................................................................................................................... 17 Chapter 5: Enums ........................................................................................................................... ............................. 18 Section 5.1: Enums with explicit values ...................................................................................................................... 18 Section 5.2: How to get all enum values ................................................................................................................... 19 Section 5.3: Extending enums without custom enum implementation .................................................................. 19 Section 5.4: Custom enum implementation: extends for enums ............................................................................ 19 Chapter 6: Functions ........................................................................................................................... ...................... 21 Section 6.1: Optional and Default Parameters ......................................................................................................... 21 Section 6.2: Function as a parameter ....................................................................................................................... 21 Section 6.3: Functions with Union Types ................................................................................................................... 23 Section 6.4: Types of Functions ........................................................................................................................... ...... 23 Chapter 7: Classes ........................................................................................................................... ........................... 24 Section 7.1: Abstract Classes ........................................................................................................................... ........... 24 Section 7.2: Simple class ...........................................................................................................................

📄 Page 6

.................. 24 Section 7.3: Basic Inheritance ........................................................................................................................... .......... 25 Section 7.4: Constructors ........................................................................................................................... ................. 25 Section 7.5: Accessors ........................................................................................................................... ...................... 26 Section 7.6: Transpilation ........................................................................................................................... ................ 27 Section 7.7: Monkey patch a function into an existing class .................................................................................. 28 Chapter 8: Class Decorator ........................................................................................................................... ........ 29 Section 8.1: Generating metadata using a class decorator .................................................................................... 29 Section 8.2: Passing arguments to a class decorator ............................................................................................. 29 Section 8.3: Basic class decorator ........................................................................................................................... .. 30 Chapter 9: Interfaces ........................................................................................................................... ..................... 32 Section 9.1: Extending Interface ........................................................................................................................... ...... 32 Section 9.2: Class Interface ........................................................................................................................... ............. 32 Section 9.3: Using Interfaces for Polymorphism ...................................................................................................... 33

📄 Page 7

Section 9.4: Generic Interfaces ........................................................................................................................... ....... 34 Section 9.5: Add functions or properties to an existing interface .......................................................................... 35 Section 9.6: Implicit Implementation And Object Shape ......................................................................................... 35 Section 9.7: Using Interfaces to Enforce Types ....................................................................................................... 36 Chapter 10: Generics ........................................................................................................................... ...................... 37 Section 10.1: Generic Interfaces ........................................................................................................................... ....... 37 Section 10.2: Generic Class ........................................................................................................................... .............. 37 Section 10.3: Type parameters as constraints ......................................................................................................... 38 Section 10.4: Generics Constraints ........................................................................................................................... .. 38 Section 10.5: Generic Functions ........................................................................................................................... ....... 39 Section 10.6: Using generic Classes and Functions: ................................................................................................. 39 Chapter 11: Strict null checks ........................................................................................................................... ..... 40 Section 11.1: Strict null checks in action ...................................................................................................................... 40 Section 11.2: Non-null assertions ........................................................................................................................... ..... 40 Chapter 12: User-defined Type Guards

📄 Page 8

........................................................................................................... 42 Section 12.1: Type guarding functions ....................................................................................................................... 42 Section 12.2: Using instanceof ........................................................................................................................... ......... 43 Section 12.3: Using typeof ........................................................................................................................... ................ 43 Chapter 13: TypeScript basic examples .......................................................................................................... 45 Section 13.1: 1 basic class inheritance example using extends and super keyword ............................................. 45 Section 13.2: 2 static class variable example - count how many time method is being invoked ....................... 45 Chapter 14: Importing external libraries ........................................................................................................ 46 Section 14.1: Finding definition files ........................................................................................................................... . 46 Section 14.2: Importing a module from npm ............................................................................................................ 47 Section 14.3: Using global external libraries without typings .................................................................................. 47 Section 14.4: Finding definition files with TypeScript 2.x .......................................................................................... 47 Chapter 15: Modules - exporting and importing ......................................................................................... 49 Section 15.1: Hello world module ........................................................................................................................... ..... 49 Section 15.2: Re-export ........................................................................................................................... .................... 49 Section 15.3: Exporting/Importing declarations ....................................................................................................... 51

📄 Page 9

Chapter 16: Publish TypeScript definition files ............................................................................................ 52 Section 16.1: Include definition file with library on npm ........................................................................................... 52 Chapter 17: Using TypeScript with webpack ................................................................................................ 53 Section 17.1: webpack.config.js ........................................................................................................................... ........ 53 Chapter 18: Mixins ........................................................................................................................... ............................ 54 Section 18.1: Example of Mixins ........................................................................................................................... ....... 54 Chapter 19: How to use a JavaScript library without a type definition file ................................. 55 Section 19.1: Make a module that exports a default any ......................................................................................... 55 Section 19.2: Declare an any global .......................................................................................................................... 55 Section 19.3: Use an ambient module ....................................................................................................................... 56 Chapter 20: TypeScript installing typescript and running the typescript compiler tsc ........ 57 Section 20.1: Steps ........................................................................................................................... ............................ 57 Chapter 21: Configure typescript project to compile all files in typescript. ................................ 59 Section 21.1: TypeScript Configuration file setup ..................................................................................................... 59 Chapter 22: Integrating with Build Tools ........................................................................................................ 61 Section 22.1: Browserify

📄 Page 10

........................................................................................................................... ................... 61 Section 22.2: Webpack ........................................................................................................................... .................... 61 Section 22.3: Grunt ........................................................................................................................... ........................... 62 Section 22.4: Gulp ........................................................................................................................... ............................. 62 Section 22.5: MSBuild ........................................................................................................................... ....................... 63 Section 22.6: NuGet ........................................................................................................................... .......................... 63 Section 22.7: Install and configure webpack + loaders ........................................................................................... 64 Chapter 23: Using TypeScript with RequireJS ............................................................................................. 65 Section 23.1: HTML example using RequireJS CDN to include an already compiled TypeScript file ................. 65 Section 23.2: tsconfig.json example to compile to view folder using RequireJS import style ............................ 65 Chapter 24: TypeScript with AngularJS ......................................................................................................... 66 Section 24.1: Directive ........................................................................................................................... ...................... 66 Section 24.2: Simple example ........................................................................................................................... ......... 67 Section 24.3: Component ........................................................................................................................... ................. 67 Chapter 25: TypeScript with SystemJS

📄 Page 11

........................................................................................................... 69 Section 25.1: Hello World in the browser with SystemJS ......................................................................................... 69 Chapter 26: Using TypeScript with React (JS & native) ......................................................................... 72 Section 26.1: ReactJS component written in TypeScript ......................................................................................... 72 Section 26.2: TypeScript & react & webpack ........................................................................................................... 73 Chapter 27: TSLint - assuring code quality and consistency ............................................................... 75 Section 27.1: Configuration for fewer programming errors .................................................................................... 75 Section 27.2: Installation and setup ........................................................................................................................... 75 Section 27.3: Sets of TSLint Rules ........................................................................................................................... ... 76 Section 27.4: Basic tslint.json setup ........................................................................................................................... 76 Section 27.5: Using a predefined ruleset as default ................................................................................................ 76 Chapter 28: tsconfig.json ........................................................................................................................... ............. 78 Section 28.1: Create TypeScript project with tsconfig.json ..................................................................................... 78 Section 28.2: Configuration for fewer programming errors ................................................................................... 79 Section 28.3: compileOnSave ........................................................................................................................... .......... 80 Section 28.4: Comments ........................................................................................................................... .................. 80

📄 Page 12

Section 28.5: preserveConstEnums ........................................................................................................................... 81 Chapter 29: Debugging ........................................................................................................................... ................. 82 Section 29.1: TypeScript with ts-node in WebStorm ................................................................................................ 82 Section 29.2: TypeScript with ts-node in Visual Studio Code ................................................................................. 83 Section 29.3: JavaScript with SourceMaps in Visual Studio Code .......................................................................... 84 Section 29.4: JavaScript with SourceMaps in WebStorm ....................................................................................... 84 Chapter 30: Unit Testing ........................................................................................................................... .............. 86 Section 30.1: tape ........................................................................................................................... .............................. 86 Section 30.2: jest (ts-jest) ........................................................................................................................... ................ 87 Section 30.3: Alsatian ........................................................................................................................... ....................... 89 Section 30.4: chai-immutable plugin ......................................................................................................................... 89 Credits ........................................................................................................................... ................................................... 91 You may also like ........................................................................................................................... ............................. 93 Chapter 1: Getting started with TypeScript

📄 Page 13

Version Release Date 2.8.3 2018-04-20 2.8 2018-03-28 2.8 RC 2018-03-16 2.7.2 2018-02-16 2.7.1 2018-02-01 2.7 beta 2018-01-18 2.6.1 2017-11-01 2.5.2 2017-09-01 2.4.1 2017-06-28 2.3.2 2017-04-28 2.3.1 2017-04-25 2.3.0 beta 2017-04-04 2.2.2 2017-03-13 2.2 2017-02-17 2.1.6 2017-02-07 2.2 beta 2017-02-02 2.1.5 2017-01-05 2.1.4 2016-12-05 2.0.8 2016-11-08 2.0.7 2016-11-03 2.0.6 2016-10-23 2.0.5 2016-09-22 2.0 Beta 2016-07-08 1.8.10 2016-04-09 1.8.9 2016-03-16 1.8.5 2016-03-02 1.8.2 2016-02-17 1.7.5 2015-12-14 1.7 2015-11-20 1.6 2015-09-11 1.5.4 2015-07-15 1.5 2015-07-15 1.4 2015-01-13 1.3 2014-10-28 1.1.0.1 2014-09-23

📄 Page 14

Section 1.1: Installation and setup Background TypeScript is a typed superset of JavaScript that compiles directly to JavaScript code. TypeScript files commonly use the .ts extension. Many IDEs support TypeScript without any other setup required, but TypeScript can also be compiled with the TypeScript Node.JS package from the command line. IDEs Visual Studio Visual Studio 2015 includes TypeScript. Visual Studio 2013 Update 2 or later includes TypeScript, or you can download TypeScript for earlier versions . Visual Studio Code Visual Studio Code (vscode) provides contextual autocomplete as well as refactoring and debugging tools for TypeScript. vscode is itself implemented in TypeScript. Available for Mac OS X, Windows and Linux. WebStorm WebStorm 2016.2 comes with TypeScript and a built-in compiler. [WebStorm is not free] IntelliJ IDEA IntelliJ IDEA 2016.2 has support for TypeScript and a compiler via a plugin maintained by the JetBrains team. [IntelliJ is not free] Atom & atom-typescript Atom supports TypeScript with the atom-typescript package. Sublime Text Sublime Text supports TypeScript with the TypeScript package. Installing the command line interface Install Node.js Install the npm package globally You can install TypeScript globally to have access to it from any directory. npm install -g typescript or

📄 Page 15

Install the npm package locally You can install TypeScript locally and save to package.json to restrict to a directory. npm install typescript --save-dev Installation channels You can install from: Stable channel: npm install typescript Beta channel: npm install typescript@ beta Dev channel: npm install typescript@ next Compiling TypeScript code The tsc compilation command comes with typescript, which can be used to compile code. tsc my- code.ts This creates a my- code.js file. Compile using tsconfig.json You can also provide compilation options that travel with your code via a tsconfig. json file. To start a new TypeScript project, cd into your project's root directory in a terminal window and run tsc - init. This command will generate a tsconfig.json file with minimal configuration options, similar to below. { "compilerOptions" : { "module" : "commonjs" , "target" : "es5" , "noImplicitAny" : false , "sourceMap" : false , "pretty" : true }, "exclude" : [ "node_modules" ] } With a tsconfig.json file placed at the root of your TypeScript project, you can use the tsc command to run the compilation. Section 1.2: Basic syntax TypeScript is a typed superset of JavaScript, which means that all JavaScript code is valid TypeScript code. TypeScript adds a lot of new features on top

📄 Page 16

of that. TypeScript makes JavaScript more like a strongly-typed, object-oriented language akin to C# and Java. This means that TypeScript code tends to be easier to use for large projects and that code tends to be easier to understand and maintain. The strong typing also means that the language can (and is) precompiled and that variables cannot be assigned values that are out of their declared range. For instance, when a TypeScript variable is declared as a number, you cannot assign a text value to it. This strong typing and object orientation makes TypeScript easier to debug and maintain, and those were two of the weakest points of standard JavaScript. Type declarations You can add type declarations to variables, function parameters and function return types. The type is written after a colon following the variable name, like this: var num: number = 5 ; The compiler will then check the types (where possible) during compilation and report type errors. var num: number = 5 ; num = "this is a string" ; // error: Type 'string' is not assignable to type 'number'. The basic types are : number (both integers and floating point numbers) string boolean Array. You can specify the types of an array's elements. There are two equivalent ways to define array types: Array< T> and T[] . For example: number[] - array of numbers Array< string> - array of strings Tuples. Tuples have a fixed number of elements with specific types. [ boolean , string] - tuple where the first element is a boolean and the second is a string. [ number, number, number] - tuple of three numbers.

📄 Page 17

{} - object, you can define its properties or indexer { name: string, age: number} - object with name and age attributes {[ key: string]: number} - a dictionary of numbers indexed by string enum - { Red = 0 , Blue, Green } - enumeration mapped to numbers Function. You specify types for the parameters and return value: ( param: number) => string - function taking one number parameter returning string () => number - function with no parameters returning an number. ( a: string, b?: boolean ) => void - function taking a string and optionally a boolean with no return value. any - Permits any type. Expressions involving any are not type checked. void - represents "nothing", can be used as a function return value. Only null and undefined are part of the void type. never let foo: never; -As the type of variables under type guards that are never true. function error( message: string): never { throw new Error( message); } - As the return type of functions that never return. null - type for the value null . null is implicitly part of every type, unless strict null checks are enabled. Casting You can perform explicit casting through angle brackets, for instance: var derived: MyInterface; (< ImplementingClass> derived) .someSpecificMethod (); This example shows a derived class which is treated by the compiler as a MyInterface. Without the casting on the second line the compiler would throw an exception as it does not understand someSpecificMethod() , but casting through <ImplementingClass> derived suggests the compiler what to do. Another way of casting in TypeScript is using the as keyword: var derived: MyInterface;

📄 Page 18

( derived as ImplementingClass) .someSpecificMethod (); Since TypeScript 1.6, the default is using the as keyword, because using < > is ambiguous in .jsx files. This is mentioned in TypeScript official documentation . Classes Classes can be defined and used in TypeScript code. To learn more about classes, see the Classes documentation page. Section 1.3: Hello World class Greeter { greeting: string; constructor ( message: string) { this .greeting = message; } greet(): string { return this .greeting ; } }; let greeter = new Greeter( "Hello, world!" ); console.log ( greeter.greet ()); Here we have a class, Greeter, that has a constructor and a greet method. We can construct an instance of the class using the new keyword and pass in a string we want the greet method to output to the console. The instance of our Greeter class is stored in the greeter variable which we then us to call the greet method. Section 1.4: Running TypeScript using ts-node ts-node is an npm package which allows the user to run typescript files directly, without the need for precompilation using tsc. It also provides REPL . Install ts-node globally using npm install -g ts-node ts-node does not bundle typescript compiler, so you might need to install it. npm install -g typescript Executing script

📄 Page 19

To execute a script named main.ts , run ts- node main.ts // main.ts console.log ( "Hello world" ); Example usage $ ts- node main.ts Hello world Running REPL To run REPL run command ts- node Example usage $ ts - node > const sum = ( a, b): number => a + b; undefined > sum( 2 , 2 ) 4 > .exit To exit REPL use command .exit or press CTRL+ C twice. Section 1.5: TypeScript REPL in Node.js For use TypeScript REPL in Node.js you can use tsun package Install it globally with npm install -g tsun and run in your terminal or command prompt with tsun command Usage example: $ tsun TSUN : TypeScript Upgraded Node type in TypeScript expression to evaluate type : help for commands in repl $ function multiply( x, y) { .. return x * y; ..} undefined $ multiply( 3 , 4 ) 12

📄 Page 20

Chapter 2: Why and when to use TypeScript If you find the arguments for type systems persuasive in general, then you'll be happy with TypeScript. It brings many of the advantages of type system (safety, readability, improved tooling) to the JavaScript ecosystem. It also suffers from some of the drawbacks of type systems (added complexity and incompleteness). Section 2.1: Safety TypeScript catches type errors early through static analysis: function double ( x: number): number { return 2 * x; } double ( '2' ); // ~~~ Argument of type '"2"' is not assignable to parameter of type 'number'. Section 2.2: Readability TypeScript enables editors to provide contextual documentation: You'll never forget whether String. prototype .slice takes ( start, stop) or ( start, length) again! Section 2.3: Tooling TypeScript allows editors to perform automated refactors which are aware of the rules of the languages.