Typescript 必須的所有技巧
大家好，我是林三心，用最通俗易懂的話講最難的知識點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~
一、常用工具類型分類
1. 基礎(chǔ)修飾類
Partial<T>將類型 T 的所有屬性變?yōu)榭蛇x。
interface User {
id: number;
name: string;
age: number;
}
type PartialUser = Partial<User>;
// 等價于 { id?: number; name?: string; age?: number }適用場景：如更新用戶信息時，允許部分字段可選。
Required<T>將類型 T 的所有屬性變?yōu)楸靥睢?/span>
interface Config {
url?: string;
cache?: boolean;
}
type StrictConfig = Required<Config>;
// { url: string; cache: boolean }適用場景：要求配置對象必須提供所有屬性。
Readonly<T>將類型 T 的所有屬性設(shè)為只讀。
interface Point {
x: number;
y: number;
}
type ReadonlyPoint = Readonly<Point>;
// { readonly x: number; readonly y: number }適用場景：如 React 組件的 props 應(yīng)不可變。
2. 結(jié)構(gòu)挑選類
Pick<T, K>從 T 中選取指定屬性 K。
interface User {
id: number;
name: string;
age: number;
}
type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string }適用場景：列表頁僅展示部分字段。
Omit<T, K>從 T 中移除指定屬性 K。
interface User {
id: number;
name: string;
password: string;
}
type SafeUser = Omit<User, 'password'>;
// { id: number; name: string }適用場景：返回用戶信息時隱藏敏感字段。
Record<K, T>構(gòu)建一個鍵類型為 K、值類型為 T 的對象。
type Role = 'admin' | 'user';
type RoleMap = Record<Role, number>;
// { admin: number; user: number }適用場景：構(gòu)建枚舉到權(quán)限的映射結(jié)構(gòu)。
3. 類型過濾類
Exclude<T, U>從 T 中排除 U 中的類型。
type T = Exclude<'a' | 'b' | 'c', 'a'>;
// 'b' | 'c'適用場景：過濾聯(lián)合類型中的某些項(xiàng)。
Extract<T, U>提取 T 和 U 中共有的類型。
type T = Extract<'a' | 'b' | 'c', 'a' | 'f'>;
// 'a'適用場景：提取允許使用的類型子集。
NonNullable<T>排除 T 中的 null 和 undefined。
type T = NonNullable<string | null | undefined>;
// string適用場景：嚴(yán)格模式下確保類型不為空。
4. 函數(shù)相關(guān)類
ReturnType<T>提取函數(shù) T 的返回值類型。
function fetchUser() {
return { id: 1, name: 'Alice' };
}
type User = ReturnType<typeof fetchUser>;
// { id: number; name: string }適用場景：提取接口返回值類型，避免重復(fù)聲明。
Parameters<T>提取函數(shù) T 的參數(shù)類型元組。
function greet(name: string, age: number) {}
type Params = Parameters<typeof greet>;
// [string, number]適用場景：復(fù)用已有函數(shù)的參數(shù)類型。
ConstructorParameters<T>提取構(gòu)造函數(shù) T 的參數(shù)類型。
class Person {
constructor(name: string, age: number) {}
}
type Params = ConstructorParameters<typeof Person>;
// [string, number]適用場景：工廠函數(shù)中自動推斷構(gòu)造參數(shù)。
InstanceType<T>提取構(gòu)造函數(shù) T 的實(shí)例類型。
class Person {
name: string;
constructor(name: string) { this.name = name; }
}
type P = InstanceType<typeof Person>;
// Person適用場景：基于類類型生成其實(shí)例類型。
ThisParameterType<T>提取函數(shù) T 的 this 類型。
function say(this: { name: string }) { return this.name; }
type T = ThisParameterType<typeof say>;
// { name: string }適用場景：約束函數(shù)中的上下文類型。
OmitThisParameter<T>移除函數(shù) T 的 this 參數(shù)類型。
function say(this: { name: string }) { return this.name; }
type Fn = OmitThisParameter<typeof say>;
// () => string適用場景：將綁定 this 的函數(shù)轉(zhuǎn)為無 this 的普通函數(shù)。
二、實(shí)際應(yīng)用示例
1. 提取 API 返回值并隱藏敏感字段
async function getUser() {
return { id: 1, name: 'Tom', token: 'secret' };
}
type User = Omit<ReturnType<typeof getUser>, 'token'>;
// { id: number; name: string }2. 表單局部更新
interface UserForm {
name: string;
age: number;
email: string;
}
function updateUser(id: number, data: Partial<UserForm>) {}3. 構(gòu)建路由映射配置
type Routes = 'home' | 'about' | 'login';
type RouteConfig = Record<Routes, string>;
// { home: string; about: string; login: string }4. 強(qiáng)制 React 組件 Props 必傳
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
type RequiredButton = Required<ButtonProps>;
// 所有屬性變?yōu)楸靥?/code>
