eL428資訊網(wǎng)——每日最新資訊28at.com

Extract 是 TypeScript 中內(nèi)置的工具類型，它用于從聯(lián)合類型中提取出符合某個(gè)條件的類型，生成一個(gè)新的類型。這個(gè)工具類型在日常開(kāi)發(fā)中非常有用，它能夠幫助我們編寫類型安全的代碼和更好地實(shí)現(xiàn)代碼復(fù)用。eL428資訊網(wǎng)——每日最新資訊28at.com

/** * Extract from T those types that are assignable to U. * typescript/lib/lib.es5.d.ts */type Extract<T, U> = T extends U ? T : never;type T0 = Extract<"a" | "b" | "c", "a" | "f">// type T0 = "a"

本文我將介紹 Extract 工具類型的 8 個(gè)使用技巧，掌握這些技巧之后，在工作中你就能更好地利用 ExtracteL428資訊網(wǎng)——每日最新資訊28at.com

1.提取指定的基本數(shù)據(jù)類型

type MyTypes = string | number | boolean;type StringOrNumber = Extract<MyTypes, string | number>;let uid: StringOrNumber = "semlinker" // Okuid = 2024 // Okuid = false // Error// Type 'boolean' is not assignable to type 'StringOrNumber'.

2.提取指定的字符串字面量類型

type Color = 'red' | 'green' | 'blue' | 'yellow';type PrimaryColors = Extract<Color, 'red' | 'green' | 'blue'>;const primaryColor: PrimaryColors = 'blue'; // Okconst secondaryColor: PrimaryColors = 'yellow'; // Error// Type '"yellow"' is not assignable to type 'PrimaryColors'.

3.提取可調(diào)用的函數(shù)類型

type Value = string | number | (() => void);type CallableFn = Extract<Value, Function>;const fn1: CallableFn = () => console.log('semlinker'); // Okconst fn2: CallableFn = 'semlinker'; // Error// Type 'string' is not assignable to type '() => void'.

4.提取兩個(gè)聯(lián)合類型的共有成員

type TaskStatus = "Todo" | "InProgress" | "Done" | "Archived";type ModuleHandledStatus = "Todo" | "Done" | "OnHold";type ModuleSpecificStatus = Extract<TaskStatus, ModuleHandledStatus>;// type ModuleSpecificStatus = "Todo" | "Done"

5.提取含有特定屬性的子類型

Animal 聯(lián)合類型，包含了多種動(dòng)物的描述對(duì)象，我們想從中提取出含有 "legs" 屬性的子類型。
eL428資訊網(wǎng)——每日最新資訊28at.com

type Animal =    | { type: 'dog', legs: number }    | { type: 'cat', legs: number }    | { type: 'fish', fins: number };type AnimalsWithLegs = Extract<Animal, { legs: number }>;const dog: AnimalsWithLegs = { type: 'dog', legs: 4 }; // Okconst cat: AnimalsWithLegs = { type: 'cat', legs: 4 }; // Okconst fish: AnimalsWithLegs = { type: 'fish', fins: 6 }; // Error// Type '"fish"' is not assignable to type '"dog" | "cat"'.

6.提取特定的事件類型

type EventTypes = MouseEvent | KeyboardEvent | TouchEvent;type OnlyMouseEvents = Extract<EventTypes, MouseEvent>;function handleMouseEvent(event: OnlyMouseEvents) {    console.log('Handling mouse event:', event.clientX, event.clientY);}document.addEventListener('click', (event) => {    handleMouseEvent(event); // OK});document.addEventListener('keydown', (event) => {    handleMouseEvent(event); // Error    // Argument of type 'KeyboardEvent' is not assignable to parameter of type 'MouseEvent'.});

7.在類型守衛(wèi)中使用 Extract

使用 Extract 可以在類型守衛(wèi)中精確地過(guò)濾類型，使得在條件分支中可以安全地使用過(guò)濾后的類型。eL428資訊網(wǎng)——每日最新資訊28at.com

type Pet = { type: 'dog', bark: () => void } | { type: 'cat', meow: () => void };function isDog(pet: Pet): pet is Extract<Pet, { type: 'dog' }> {    return pet.type === 'dog';}const pet1: Pet = { type: 'dog', bark: () => console.log('Woof!') }const pet2: Pet = { type: "cat", meow: () => console.log("Meow!") }console.log(`pet1 is dog: ${isDog(pet1)}`) // "pet1 is dog: true" console.log(`pet2 is dog: ${isDog(pet2)}`) // "pet2 is dog: false"

8.在函數(shù)重載中使用 Extract

在處理 API 請(qǐng)求的場(chǎng)景中，我們需要根據(jù)不同的請(qǐng)求類型（如 GET、POST、DELETE）處理不同類型的數(shù)據(jù)。為了增強(qiáng)類型安全和確保每種請(qǐng)求類型都正確地處理其數(shù)據(jù)，我們可以利用 TypeScript 的函數(shù)重載和 Extract 工具類型。eL428資訊網(wǎng)——每日最新資訊28at.com

type RequestType = 'GET' | 'POST' | 'DELETE';type RequestData = {    GET: undefined;    POST: { body: string };    DELETE: { resourceId: number };};// Function overloading, based on the request type, accepts matching data typesfunction sendRequest<T extends RequestType>(type: 'GET', data: Extract<RequestData[T], undefined>): void;function sendRequest<T extends RequestType>(type: 'POST', data: Extract<RequestData[T], { body: string }>): void;function sendRequest<T extends RequestType>(type: 'DELETE', data: Extract<RequestData[T], { resourceId: number }>): void;function sendRequest<T extends RequestType>(type: T, data: RequestData[T]): void {    console.log(`Sending ${type} request with data:`, data);}sendRequest('GET', undefined); // OksendRequest('POST', { body: "semlinker" }); // OksendRequest('DELETE', { resourceId: 2024 }); // OksendRequest('POST', { body: 2024 }); // Error// Type 'number' is not assignable to type 'string'.sendRequest('DELETE', undefined); // Error// Argument of type 'undefined' is not assignable to parameter of type '{ resourceId: number; }'.

本文鏈接：http://www.tebozhan.com/showinfo-26-78509-0.htmlExtract 工具類型八個(gè)使用技巧

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： Excel數(shù)據(jù)處理利器：C#中三款熱門開(kāi)源類庫(kù)推薦及實(shí)例代碼解析

下一篇： 五分鐘上手Python爬蟲(chóng)：從干飯開(kāi)始，輕松掌握技巧