TypeScript 的實用方法！大家一定要學會啊~ 一定！！！
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。
TypeScript 自帶的方法
很多人在平時的開發中使用到了TypeScript，但是可能只是單純使用了一些基本的類型
但很多人不知道其實TypeScript自帶了很多非常方便的方法
接下來我就結合例子，給大家介紹一下這些很方便的方法
Partial
作用
Partial 將類型的屬性變成可選
例子
假如我現在有個interface
interface IUser1 {
name: string;
age: number;
gender: number;
}有一天，我想把IUser身上的屬性都變成可選的，那我可能會再寫一個interface
interface IUser2 {
name?: string;
age?: number;
gender?: number;
}但是如果屬性多了的話，我們又得寫很多額外的代碼，這個時候就可以直接用 Partial
type IUser2 = Partial<IUser1>
等同於
interface IUser2 {
name?: string;
age?: number;
gender?: number;
}原理
type Partial<T> = {
[P in keyof T]?: T[P];
};Required
作用
Required 將類型的屬性變成必選
例子
假如我現在有個interface
interface IUser1 {
name: string;
age?: number;
gender?: number
}可以看到有一些屬性是可選的，但是突然有一天，我想讓所有屬性變成必選我會再寫一個interface
interface IUser2 {
name: string;
age: number;
gender: number
}但如果屬性多了的話，又要寫很多額外的代碼，這時候 Required 就派上用場了~
type IUser2 = Required<IUser1>
等同於
interface IUser2 {
name: string;
age: number;
gender: number
}原理
type Required<T> = {
[P in keyof T]-?: T[P]
};Pick
作用
Pick 從某個類型中挑出一些屬性出來
例子
假如我有一個interface
interface IUser1 {
name: string;
age: number;
gender: number;
}有一天我想要寫一個新interface，它只擁有age、gender這兩個屬性，那我會重新寫一個interface
interface IUser2 {
age: number;
gender: number;
}但其實使用 Pick 非常方便去做這件事
type IUser2 = Pick<IUser1, 'age' | 'gender'>
等同於
interface IUser2 {
age: number;
gender: number;
}原理
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
};Omit
作用
Omit<T, K extends keyof any> 的作用是使用 T 類型中除了 K 類型的所有屬性，來構造一個新的類型。
例子
假如我有一個interface
interface IUser1 {
name: string;
age: number;
gender: number;
}有一天我想要寫一個新interface，它只擁有age、gender這兩個屬性，那我會重新寫一個interface
interface IUser2 {
age: number;
gender: number;
}但其實使用 Omit 非常方便去做這件事
type IUser2 = Omit<IUser1, 'name'>
等同於
interface IUser2 {
age: number;
gender: number;
}原理
type Omit<T, K extends keyof any> =
Pick<T, Exclude<keyof T, K>>;NonNullable
作用
NonNullable 的作用是用來過濾類型中的null及undefined類型。
例子
// string | number
type T0 = NonNullable<string | number | undefined>;
// string[]
type T1 = NonNullable<string[] | null | undefined>;原理
type NonNullable<T> = T extends
null | undefined
? never : T;ReturnType
作用
用來得到一個函數的返回值類型
例子
假如我想定義一個變量來接受一個函數的返回值，但是不知道怎麼定義這個變量的類型，這個時候可以用 ReturnType
type Func = (value: number) => string;
let str: ReturnType<Func>;
const fun: Func = (value: number) => String(value)
str = fun(1)原理
type ReturnType<T extends (...args: any[]) => any> = T extends (
...args: any[]
) => infer R
? R
: any;Exclude
作用
Exclude<T, U> 的作用是將某個類型中屬於另一個的類型移除掉。
例子
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原理
type Exclude<T, U> = T extends U ? never : T;Record
作用
Record<K extends keyof any, T> 的作用是將 K 中所有的屬性的值轉化爲 T 類型。
例子
interface PageInfo {
title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
about: { title: "about" },
contact: { title: "contact" },
home: { title: "home" },
};原理
type Record<K extends keyof any, T> = {
[P in K]: T;
};Readonly
作用
Readonly 的作用是將某個類型所有屬性變爲只讀屬性，也就意味着這些屬性不能被重新賦值。
例子
interface Todo {
title: string;
}
const todo: Readonly<Todo> = {
title: "Delete inactive users"
};
todo.title = "Hello";
// Error: cannot reassign a readonly property原理
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/2dyFsly2lb8Tk5ZAI74qAg