TypeScript內置工具類型快速入門運用
更新時間：2023年03月09日 10:33:58 作者：劍九 六千里
TypeScript 中內置了很多工具類型，我們無需導入，可以直接使用。 其中的很多都是比較常用的，接下來我們根據使用范圍來一一介紹，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
前言
TS為了方便開發(fā)者使用，在內部提供了非常多的工具類型，如Partial、Required、ReadOnly等等，本篇文章主要用于記錄了一些常用的內置工具類型的使用及源碼實現，以便參考。
提示：以下是本篇文章正文內容，下面案例可供參考
一、什么是ts內置工具類型
TypeScript 附帶了大量類型，可以幫助進行一些常見的類型操作，通常稱為 Utility Types。
二、使用示例
1.Partial
將必填參數變?yōu)榭蛇x參數
namespace a {
// 示例一：
interface A {
name: string,
age: number,
sex: string
}
// 接口A中的參數通過內置工具類型Partial變成了可選參數
type PartialA = Partial<A>;
let a: PartialA = {
// 此處傳參可以任意個數，但只能傳已定義的參數
name: '張三',
age: 10
}
// 示例二：
interface Company {
id: number,
name: string
}
interface Person {
id: number,
name: string,
company: Company
}
// 實現DeepPartial，將參數深度轉換成可選參數
type DeepPartial<T> = {
[U in keyof T]?: T[U] extends object ? DeepPartial<T[U]> : T[U];
}
type PartialPerson = DeepPartial<Person>;
let p: PartialPerson = {
// 此處的參數已經變?yōu)榭蛇x參數，可根據自己需要傳遞
id: 10,
name: '張三',
company: {
name: '美團'
}
}
}
Partial的實現源碼
namespace b {
interface A {
name: string,
age: number,
sex: string
}
type Partial<T> = {
// 原理：
// 1.通過keyof拿到T中的所有key
// 2.迭代所有的key
// 3.統(tǒng)一加上可選參數處理
// 4.返回迭代值的類型
[P in keyof T]?: T[P];
}
// 測試：
type PartialA = Partial<A>;
let a: PartialA = {
name: '張三',
age: 10
}
}
2.Required
將所有參數變?yōu)楸靥?/p>
namespace b {
interface Person {
name: string,
age?: number
}
// Required將可選參數變?yōu)楸靥?
type RequiredPerson = Required<Person>;
let person: RequiredPerson = {
name: '張三',
age: 10
}
}
Required 的實現源碼
namespace c {
interface Person {
name: string,
age?: number
}
type Required<T> = {
// 原理：
// 1.通過keyof拿到T中所有的key
// 2.迭代所有的key
// 3.將可選的參數變?yōu)楸靥畹膮?
// 4.返回迭代屬性及類型
// +?或者?: 代表的是可選，-?: 代表的是不可選
[P in keyof T]-?: T[P];
};
// 測試
type RequiredPerson = Required<Person>;
let person: RequiredPerson = {
name: '李四',
age: 18
}
}
3.ReadOnly
將所有參數變?yōu)橹蛔x
namespace d {
interface Person {
name: string,
age?: number
}
type ReadonlyPerson = Readonly<Person>;
let person: ReadonlyPerson = {
name: '張三',
age: 10
}
// 已經變?yōu)橹蛔x屬性，因此此處賦值會報錯
// person.name = '李四'; // 無法分配到 "name" ，因為它是只讀屬性。ts(2540)
// person.age = 20; // 無法分配到 "age" ，因為它是只讀屬性。ts(2540)
}
Readonly 的實現源碼
namespace e {
interface Person {
name: string,
age?: number
}
type Readonly<T> = {
// 原理：
// 1.通過keyof拿到T中所有key
// 2.迭代拿到的所有key
// 3.通過readonly關鍵字將所有屬性變?yōu)橹蛔x屬性
// 4.返回迭代屬性及類型
readonly [P in keyof T]: T[P]
}
// 測試
type ReadonlyPerson = Readonly<Person>;
let person: ReadonlyPerson = {
name: '張三',
age: 10
}
// person.name = '李四'; // 無法分配到 "name" ，因為它是只讀屬性。ts(2540)
// person.age = 20; // 無法分配到 "age" ，因為它是只讀屬性。ts(2540)
}
4.Pick
撿取符合條件的屬性
namespace g {
interface Person {
name: string,
age: number,
sex: string
}
// 參數一是一個對象，參數二是要篩選的屬性
type PickPerson = Pick<Person, 'name' | 'sex'>;
let person: PickPerson = {
name: '張三',
// 由于通過Pick只撿取了name和sex屬性，因此此時給sex賦值會報錯
// 不能將類型“{ name: string; age: number; sex: string; }”分配給類型“PickPerson”。
// 對象文字可以只指定已知屬性，并且“age”不在類型“PickPerson”中。ts(2322)
// age: 10,
sex: '男'
}
}
Pick 的實現源碼
namespace h {
interface Person {
name: string,
age: number,
sex: string
}
// 原理：
// 1.T表示傳入的類型定義。此處指Person接口。
// 2.K表示T的子類型，是一個聯合類型。此處指'name' | 'age' | 'sex'的子類型
// 3.通過keyof拿到T中的所有key
// 3.迭代K，拿到所有傳遞進來的子類型
// 4.返回迭代屬性及類型
// 簡單理解：就是從一個對象中，提取一部分屬性組成新的對象
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
}
// 測試
type PickPerson = Pick<Person, 'name' | 'age'>
let person: PickPerson = {
name: '張三',
age: 10
}
}
5.Record
記錄類型：將一個類型的所有屬性值都映射到另一個屬性上并創(chuàng)建新的類型
namespace i {
// 1.此處的K主要用來修飾obj對象的key，為string或者number
// 2.此處的T用來修飾老的類型
// 3.此處的U用來修飾新的類型
function mapObj<K extends string | number, T, U>(obj: Record<K, T>, callable: (x: T) => U) {
// 聲明一個變量
let result: Record<K, U> = <Record<K, U>>{};
// 遍歷傳入的對象
for (const key in obj) {
// 通過callback函數處理result的屬性值
result[key] = callable(obj[key]);
}
// 返回result
return result;
}
let obj = { num1: 1, num2: 2 };
let callable = (x: number): string => x * 2 + '';
let newObj = mapObj<string | number, number, string>(obj, callable);
console.log(newObj); // { num1: '2', num2: '4' }
}
Record 的實現源碼
namespace j {
type Record<K extends keyof any, T> = {
// 原理：
// 1.通過keyof拿到所有的K，是一個聯合類型。string | number | symbol
// 2.迭代K，拿到所有的屬性
// 3.返回迭代的屬性及類型
// 注意：此處不能寫成 type Record<K, T> = {}; any代表所有key的聯合類型。
// 否則會報錯：不能將類型“K”分配給類型“string | number | symbol”。ts(2322)
[P in K]: T;
};
// 測試
function mapObj<K extends string | number, T, U>(obj: Record<K, T>, callable: (x: T) => U) {
// 聲明一個變量
let result: Record<K, U> = <Record<K, U>>{};
// 遍歷傳入的對象
for (const key in obj) {
// 通過callback函數處理result的屬性值
result[key] = callable(obj[key]);
}
// 返回result
return result;
}
let obj = { num1: 1, num2: 2 };
let callable = (x: number): string => x * 2 + '';
let newObj = mapObj<string | number, number, string>(obj, callable);
console.log(newObj); // { num1: '2', num2: '4' }
}
總結
本篇文章只記錄了這幾種內置工具類型，更多內置類型可前往https://www.typescriptlang.org/docs/handbook/utility-types.html查看。下次再見
到此這篇關于TypeScript內置工具類型快速入門運用的文章就介紹到這了,更多相關TypeScript內置工具內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Apollo 是一個廣泛使用的 JavaScript 第三方庫,主要用于構建與 GraphQL API 交互的應用程序,下面就跟隨小編一起來學習一下它的具體應用吧2024-02-02
這篇文章介紹了js單例模式的兩種方案，有需要的朋友可以參考一下2013-10-10
這里延遲加載的意思是，拖動滾動條時，在圖片出現在瀏覽器顯示區(qū)域后才加載顯示。2013-07-07
我看到過很多人不愿意去正視ajax所存在的技術瓶頸，其實AJAX更應該是Ajax而不是AJAX，突出第一個A是想強調其實AJAX發(fā)揚的是一種異步傳輸的方法，而不是具體到底使用了哪種技術2013-11-11
這篇文章主要介紹了原生JS實現匯率轉換功能代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
主要的數據和功能實現都是在js文件中,網上找的地區(qū)數據有的地方不完整,需要自己添加,本文將詳細介紹2012-11-11
Map構造函數創(chuàng)建一個新Map對象,它允許以鍵值對的形式存儲數據,提供了一種更加靈活的數據結構,本文給大家介紹JavaScript中Map與reduce的應用小結,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了js使用split函數按照多個字符對字符串進行分割的方法,實例分析了split函數的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄昝澜鉀Qjs傳遞參數中加號和&號自動改變的方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
使用利用事件冒泡委托給列表的父節(jié)點去處理的方式第二種方式就是使用閉包了，感興趣的你可以參考下本文，或許對你學習js有所幫助2013-03-03