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