日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

Extract 工具類型八個使用技巧

來源: 責編: 時間:2024-03-22 08:56:29 209觀看
導讀Extract 是 TypeScript 中內置的工具類型,它用于從聯合類型中提取出符合某個條件的類型,生成一個新的類型。這個工具類型在日常開發中非常有用,它能夠幫助我們編寫類型安全的代碼和更好地實現代碼復用。/** * Extract fr

Clp28資訊網——每日最新資訊28at.com

Extract 是 TypeScript 中內置的工具類型,它用于從聯合類型中提取出符合某個條件的類型,生成一個新的類型。這個工具類型在日常開發中非常有用,它能夠幫助我們編寫類型安全的代碼和更好地實現代碼復用。Clp28資訊網——每日最新資訊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 個使用技巧,掌握這些技巧之后,在工作中你就能更好地利用 ExtractClp28資訊網——每日最新資訊28at.com

1.提取指定的基本數據類型

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.提取可調用的函數類型

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.提取兩個聯合類型的共有成員

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

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

Animal 聯合類型,包含了多種動物的描述對象,我們想從中提取出含有 "legs" 屬性的子類型。
Clp28資訊網——每日最新資訊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.在類型守衛中使用 Extract

使用 Extract 可以在類型守衛中精確地過濾類型,使得在條件分支中可以安全地使用過濾后的類型。Clp28資訊網——每日最新資訊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.在函數重載中使用 Extract

在處理 API 請求的場景中,我們需要根據不同的請求類型(如 GET、POST、DELETE)處理不同類型的數據。為了增強類型安全和確保每種請求類型都正確地處理其數據,我們可以利用 TypeScript 的函數重載和 Extract 工具類型。Clp28資訊網——每日最新資訊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.www897cc.com/showinfo-26-78509-0.htmlExtract 工具類型八個使用技巧

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: Excel數據處理利器:C#中三款熱門開源類庫推薦及實例代碼解析

下一篇: 五分鐘上手Python爬蟲:從干飯開始,輕松掌握技巧

標簽:
  • 熱門焦點
  • MIX Fold3包裝盒泄露 新機本月登場

    小米的全新折疊屏旗艦MIX Fold3將于本月發布,近日該機的真機包裝盒在網上泄露。從圖上來看,新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案,變化不大,這也是目前小米旗艦
  • 一加Ace2 Pro真機揭曉 鈦空灰配色質感拉滿

    終于,在經過了幾波預熱之后,一加Ace2 Pro的外觀真機圖在網上出現了。還是博主數碼閑聊站曝光的,這次的外觀設計還是延續了一加11的方案,只是細節上有了調整,例如新加入了鈦空灰
  • 一加首款折疊屏!一加Open渲染圖出爐:罕見單手可握小尺寸

    8月5日消息,此前就有爆料稱,一加首款折疊屏手機將會在第三季度上市,如今隨著時間臨近,新機的各種消息也開始浮出水面。據悉,這款新機將會被命名為&ldquo;On
  • 微信語音大揭秘:為什么禁止轉發?

    大家好,我是你們的小米。今天,我要和大家聊一個有趣的話題:為什么微信語音不可以轉發?這是一個我們經常在日常使用中遇到的問題,也是一個讓很多人好奇的問題。讓我們一起來揭開這
  • 使用AIGC工具提升安全工作效率

    在日常工作中,安全人員可能會涉及各種各樣的安全任務,包括但不限于:開發某些安全工具的插件,滿足自己特定的安全需求;自定義github搜索工具,快速查找所需的安全資料、漏洞poc、exp
  • 慕巖炮轟抖音,百合網今何在?

    來源:價值研究所 作者:Hernanderz&ldquo;難道就因為自己的一個產品牛逼了,從客服到總裁,都不愿意正視自己產品和運營上的問題,選擇逃避了嗎?&rdquo;這一番話,出自百合網聯合創
  • 騰訊蓋樓,字節拆墻

    來源 | 光子星球撰文 | 吳坤諺編輯 | 吳先之&ldquo;想重溫暴刷深淵、30+技能搭配暴搓到爽的游戲體驗嗎?一起上晶核,即刻暴打!&rdquo;曾憑借直播騰訊旗下代理格斗游戲《DNF》一
  • 華為發布HarmonyOS 4:更好玩、更流暢、更安全

    在8月4日的華為開發者大會2023(HDC.Together)大會上,HarmonyOS 4正式發布。自2019年發布以來,HarmonyOS一直以用戶為中心,經歷四年多的發展HarmonyOS已
  • 華為Mate60系列模具曝光:采用碩大圓形后置相機模組+拼接配色方案

    據此前多方爆料,今年華為將開始恢復一年雙旗艦戰略,除上半年推出的P60系列外,往年下半年的Mate系列也將迎來更新,有望在9-10月份帶來全新的華為Mate60
Top 主站蜘蛛池模板: 临潭县| 淮北市| 开江县| 陆良县| 巨鹿县| 宁津县| 西华县| 武定县| 南华县| 台州市| 正镶白旗| 抚顺县| 江达县| 万州区| 大兴区| 孝感市| 法库县| 西峡县| 昌黎县| 静安区| 五指山市| 疏附县| 大同市| 黄山市| 昌黎县| 罗甸县| 彭阳县| 玛多县| 平陆县| 若羌县| 岳普湖县| 花莲市| 海口市| 咸丰县| 和平区| 新泰市| 满城县| 昌邑市| 嘉义县| 抚州市| 罗城|