在學習和使用 ts 的時候,有一個語法會大量的出現,他就是 extends。但是這個語法放到 ts 里,就顯得非常怪異,因為好多時候跟我們常規的理解看上去好像不太一樣,不就是一個繼承嗎,咋到處都在亂用啊?
實際上,之所以怪,是因為在 ts 中,extends 不只是要表達繼承的意思,他還有一些延展含義。
在 JS 核心進階中,我們在學習設計模式的時候,曾經提高過一個原則:里氏替換原則,該原則針對的是父類與子類之間的替換關系:任何使用父類實例的地方,都能夠使用子類實例完美替換。
class Person { constructor(name) { this.name = name } run(t) { console.log(`${this.name} 跑了 ${t} 公里`); }}class Student extends Person { constructor(name, grade) { super(name) this.grade = grade }}const p1 = new Person('Tom')p1.run(20)const s1 = new Student('Tom')s1.run(20)
這個案例中,我們能夠使用 s1 去替換 p1。而不會出現什么問題。
在 ts 的類型兼容性里,也符合這個原則。基于這個邏輯,我們就可以把 extends 作為一個判斷條件,來驗證你是否合理運用了里氏替換原則,從而衍生出它新的用法。
繼承的運用非常的常規。在面向對象的運用中,我們可以繼承一個父類。
class Parent {}class Children extends Parent {}
我們也可以在 interface 的類型聲明中,使用繼承。
interface Animal { kind: string}interface Dog extends Animal { bark(): void}
它等價于。
interface Dog { kind: string bark(): void}
我們先簡單來看一下這個東西是如何在泛型中使用的,然后再來結合里氏替換原則來分析它的邏輯。
interface Dispatch<T extends { type: string }> { (action: T): T}
我們在定義 Dispatch 時需要傳入一個泛型,傳入的泛型類型必須與 {type: string} 符合里氏替換原則。意思就是說,要傳入該類型的子類型。
因此,我們可以傳入。
var action = { type: 'get/list', playload: 10}
也可以傳入。
var action = { type: 'merge'}
var action = { type: 'add', value: { a: 1, b: 2 }}
從結論上來看,父類型的約束力度更小,子類型的約束力度更大。
我們可以可以繼續衍生,當子類型與父類型符合正常的繼承關系時,判斷結果為 true,否則為 false。
這里的繼承關系,表達的是一種替換關系,或者說是約束力度的縮小。
type C = A extends B ? string : number
這里表達的含義是,當 A 能夠替換 B 時,判斷結果為 true,否則,判斷結果為 false。
interface Person { name: string}interface Yung extends Person { gender: string}interface Student extends Yung { age: string}
也就是說,當 A 作為 B 的子類型時,判斷結果為 true。
// 此時判斷結果為truetype C = Yung extends Person ? number : string // number
// 此時判斷結果為falsetype C = Yung extends Student ? number : string // string
也可以結合泛型使用。
type P<T> = T extends string ? string : numbertype Z = P<string> // string
當我們在使用泛型的時候,會出現一些問題,看一下這個例子。
type A = number | string extends string ? string : number // number
因為 string 的約束力度,比 number | string 更大,因此這里的條件判斷為 false,但是當我們通過泛型來做到同樣的事情時,情況就發生了變化。
type P<T> = T extends string ? string : numbertype A = P<number | string> // string | number
當我們用泛型傳遞時候,跟預想中的不太一樣,這里會把泛型傳入的 number 和 string 拆分之后在去運行 extends 判斷。因此最后的結果是 string | number。
聯合類型在泛型中的表現是分配之后再傳入。
在實踐中一定要警惕這個小小的差異。我們可以使用如下的方式避免這種先分配再傳入的規則。
type P<T> = [T] extends [string] ? string : numbertype A = P<number | string> // number
never 表示所有類型的子類型,因此也被看成是一個聯合類型,當我們在泛型中傳入 never 時也會同理出現同樣的問題。
type P<T> = T extends string ? string : number// 沒有類型可分配,直接返回 nevertype A = P<never> // never
注意他們的不同。
type P<T> = [T] extends [string] ? string : numbertype A = P<never> // string
現有一個對象 A 有很多個屬性,我希望重新定義一個新的對象 B,該對象的屬性是從 A 里挑選出來的,那么 B 的類型應該怎么定義呢。
interface A { name: string; age: number; gender: number; class: string}
當然,我們可以用常規的方式來定義,不過有的時候這樣會比較麻煩。
interface B { name: string, age: number}
我們也可以利用泛型和 extends,定義一個 Pick 類型。
type Pick<T, K extends keyof T> = { [P in K]: T[P]}type B = Pick<A, 'name' | 'age'>
當我們在 Pick 中傳入 A 時, keyof A 的結果為 name | age | gender | class,因此 'name' | 'age' 是 keyof A 的子類型。
此時的 B 得到與上面寫法一樣的結果。
現在我有一個聯合類型。
type a = 'name' | 'age' | 'gender' | 'class'
我希望排除其中一個 name,得到一個新的聯合類型。
type b = 'age' | 'gender' | 'class'
此時我們可以定一個排除的泛型類型來做到這個事情。
type b = Exclude<a, 'name'>
這個 Exclude 是如何實現的呢?非常的簡單。
type Exclude<T, U> = T extends U ? never : Ttype b = Exclude<a, 'name'>
我們來分析一下,首先剛才我們已經知道,當傳入的泛型為聯合類型時,會先分配再傳入。
因此,此時傳入的聯合類型 a 會被拆分傳入。
也就是說,T exnteds U 的比較會變成。
// never'name' extends 'name' ? never : 'name'// age'age' extends 'name' ? never : 'age'// gender'gender' extends 'name' ? never : 'gender'// class'class' extends 'name' ? never : 'class'
所以通過這種方式,我們可以做到從聯合類型中排除指定的類型。
Omit 是 Pick 的取反,表示挑選剩余的屬性組成新的對象。理解了 Pick 和 Exclude,這個理解起來非常容易。
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
使用:
interface A { name: string, age: number, gender: number, class: string}type B = Omit<A, 'name'>
等價于:
interface A { age: number, gender: number, class: string}
大家可以自己分析一下 Omit 的實現原理,應該是沒有任何難度的。
最后來個騷的,大家分析一下這玩意兒有什么用
type TypeString<T> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends undefined ? "undefined" : T extends Function ? "function" : "object";
本文鏈接:http://www.www897cc.com/showinfo-26-87003-0.htmlTypeScript 中的 Extends 怎么那么優秀啊?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com