diff options
author | Divay Prakash <divayprakash@users.noreply.github.com> | 2019-12-23 23:14:50 +0530 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-12-23 23:14:50 +0530 |
commit | 16dc074e39f5f996639f23f4d6812c211ae5d22d (patch) | |
tree | 63be0d1a3885201f3d13f1dc00266fb719f304a7 /typescript.html.markdown | |
parent | ffd1fed725668b48ec8c11cbe419bd1e8d136ae3 (diff) | |
parent | 1d5f3671ea4bc6d7a70c3026c1ae6857741c50a6 (diff) |
Merge branch 'master' into master
Diffstat (limited to 'typescript.html.markdown')
-rw-r--r-- | typescript.html.markdown | 96 |
1 files changed, 89 insertions, 7 deletions
diff --git a/typescript.html.markdown b/typescript.html.markdown index 10f01ebc..00f0cbc5 100644 --- a/typescript.html.markdown +++ b/typescript.html.markdown @@ -5,13 +5,19 @@ contributors: filename: learntypescript.ts --- -TypeScript is a language that aims at easing development of large scale applications written in JavaScript. -TypeScript adds common concepts such as classes, modules, interfaces, generics and (optional) static typing to JavaScript. -It is a superset of JavaScript: all JavaScript code is valid TypeScript code so it can be added seamlessly to any project. The TypeScript compiler emits JavaScript. +TypeScript is a language that aims at easing development of large scale +applications written in JavaScript. TypeScript adds common concepts such as +classes, modules, interfaces, generics and (optional) static typing to +JavaScript. It is a superset of JavaScript: all JavaScript code is valid +TypeScript code so it can be added seamlessly to any project. The TypeScript +compiler emits JavaScript. -This article will focus only on TypeScript extra syntax, as opposed to [JavaScript](/docs/javascript). +This article will focus only on TypeScript extra syntax, as opposed to +[JavaScript](/docs/javascript). -To test TypeScript's compiler, head to the [Playground] (http://www.typescriptlang.org/Playground) where you will be able to type code, have auto completion and directly see the emitted JavaScript. +To test TypeScript's compiler, head to the +[Playground](https://www.typescriptlang.org/play) where you will be able +to type code, have auto completion and directly see the emitted JavaScript. ```ts // There are 3 basic types in TypeScript @@ -19,7 +25,8 @@ let isDone: boolean = false; let lines: number = 42; let name: string = "Anders"; -// But you can omit the type annotation if the variables are derived from explicit literals +// But you can omit the type annotation if the variables are derived +// from explicit literals let isDone = false; let lines = 42; let name = "Anders"; @@ -29,7 +36,7 @@ let notSure: any = 4; notSure = "maybe a string instead"; notSure = false; // okay, definitely a boolean -// Use const keyword for constant variables +// Use const keyword for constants const numLivesForCat = 9; numLivesForCat = 1; // Error @@ -113,6 +120,13 @@ class Point { static origin = new Point(0, 0); } +// Classes can be explicitly marked as implementing an interface. +// Any missing properties will then cause an error at compile-time. +class PointPerson implements Person { + name: string + move() {} +} + let p1 = new Point(10, 20); let p2 = new Point(25); //y will be 0 @@ -178,6 +192,74 @@ let greeting = `Hi ${name}, how are you?` let multiline = `This is an example of a multiline string`; +// READONLY: New Feature in TypeScript 3.1 +interface Person { + readonly name: string; + readonly age: number; +} + +var p1: Person = { name: "Tyrone", age: 42 }; +p1.age = 25; // Error, p1.age is read-only + +var p2 = { name: "John", age: 60 }; +var p3: Person = p2; // Ok, read-only alias for p2 +p3.age = 35; // Error, p3.age is read-only +p2.age = 45; // Ok, but also changes p3.age because of aliasing + +class Car { + readonly make: string; + readonly model: string; + readonly year = 2018; + + constructor() { + this.make = "Unknown Make"; // Assignment permitted in constructor + this.model = "Unknown Model"; // Assignment permitted in constructor + } +} + +let numbers: Array<number> = [0, 1, 2, 3, 4]; +let moreNumbers: ReadonlyArray<number> = numbers; +moreNumbers[5] = 5; // Error, elements are read-only +moreNumbers.push(5); // Error, no push method (because it mutates array) +moreNumbers.length = 3; // Error, length is read-only +numbers = moreNumbers; // Error, mutating methods are missing + +// Tagged Union Types for modelling state that can be in one of many shapes +type State = + | { type: "loading" } + | { type: "success", value: number } + | { type: "error", message: string }; + +declare const state: State; +if (state.type === "success") { + console.log(state.value); +} else if (state.type === "error") { + console.error(state.message); +} + +// Iterators and Generators + +// for..of statement +// iterate over the list of values on the object being iterated +let arrayOfAnyType = [1, "string", false]; +for (const val of arrayOfAnyType) { + console.log(val); // 1, "string", false +} + +let list = [4, 5, 6]; +for (const i of list) { + console.log(i); // 4, 5, 6 +} + +// for..in statement +// iterate over the list of keys on the object being iterated +for (const i in list) { + console.log(i); // 0, 1, 2 +} + + + + ``` ## Further Reading |