摘要：最近使用寫了一個(gè)項(xiàng)目過程中不斷感受到的魅力現(xiàn)在來分享幾個(gè)業(yè)務(wù)中關(guān)于泛型的場景深度內(nèi)置了一個(gè)類型用于把一個(gè)類型的成員屬性設(shè)置為成可選模式例如類型中有兩個(gè)成員屬性如果我們要把這個(gè)類型賦予變量那必須擁有和兩個(gè)屬性現(xiàn)在我們要讓的兩個(gè)屬性都變?yōu)榭蛇x可
最近使用TypeScript寫了一個(gè)項(xiàng)目,過程中不斷感受到TypeScript的魅力,現(xiàn)在來分享幾個(gè)業(yè)務(wù)中關(guān)于泛型的場景
1. 深度Partial
TS內(nèi)置了一個(gè)Partial類型,用于把一個(gè)類型的成員屬性設(shè)置為成可選模式,例如
type Person = {
name: string;
age: number;
}
Person類型中有兩個(gè)成員屬性,如果我們要把這個(gè)類型賦予變量tom,那tom必須擁有name和age兩個(gè)屬性
let tom:Person = {
name: "tom",
age: 20
};
現(xiàn)在我們要讓Person的兩個(gè)屬性都變?yōu)榭蛇x,可以使用Partial類型進(jìn)行轉(zhuǎn)換
type PartialPerson = Partial;
let partialPerson: PartialPerson = {
name: "tom"
};
這時(shí)PartialPerson的name和age屬性都已經(jīng)變?yōu)榭蛇x的了,但是如果我們在Person中再加一點(diǎn)東西
type Person = {
name: string;
age: number;
contact: {
email: string;
phone: number;
wechat: string;
}
}
現(xiàn)在我們加入了一個(gè)contact屬性值是一個(gè)對象,如果我們想把contact里面的屬性也變?yōu)榭蛇xPartial就不靈了
可以看到Partial是把contact變成了可選而不是里面的屬性,插個(gè)題外話通常的做法是為contact另外創(chuàng)建一個(gè)類型,如果是這樣的話Partial就可以用了,但是我們不使用這種方法,我們先來看看TS是怎么定義Partial的
/**
* Make all properties in T optional
*/
type Partial = {
[P in keyof T]?: T[P];
};
很容易理解關(guān)鍵點(diǎn)是在?:上,現(xiàn)在我們改造一下
type DeepPartial = {
[P in keyof T]?: T[P] extends Object ? DeepPartial : T[P];
}
可以看到改造的DeepPartial跟Partial差別在把直接賦值T[P]換成了T[P] extends Object ? DeepPartial : T[P], 即判斷T的屬性P的類型是否是Object然后進(jìn)行再次DeepPartial或者返回T[P]的類型
這時(shí)編譯器就不會再提示錯(cuò)誤了
2. 更智能的array_column函數(shù)
在PHP中有一個(gè)array_column函數(shù),用于在數(shù)組中提取一列的內(nèi)容,用JavaScript表現(xiàn)就是
function array_column(arr, key) {
return arr.map(item => item[key])
}
假如現(xiàn)在有一個(gè)persons數(shù)組
type Person = {
name: string;
age: number;
}
let persons: Person[] = [];
我們需要提取數(shù)組中的name屬性,可以很方便的使用Array.map方法提取,但是如果又有別的數(shù)組需要提取,我們可以實(shí)現(xiàn)一個(gè)更優(yōu)雅的array_column函數(shù)
function array_column(input: T[], key: K) {
return input.map(item => item[key])
}
現(xiàn)在我們使用這個(gè)函數(shù)提取persons數(shù)組
可以看到當(dāng)我們輸入persons時(shí),編輯器已經(jīng)推斷出了key的類型,再來一個(gè)animals數(shù)組
3. Proxy
在剛開始學(xué)習(xí)TS的時(shí)候看官方文檔有一個(gè)Proxy的例子,只給出了類型聲明但卻沒有給出實(shí)現(xiàn),當(dāng)時(shí)花了不少時(shí)間琢磨,現(xiàn)在來實(shí)現(xiàn)它
class Proxy{
constructor(private data: T) { }
get(key: K) {
return this.data[key]
}
set(key: K, value: V) {
this.data[key] = value;
}
}
可以看到Proxy類提供了getter方法get和setter方法set,現(xiàn)在我們基于上面的Person類型創(chuàng)建一個(gè)Proxy實(shí)例
let person: Person = {
name: "tom",
age: 18
};
let proxy = new Proxy(person);
現(xiàn)在我們來看看調(diào)用get方法
可以看到編輯器也推斷出了參數(shù)key的類型,再來看看set方法
和get方法一樣,編輯器也推斷出了參數(shù)key的類型,同時(shí)也推斷出了參數(shù)value的類型為string
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105657.html
