PJCHENder 未整理筆記

[TS] TypeScript Getting Started

2020-06-19

[TS] TypeScript Getting Started

此篇為各筆記之整理,非原創內容,資料來源可見下方連結與文後參考資料。

CLI

Compiler Options

1
2
3
4
5
6
7
8
$ npm install typescript
$ tsc --init
$ tsc # Run a compile based on a backwards look through the fs for a tsconfig.json
$ tsc index.ts
$ tsc src/*.ts # Transpile any .ts files in the folder src, with the default settings
$ tsc --watch # 常駐使用語法檢測

$ npx ts-node index.ts
  • ts-node-dev:當檔案有變更時能夠自動重啟(不是自動重新打包)
  • ts-node:不需重新打包就可以直接執行 ts 檔

概念

  • 為某變數定義型別的方式稱作「型別註記(type annotations)
  • 當我們宣告變數而沒有使用型別註記時,TypeScript 會自動進行「型別推論」的動作,也就是幫每個變數進行預設的型別註記。

Type

readonly properties

keywords: Readonly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
type Todo = {
readonly id: number;
readonly text: string;
readonly done: boolean;
};

// 等同於
type Todo = Readonly<{
id: number;
text: string;
done: boolean;
}>;

// 讓陣列不能被改變 readonly Array of Todo
type Todos = readonly Todo[];

literal types (exact value)

1
2
3
4
5
type CompletedTodo = Readonly<{
id: number;
text: string;
done: true; // 在定義 type 的時候,直接定義要使用某個值
}>;

Intersection and Union types

keywords: &, |

intersection type

1
2
3
4
5
6
7
8
9
10
11
type A = { a: number };
type B = { b: string };

// This intersection type…
type AAndB = A & B;

// 等同於
type AAndB = {
a: number;
b: string;
};

如果兩個屬性名稱相同,比較嚴格的規則(true)會把較不嚴格的規則(boolean)覆蓋(取交集的概念);但若兩個規則互斥無法取得交集時,則會變成 never

1
2
3
4
5
6
7
8
9
// B 的規則比 A 更嚴格
type A = { foo: boolean };
type B = { foo: true };

// 取得交集之後
type AAndB = A & B;

// 等同於
type AAndB = { foo: true };

透過這種方式,我們可以用原有的型別定義新的型別:

1
2
3
4
5
6
7
8
9
10
type Todo = Readonly<{
id: number;
text: string;
done: boolean;
}>;

// Override the done property of Todo
type CompletedTodo = Todo & {
readonly done: true;
};

Union Type

1
2
3
4
5
6
// 建立一個 Foo type,它是 number 和 string 的交集
type Foo = number | string;

// 使用 Foo 型別時,可以同時是 number 或 string
const a: Foo = 1;
const b: Foo = 'hello';

也可以搭配 literal type

1
type Place = 'home' | 'work' | { custom: string };

Interface

  • Optional Properties (?):可以不帶入該屬性
  • Readonly Properties (readonly):賦值之後將不能更改該值 - Readonly Array(ReadonlyArray<T>) - const vs readonlyconst 是針對變數使用,readonly 是針對物件屬性
  • Excess Property Checks:將 object literals 指派到其他變數或當作參數帶入時,這個 object literals 會被做更多的檢驗(excess property checking)
  • Function Types:使用 interface 定義 function
  • Indexable Types:使用 interface 定義 index 的型別和對應元素的型別
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// Function Types
interface SearchFunc {
(source: string, subString: string): boolean;
}

// Indexable Types
interface StringArray {
[index: number]: string;
}

// Read only string array
interface ReadonlyStringArray {
readonly [index: number]: string;
}

// Optional Properties:可以不帶入該屬性
interface SquareConfig {
color?: string;
width?: number;
}

// Readonly Properties:賦值之後將不能更改該值
interface Point {
readonly x: number;
readonly y: number;
}

// Readonly Array:陣列的元素不能被修改
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;

/**
* Excess Property Checks
**/
interface SquareConfig {
color?: string;
width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
return { color: config.color || 'red', area: config.width || 20 };
}

// 因為直接把 object literal 帶入參數,會經過 excess property checks
let errorSquare = createSquare({ colour: 'blue', width: 100 }); // 會報錯,

// 使用 type assertion
let typeAssertionSquare = createSquare({
width: 100,
opacity: 0.5,
} as SquareConfig); // 不會報錯

// 不建議這樣用,繞過 excess property checks
let square = { colour: 'blue', width: 100 };
let mySquare = createSquare(square); // 不會報錯

// 建議用法:
// 當可能會有額外參數時,比較好的做法,只要帶入的屬性不是 color 或 width,都可以被接受(不論型別)
interface SquareConfig {
color?: string;
width?: number;
[propName: string]: any;
}

Type Alias

Interfaces vs Types alias @ React TypeScript: Basics and Best Practices

透過 type aliases 並不是真的建立一個新的 Type,而是建立一個新的「名稱(name)」來指稱到這個 type。

ESLint

Day29 | 最強聯名款 TSX 上市-ESLint 篇 @ iThome

資料來源

掃描二維條碼,分享此文章