參考網站
很多人在平時的開發中使用到了 TypeScript，但是可能只是單純使用了一些基本的類型，但很多人不知道其實 TypeScript 自帶了很多非常方便的方法，接下來我就結合例子，給大家介紹一下這些很方便的方法。
TypeScript 自帶的方法
Partial
作用
Partial 將類型的屬性變成可選
例子
假如我現在有個 interface
1
2
3
4
5
| interface IUser1 {
name: string;
age: number;
gender: number;
}
|
有一天，我想把 IUser 身上的屬性都變成可選的，那我可能會再寫一個 interface
1
2
3
4
5
| interface IUser2 {
name?: string;
age?: number;
gender?: number;
}
|
但是如果屬性多了的話，我們又得寫很多額外的代碼，這個時候就可以直接用 Partial
1
2
3
4
5
6
7
8
9
| type IUser2 = Partial<IUser1>
// 等同於
interface IUser2 {
name?: string;
age?: number;
gender?: number;
}
|
原理
1
2
3
| type Partial<T> = {
[P in keyof T]?: T[P];
};
|
Required
作用
Required 將類型的屬性變成必選
例子
假如我現在有個 interface
1
2
3
4
5
| interface IUser1 {
name: string;
age?: number;
gender?: number;
}
|
可以看到有一些屬性是可選的，但是突然有一天，我想讓所有屬性變成必選我會再寫一個 interface
1
2
3
4
5
| interface IUser2 {
name: string;
age: number;
gender: number
}
|
但如果屬性多了的話，又要寫很多額外的代碼，這時候 Required 就派上用場了
1
2
3
4
5
6
7
8
9
| type IUser2 = Required<IUser1>
// 等同於
interface IUser2 {
name: string;
age: number;
gender: number
}
|
原理
1
2
3
| type Required<T> = {
[P in keyof T]-?: T[P]
};
|
Pick
作用
Pick 從某個類型中挑出一些屬性出來
例子
假如我現在有個 interface
1
2
3
4
5
| interface IUser1 {
name: string;
age: number;
gender: number;
}
|
有一天我想要寫一個新 interface，它只擁有 age、gender 這兩個屬性，那我會重新寫一個 interface
1
2
3
4
| interface IUser2 {
age: number;
gender: number;
}
|
但其實使用 Pick 非常方便去做這件事
1
2
3
4
5
6
7
8
| type IUser2 = Pick<IUser1, 'age' | 'gender'>
// 等同於
interface IUser2 {
age: number;
gender: number;
}
|
原理
1
2
3
| type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};
|
Omit
作用
Omit<T, K extends keyof any> 的作用是使用 T 類型中除了 K 類型的所有屬性，來構造一個新的類型。
例子
假如我現在有個 interface
1
2
3
4
5
| interface IUser1 {
name: string;
age: number;
gender: number;
}
|
有一天我想要寫一個新 interface，它只擁有 age、gender 這兩個屬性，那我會重新寫一個 interface
1
2
3
4
| interface IUser2 {
age: number;
gender: number;
}
|
但其實使用 Omit 非常方便去做這件事
1
2
3
4
5
6
7
8
| type IUser2 = Omit<IUser1, 'name'>
// 等同於
interface IUser2 {
age: number;
gender: number;
}
|
原理
1
| type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
|
NonNullable
作用
NonNullable 的作用是用來過濾類型中的 null 及 undefined 類型。
例子
1
2
3
4
5
| // string | number
type T0 = NonNullable<string | number | undefined>;
// string[]
type T1 = NonNullable<string[] | null | undefined>;
|
原理
1
| type NonNullable<T> = T extends null | undefined ? never : T;
|
ReturnType
作用
ReturnType 的作用是用來得到一個函數的返回值類型。
例子
假如我想定義一個變量來接受一個函數的返回值，但是不知道怎麼定義這個變量的類型，這個時候可以用 ReturnType
1
2
3
4
5
6
| type Func = (value: number) => string;
let str: ReturnType<Func>;
const fun: Func = (value: number) => String(value)
str = fun(1)
|
原理
1
2
| type ReturnType<T extends (...args: any[]) => any> =
T extends (...args: any[]) => infer R ? R : any;
|
Exclude
作用
Exclude<T, U> 的作用是將某個類型中屬於另一個的類型移除掉。
例子
1
2
3
4
5
| type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number
|
原理
1
| type Exclude<T, U> = T extends U ? never : T;
|
Record
作用
Record<K extends keyof any, T> 的作用是將 K 中所有的屬性的值轉化爲 T 類型。
例子
1
2
3
4
5
6
7
8
9
10
11
| interface PageInfo {
title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
about: { title: "about" },
contact: { title: "contact" },
home: { title: "home" },
};
|
原理
1
2
3
| type Record<K extends keyof any, T> = {
[P in K]: T;
};
|
Readonly
作用
Readonly 的作用是將某個類型所有屬性變爲只讀屬性，也就意味着這些屬性不能被重新賦值。
例子
1
2
3
4
5
6
7
8
9
10
| interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: "Delete inactive users"
};
todo.title = "Hello";
// Error: cannot reassign a readonly property
|
原理
1
2
3
| type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
|
