Author:GoalKicker.com
Notes for professionals related to the Programming Language TypeScript
Tags
Support Statistics
¥.00 ·
0times
Text Preview (First 20 pages)
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
TypeScript Notes for ProfessionalsTypeScript Notes for Professionals GoalKicker.com Free Programming Books Disclaimer This is an unocial free book created for educational purposes and is not aliated with ocial TypeScript group(s) or company(s). All trademarks and registered trademarks are the property of their respective owners 80+ pages of professional hints and tricks
Page
2
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 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 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 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 ...................................................................................................................................
Page
3
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 ...................................................................................................... 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 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 ....................................................................................................... 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 ........
Page
4
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 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 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 ............................................................................................................................................. 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 ........................................................................................................................................................
Page
5
GoalKicker.com – TypeScript Notes for Professionals 1 About Please feel free to share this PDF with anyone for free, latest version of this book can be downloaded from: https://goalkicker.com/TypeScriptBook This TypeScript Notes for Professionals book is compiled from Stack Overflow Documentation, the content is written by the beautiful people at Stack Overflow. Text content is released under Creative Commons BY-SA, see credits at the end of this book whom contributed to the various chapters. Images may be copyright of their respective owners unless otherwise specified This is an unofficial free book created for educational purposes and is not affiliated with official TypeScript group(s) or company(s) nor Stack Overflow. All trademarks and registered trademarks are the property of their respective company owners The information presented in this book is not guaranteed to be correct nor accurate, use at your own risk Please send feedback and corrections to web@petercv.com
Page
6
GoalKicker.com – TypeScript Notes for Professionals 2 Chapter 1: Getting started with TypeScript 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 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.
Page
7
GoalKicker.com – TypeScript Notes for Professionals 3 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 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
Page
8
GoalKicker.com – TypeScript Notes for Professionals 4 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 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
9
GoalKicker.com – TypeScript Notes for Professionals 5 {} - 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; (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; } };
Page
10
GoalKicker.com – TypeScript Notes for Professionals 6 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 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
Page
11
GoalKicker.com – TypeScript Notes for Professionals 7 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
12
GoalKicker.com – TypeScript Notes for Professionals 8 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. Here, for instance, Visual Studio Code is able to rename references to the inner foo without altering the outer foo. This would be difficult to do with a simple find/replace.
Page
13
GoalKicker.com – TypeScript Notes for Professionals 9 Chapter 3: TypeScript Core Types Section 3.1: String Literal Types String literal types allow you to specify the exact value a string can have. let myFavoritePet: "dog"; myFavoritePet = "dog"; Any other string will give an error. // Error: Type '"rock"' is not assignable to type '"dog"'. // myFavoritePet = "rock"; Together with Type Aliases and Union Types you get a enum-like behavior. type Species = "cat" | "dog" | "bird"; function buyPet(pet: Species, name: string) : Pet { /*...*/ } buyPet(myFavoritePet /* "dog" as defined above */, "Rocky"); // Error: Argument of type '"rock"' is not assignable to parameter of type "'cat' | "dog" | "bird". Type '"rock"' is not assignable to type '"bird"'. // buyPet("rock", "Rocky"); String Literal Types can be used to distinguish overloads. function buyPet(pet: Species, name: string) : Pet; function buyPet(pet: "cat", name: string): Cat; function buyPet(pet: "dog", name: string): Dog; function buyPet(pet: "bird", name: string): Bird; function buyPet(pet: Species, name: string) : Pet { /*...*/ } let dog = buyPet(myFavoritePet /* "dog" as defined above */, "Rocky"); // dog is from type Dog (dog: Dog) They works well for User-Defined Type Guards. interface Pet { species: Species; eat(); sleep(); } interface Cat extends Pet { species: "cat"; } interface Bird extends Pet { species: "bird"; sing(); } function petIsCat(pet: Pet): pet is Cat { return pet.species === "cat"; }
Page
14
GoalKicker.com – TypeScript Notes for Professionals 10 function petIsBird(pet: Pet): pet is Bird { return pet.species === "bird"; } function playWithPet(pet: Pet){ if(petIsCat(pet)) { // pet is now from type Cat (pet: Cat) pet.eat(); pet.sleep(); } else if(petIsBird(pet)) { // pet is now from type Bird (pet: Bird) pet.eat(); pet.sing(); pet.sleep(); } } Full example code let myFavoritePet: "dog"; myFavoritePet = "dog"; // Error: Type '"rock"' is not assignable to type '"dog"'. // myFavoritePet = "rock"; type Species = "cat" | "dog" | "bird"; interface Pet { species: Species; name: string; eat(); walk(); sleep(); } interface Cat extends Pet { species: "cat"; } interface Dog extends Pet { species: "dog"; } interface Bird extends Pet { species: "bird"; sing(); } // Error: Interface 'Rock' incorrectly extends interface 'Pet'. Types of property 'species' are incompatible. Type '"rock"' is not assignable to type '"cat" | "dog" | "bird"'. Type '"rock"' is not assignable to type '"bird"'. // interface Rock extends Pet { // type: "rock"; // } function buyPet(pet: Species, name: string) : Pet; function buyPet(pet: "cat", name: string): Cat; function buyPet(pet: "dog", name: string): Dog; function buyPet(pet: "bird", name: string): Bird; function buyPet(pet: Species, name: string) : Pet { if(pet === "cat") {
Page
15
GoalKicker.com – TypeScript Notes for Professionals 11 return { species: "cat", name: name, eat: function () { console.log(`${this.name} eats.`); }, walk: function () { console.log(`${this.name} walks.`); }, sleep: function () { console.log(`${this.name} sleeps.`); } } as Cat; } else if(pet === "dog") { return { species: "dog", name: name, eat: function () { console.log(`${this.name} eats.`); }, walk: function () { console.log(`${this.name} walks.`); }, sleep: function () { console.log(`${this.name} sleeps.`); } } as Dog; } else if(pet === "bird") { return { species: "bird", name: name, eat: function () { console.log(`${this.name} eats.`); }, walk: function () { console.log(`${this.name} walks.`); }, sleep: function () { console.log(`${this.name} sleeps.`); }, sing: function () { console.log(`${this.name} sings.`); } } as Bird; } else { throw `Sorry we do not have a ${pet}. Would you like to buy a dog?`; } } function petIsCat(pet: Pet): pet is Cat { return pet.species === "cat"; } function petIsDog(pet: Pet): pet is Dog { return pet.species === "dog"; } function petIsBird(pet: Pet): pet is Bird { return pet.species === "bird"; } function playWithPet(pet: Pet) { console.log(`Hey ${pet.name}, lets play.`); if(petIsCat(pet)) { // pet is now from type Cat (pet: Cat) pet.eat(); pet.sleep();
Page
16
GoalKicker.com – TypeScript Notes for Professionals 12 // Error: Type '"bird"' is not assignable to type '"cat"'. // pet.type = "bird"; // Error: Property 'sing' does not exist on type 'Cat'. // pet.sing(); } else if(petIsDog(pet)) { // pet is now from type Dog (pet: Dog) pet.eat(); pet.walk(); pet.sleep(); } else if(petIsBird(pet)) { // pet is now from type Bird (pet: Bird) pet.eat(); pet.sing(); pet.sleep(); } else { throw "An unknown pet. Did you buy a rock?"; } } let dog = buyPet(myFavoritePet /* "dog" as defined above */, "Rocky"); // dog is from type Dog (dog: Dog) // Error: Argument of type '"rock"' is not assignable to parameter of type "'cat' | "dog" | "bird". Type '"rock"' is not assignable to type '"bird"'. // buyPet("rock", "Rocky"); playWithPet(dog); // Output: Hey Rocky, lets play. // Rocky eats. // Rocky walks. // Rocky sleeps. Section 3.2: Tuple Array type with known and possibly different types: let day: [number, string]; day = [0, 'Monday']; // valid day = ['zero', 'Monday']; // invalid: 'zero' is not numeric console.log(day[0]); // 0 console.log(day[1]); // Monday day[2] = 'Saturday'; // valid: [0, 'Saturday'] day[3] = false; // invalid: must be union type of 'number | string' Section 3.3: Boolean A boolean represents the most basic datatype in TypeScript, with the purpose of assigning true/false values. // set with initial value (either true or false) let isTrue: boolean = true; // defaults to 'undefined', when not explicitly set let unsetBool: boolean;
Page
17
GoalKicker.com – TypeScript Notes for Professionals 13 // can also be set to 'null' as well let nullableBool: boolean = null; Section 3.4: Intersection Types A Intersection Type combines the member of two or more types. interface Knife { cut(); } interface BottleOpener{ openBottle(); } interface Screwdriver{ turnScrew(); } type SwissArmyKnife = Knife & BottleOpener & Screwdriver; function use(tool: SwissArmyKnife){ console.log("I can do anything!"); tool.cut(); tool.openBottle(); tool.turnScrew(); } Section 3.5: Types in function arguments and return value. Number When you create a function in TypeScript you can specify the data type of the function's arguments and the data type for the return value Example: function sum(x: number, y: number): number { return x + y; } Here the syntax x: number, y: number means that the function can accept two argumentsx and y and they can only be numbers and (...): number { means that the return value can only be a number Usage: sum(84 + 76) // will be return 160 Note: You can not do so function sum(x: string, y: string): number { return x + y; } or
Page
18
GoalKicker.com – TypeScript Notes for Professionals 14 function sum(x: number, y: number): string { return x + y; } it will receive the following errors: error TS2322: Type 'string' is not assignable to type 'number' and error TS2322: Type 'number' is not assignable to type 'string' respectively Section 3.6: Types in function arguments and return value. String Example: function hello(name: string): string { return `Hello ${name}!`; } Here the syntax name: string means that the function can accept one name argument and this argument can only be string and (...): string { means that the return value can only be a string Usage: hello('StackOverflow Documentation') // will be return Hello StackOverflow Documentation! Section 3.7: const Enum A const Enum is the same as a normal Enum. Except that no Object is generated at compile time. Instead, the literal values are substituted where the const Enum is used. // TypeScript: A const Enum can be defined like a normal Enum (with start value, specific values, etc.) const enum NinjaActivity { Espionage, Sabotage, Assassination } // JavaScript: But nothing is generated // TypeScript: Except if you use it let myFavoriteNinjaActivity = NinjaActivity.Espionage; console.log(myFavoritePirateActivity); // 0 // JavaScript: Then only the number of the value is compiled into the code // var myFavoriteNinjaActivity = 0 /* Espionage */; // console.log(myFavoritePirateActivity); // 0 // TypeScript: The same for the other constant example console.log(NinjaActivity["Sabotage"]); // 1 // JavaScript: Just the number and in a comment the name of the value // console.log(1 /* "Sabotage" */); // 1 // TypeScript: But without the object none runtime access is possible // Error: A const enum member can only be accessed using a string literal. // console.log(NinjaActivity[myFavoriteNinjaActivity]);
Page
19
GoalKicker.com – TypeScript Notes for Professionals 15 For comparison, a normal Enum // TypeScript: A normal Enum enum PirateActivity { Boarding, Drinking, Fencing } // JavaScript: The Enum after the compiling // var PirateActivity; // (function (PirateActivity) { // PirateActivity[PirateActivity["Boarding"] = 0] = "Boarding"; // PirateActivity[PirateActivity["Drinking"] = 1] = "Drinking"; // PirateActivity[PirateActivity["Fencing"] = 2] = "Fencing"; // })(PirateActivity || (PirateActivity = {})); // TypeScript: A normal use of this Enum let myFavoritePirateActivity = PirateActivity.Boarding; console.log(myFavoritePirateActivity); // 0 // JavaScript: Looks quite similar in JavaScript // var myFavoritePirateActivity = PirateActivity.Boarding; // console.log(myFavoritePirateActivity); // 0 // TypeScript: And some other normal use console.log(PirateActivity["Drinking"]); // 1 // JavaScript: Looks quite similar in JavaScript // console.log(PirateActivity["Drinking"]); // 1 // TypeScript: At runtime, you can access an normal enum console.log(PirateActivity[myFavoritePirateActivity]); // "Boarding" // JavaScript: And it will be resolved at runtime // console.log(PirateActivity[myFavoritePirateActivity]); // "Boarding" Section 3.8: Number Like JavaScript, numbers are floating point values. let pi: number = 3.14; // base 10 decimal by default let hexadecimal: number = 0xFF; // 255 in decimal ECMAScript 2015 allows binary and octal. let binary: number = 0b10; // 2 in decimal let octal: number = 0o755; // 493 in decimal Section 3.9: String Textual data type: let singleQuotes: string = 'single'; let doubleQuotes: string = "double"; let templateString: string = `I am ${ singleQuotes }`; // I am single
Page
20
GoalKicker.com – TypeScript Notes for Professionals 16 Section 3.10: Array An array of values: let threePigs: number[] = [1, 2, 3]; let genericStringArray: Array<string> = ['first', '2nd', '3rd']; Section 3.11: Enum A type to name a set of numeric values: Number values default to 0: enum Day { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday }; let bestDay: Day = Day.Saturday; Set a default starting number: enum TenPlus { Ten = 10, Eleven, Twelve } or assign values: enum MyOddSet { Three = 3, Five = 5, Seven = 7, Nine = 9 } Section 3.12: Any When unsure of a type, any is available: let anything: any = 'I am a string'; anything = 5; // but now I am the number 5 Section 3.13: Void If you have no type at all, commonly used for functions that do not return anything: function log(): void { console.log('I return nothing'); } void types Can only be assigned null or undefined.
The above is a preview of the first 20 pages. Register to read the complete e-book.
Comments 0
Loading comments...
Reply to Comment
Edit Comment