(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對你有幫助，請留下您的足跡）
? ? ? ? ??
目錄
交叉類型
泛型
創(chuàng)建泛型函數(shù)
調(diào)用泛型函數(shù)：
簡化調(diào)用泛型函數(shù)：
泛型約束?
指定更加具體的類型
添加約束?
泛型接口?
泛型類
泛型工具類型?
Partial?
Readonly?
Pick?,>
Record?,>
交叉類型
交叉類型 （ & ）：功能類似于接口繼承（extends）， 用于組合多個(gè)類型為一個(gè)類型 （ 常用于對象類型 ）。比如
解釋：使用交叉類型后，新的類型 PersonDetail 就 同時(shí)具備 了 Person 和 Contact 的所有屬性類型。相當(dāng)于，
交叉類型（&）和接口繼承（extends）的對比：???????? 相同點(diǎn)：都可以實(shí)現(xiàn)對象類型的組合。???????? 不同點(diǎn)：兩種方式實(shí)現(xiàn)類型組合時(shí)，對于同名屬性之間， 處理類型沖突的方式不同 。
說明：以上代碼，接口繼承會(huì)報(bào)錯(cuò)（類型不兼容）；交叉類型沒有錯(cuò)誤，可以簡單的理解為：
泛型
泛型 是可以在 保證類型安全 前提下，讓函數(shù)等 與多種類型一起工作 ，從而 實(shí)現(xiàn)復(fù)用 ，常用于： 函數(shù) 、 接口 、 class 中。需求：創(chuàng)建一個(gè) id 函數(shù)，傳入什么數(shù)據(jù)就返回該數(shù)據(jù)本身（也就是說，參數(shù)和返回值類型相同）。
比如，id(10) 調(diào)用以上函數(shù)就會(huì)直接返回 10 本身。但是，該函數(shù)只接收數(shù)值類型，無法用于其他類型。為了能讓函數(shù)能夠接受任意類型，可以將參數(shù)類型修改為 any。但是，這樣就失去了 TS 的類型保護(hù)，類型不安全。
泛型 在 保證類型安全 （不丟失類型信息）的同時(shí)，可以 讓函數(shù)等與多種不同的類型一起工作 ，靈活可 復(fù)用 。實(shí)際上，在 C＃和 Java 等編程語言中，泛型都是用來實(shí)現(xiàn)可復(fù)用組件功能的主要工具之一。
創(chuàng)建泛型函數(shù)
解釋：1. 語法：在函數(shù)名稱的后面添加 <> （尖括號(hào)）， 尖括號(hào)中添加類型變量 ，比如此處的 Type。2. 類型變量 Type， 是一種特殊類型的變量 ， 它處理類型 而不是值。3. 該類型變量相當(dāng)于一個(gè)類型容器，能夠捕獲用戶提供的類型（具體是什么類型由用戶調(diào)用該函數(shù)時(shí)指定）。4. 因?yàn)?Type 是類型，因此可以將其作為函數(shù)參數(shù)和返回值的類型，表示參數(shù)和返回值具有相同的類型。5. 類型變量 Type，可以是任意合法的變量名稱。
調(diào)用泛型函數(shù)：
?
解釋：1. 語法：在函數(shù)名稱的后面添加 <> （尖括號(hào)）， 尖括號(hào)中指定具體的類型 ，比如，此處的 number。2. 當(dāng)傳入類型 number 后，這個(gè)類型就會(huì)被函數(shù)聲明時(shí)指定的類型變量 Type 捕獲到。3. 此時(shí)，Type 的類型就是 number，所以，函數(shù) id 參數(shù)和返回值的類型也都是 number。同樣，如果傳入類型 string，函數(shù) id 參數(shù)和返回值的類型就都是 string。這樣，通過 泛型 就做到了讓 id 函數(shù)與多種不同的類型一起工作， 實(shí)現(xiàn)了復(fù)用的同時(shí)保證了類型安全 。
簡化調(diào)用泛型函數(shù)：
解釋：1. 在調(diào)用泛型函數(shù)時(shí)， 可以省略 <類型> 來簡化泛型函數(shù)的調(diào)用 。2. 此時(shí)，TS 內(nèi)部會(huì)采用一種叫做 類型參數(shù)推斷 的機(jī)制，來根據(jù)傳入的實(shí)參自動(dòng)推斷出類型變量 Type 的類型。3. 比如，傳入實(shí)參 10，TS 會(huì)自動(dòng)推斷出變量 num 的類型 number，并作為 Type 的類型。推薦：使用這種簡化的方式調(diào)用泛型函數(shù)，使代碼更短，更易于閱讀。說明：當(dāng)編譯器無法推斷類型或者推斷的類型不準(zhǔn)確時(shí)，就需要顯式地傳入類型參數(shù)
泛型約束?
默認(rèn)情況下，泛型函數(shù)的類型變量 Type 可以代表多個(gè)類型，這導(dǎo)致無法訪問任何屬性。比如，id('a') 調(diào)用函數(shù)時(shí)獲取參數(shù)的長度：
解釋：Type 可以代表任意類型，無法保證一定存在 length 屬性，比如 number 類型就沒有 length。此時(shí)，就需要為泛型 添加約束 來 收縮類型 （縮窄類型取值范圍）。
添加泛型約束收縮類型，主要有以下兩種方式：1 指定更加具體的類型 2 添加約束。?
指定更加具體的類型
?比如，將類型修改為 Type[]（Type 類型的數(shù)組），因?yàn)橹灰菙?shù)組就一定存在 length 屬性，因此就可以訪問了。
添加約束?
解釋：1. 創(chuàng)建描述約束的接口 ILength，該接口要求提供 length 屬性。2. 通過 extends 關(guān)鍵字使用該接口，為泛型（類型變量）添加約束。3. 該約束表示： 傳入的類型必須具有 length 屬性 。注意：傳入的實(shí)參（比如，數(shù)組）只要有 length 屬性即可，這也符合前面講到的接口的類型兼容性。
泛型的類型變量可以有多個(gè)，并且 類型變量之間還可以約束 （比如，第二個(gè)類型變量受第一個(gè)類型變量約束）。比如，創(chuàng)建一個(gè)函數(shù)來獲取對象中屬性的值：
解釋：1. 添加了第二個(gè)類型變量 Key，兩個(gè)類型變量之間使用（ , ） 逗號(hào) 分隔。2. keyof 關(guān)鍵字 接收一個(gè)對象類型，生成其鍵名稱（可能是字符串或數(shù)字）的聯(lián)合類型 。3. 本示例中 keyof Type 實(shí)際上獲取的是 person 對象所有鍵的聯(lián)合類型，也就是：'name' | 'age'。4. 類型變量 Key 受 Type 約束，可以理解為：Key 只能是 Type 所有鍵中的任意一個(gè)，或者說只能訪問對象中存在的屬性。
泛型接口?
接口也可以配合泛型來使用，以增加其靈活性，增強(qiáng)其復(fù)用性。
解釋：1. 在接口名稱的后面添加 <類型變量> ，那么，這個(gè)接口就變成了泛型接口。2. 接口的類型變量，對接口中所有其他成員可見，也就是 接口中所有成員都可以使用類型變量 。3. 使用泛型接口時(shí)， 需要顯式指定 具體的 類型 （比如，此處的 IdFunc<nunber>）。4. 此時(shí)，id 方法的參數(shù)和返回值類型都是 number；ids 方法的返回值類型是 number[]。
實(shí)際上，JS 中的數(shù)組在 TS 中就是一個(gè) 泛型接口
解釋：當(dāng)我們在使用數(shù)組時(shí)，TS 會(huì)根據(jù)數(shù)組的不同類型，來自動(dòng)將類型變量設(shè)置為相應(yīng)的類型。技巧：可以通過 Ctrl + 鼠標(biāo)左鍵（Mac：option + 鼠標(biāo)左鍵）來查看具體的類型信息。
泛型類
class 也可以配合泛型來使用。
比如，React 的 class 組件的基類 Component 就是泛型類，不同的組件有不同的 props 和 state。
解釋：React.Component 泛型類兩個(gè)類型變量，分別指定 props 和 state 類型。?
創(chuàng)建泛型類：
解釋：1. 類似于泛型接口，在 class 名稱后面添加 <類型變量> ，這個(gè)類就變成了泛型類。2. 此處的 add 方法，采用的是箭頭函數(shù)形式的類型書寫方式。
類似于泛型接口，在創(chuàng)建 class 實(shí)例時(shí)，在類名后面通過 <類型> 來指定明確的類型。
泛型工具類型?
TS 內(nèi)置了一些常用的工具類型，來簡化 TS 中的一些常見操作。說明：它們都是 基于泛型實(shí)現(xiàn) 的（泛型適用于多種類型，更加通用），并且是內(nèi)置的，可以直接在代碼中使用。這些工具類型有很多，主要學(xué)習(xí)以下幾個(gè)：1. Partial<Type>2. Readonly<Type>3. Pick<Type, Keys>4. Record<Keys, Type>
Partial<Type>?
泛型工具類型 - Partial<Type> 用來構(gòu)造（創(chuàng)建）一個(gè)類型，將 Type 的所有屬性設(shè)置為可選 。
解釋：構(gòu)造出來的新類型 PartialProps 結(jié)構(gòu)和 Props 相同，但所有屬性都變?yōu)榭蛇x的。
Readonly<Type>?
泛型工具類型 - Readonly<Type> 用來構(gòu)造一個(gè)類型，將 Type 的所有屬性都設(shè)置為 readonly（只讀）。
?解釋：構(gòu)造出來的新類型 ReadonlyProps 結(jié)構(gòu)和 Props 相同，但所有屬性都變?yōu)橹蛔x的。
當(dāng)我們想重新給 id 屬性賦值時(shí)，就會(huì)報(bào)錯(cuò)：無法分配到 "id" ，因?yàn)樗侵蛔x屬性。
Pick<Type, Keys>?
泛型工具類型 - Pick<Type, Keys> 從 Type 中選擇一組屬性來構(gòu)造新類型。?
解釋：1. Pick 工具類型有兩個(gè)類型變量：1 表示選擇誰的屬性 2 表示選擇哪幾個(gè)屬性。2. 其中第二個(gè)類型變量，如果只選擇一個(gè)則只傳入該屬性名即可。3. 第二個(gè)類型變量傳入的屬性只能是第一個(gè)類型變量中存在的屬性 。4. 構(gòu)造出來的新類型 PickProps，只有 id 和 title 兩個(gè)屬性類型。
Record<Keys, Type>?
泛型工具類型 - Record<Keys,Type> 構(gòu)造一個(gè)對象類型，屬性鍵為 Keys，屬性類型為 Type。文章來源：http://www.zghlxwxcb.cn/news/detail-713276.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-713276.html
解釋：1. Record 工具類型有兩個(gè)類型變量： 1 表示對象有哪些屬性 2 表示對象屬性的類型 。2. 構(gòu)建的新對象類型 RecordObj 表示：這個(gè)對象有三個(gè)屬性分別為a/b/c，屬性值的類型都是 string[]。
到了這里，關(guān)于前端TypeScript學(xué)習(xí)day04-交叉類型與泛型的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
