summaryrefslogtreecommitdiffhomepage
path: root/typescript.html.markdown
diff options
context:
space:
mode:
authorDivay Prakash <divayprakash@users.noreply.github.com>2019-12-23 23:14:50 +0530
committerGitHub <noreply@github.com>2019-12-23 23:14:50 +0530
commit16dc074e39f5f996639f23f4d6812c211ae5d22d (patch)
tree63be0d1a3885201f3d13f1dc00266fb719f304a7 /typescript.html.markdown
parentffd1fed725668b48ec8c11cbe419bd1e8d136ae3 (diff)
parent1d5f3671ea4bc6d7a70c3026c1ae6857741c50a6 (diff)
Merge branch 'master' into master
Diffstat (limited to 'typescript.html.markdown')
-rw-r--r--typescript.html.markdown96
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