摘要：直達(dá)第一課體驗(yàn)第二課基礎(chǔ)類型和入門高級(jí)類型第三課泛型第四課解讀高級(jí)類型第五課什么是命名空間回顧第二課的時(shí)候?yàn)榱烁玫闹v解基礎(chǔ)類型所以我們講解了一部分高級(jí)類型比如接口聯(lián)合類型交叉類型本節(jié)課我會(huì)把剩余高級(jí)類型都講完知識(shí)點(diǎn)摘要本節(jié)課主要關(guān)鍵詞為自
直達(dá)
第一課, 體驗(yàn)typescript
第二課, 基礎(chǔ)類型和入門高級(jí)類型
第三課, 泛型
第四課, 解讀高級(jí)類型
第五課, 什么是命名空間(namespace)?
回顧
第二課的時(shí)候?yàn)榱烁玫闹v解基礎(chǔ)類型, 所以我們講解了一部分高級(jí)類型, 比如"接口( interface )" / "聯(lián)合類型( | )" / "交叉類型( & )", 本節(jié)課我會(huì)把剩余高級(jí)類型都講完.
知識(shí)點(diǎn)摘要
本節(jié)課主要關(guān)鍵詞為: 自動(dòng)類型推斷 / 類型斷言 / 類型別名(type) / 映射類型(Pick/Record等...) / 條件類型(extends) / 類型推斷(infer)
自動(dòng)類型推斷(不用你標(biāo)類型了,ts自己猜)
第二課我們講了那么多基礎(chǔ)類型, 大家現(xiàn)在寫ts的時(shí)候一定會(huì)在每個(gè)變量后面都加上類型吧? 但是?
現(xiàn)在告訴大家有些情況下你不需要標(biāo)注類型, ts可以根據(jù)你寫的代碼來(lái)自動(dòng)推斷出類型:
賦值字面量給變量
let n = 1; // ts會(huì)自動(dòng)推斷出n是number類型
n+=3 // 不報(bào)錯(cuò),因?yàn)橐阎愋?
let arr1 = []; // 類型為: any[]
arr1.push(1,"2", {o:3});
let arr = [1]; // 內(nèi)部要有數(shù)字, 才能推斷出正確類型
arr.push(2);
自動(dòng)閱讀if條件判斷
let n: number|null = 0.5 < Math.random() ? 1:null;
if(null !== n){
n+=3 // ts知道現(xiàn)在n不是null是number
}
瀏覽器自帶api
document.ontouchstart = ev=>{ // 能自動(dòng)推斷出ev為TouchEvent
console.log(ev.touches); // 不報(bào)錯(cuò), TouchEvent上有touches屬性
}
typeof
typeof就是js中的typeof, ts會(huì)根據(jù)你代碼中出現(xiàn)的typeof來(lái)自動(dòng)推斷類型:
let n:number|string = 0.5 < Math.random()? 1:"1";
// 如果沒(méi)有typeof, n*=2會(huì)報(bào)錯(cuò), 提示沒(méi)法推斷出當(dāng)前是number類型, 不能進(jìn)行乘法運(yùn)算
if("number" === typeof n) {
n*= 2;
} else {
n= "2";
}
注意: 在ts文檔中, 該部分的知識(shí)點(diǎn)叫做typeof類型保護(hù), 和其他類型推斷的內(nèi)容是分開的, 被寫在高級(jí)類型/類型保護(hù)章節(jié)中.
instanceof
ts會(huì)根據(jù)你代碼中出現(xiàn)的instanceof來(lái)自動(dòng)推斷類型:
let obj = 0.5 < Math.random() ? new String(1) : new Array(1);
if(obj instanceof String){
// obj推斷為String類型
obj+= "123"
} else {
// obj為any[]類型
obj.push(123);
}
注意: 在ts文檔中, 該部分的知識(shí)點(diǎn)叫做instanceof類型保護(hù), 和其他類型推斷的內(nèi)容是分開的, 被寫在高級(jí)類型/類型保護(hù)章節(jié)中.
類型斷言(你告訴ts是什么類型, 他都信)
有些情況下系統(tǒng)沒(méi)辦法自動(dòng)推斷出正確的類型, 就需要我們標(biāo)記下, 斷言有2種語(yǔ)法, 一種是通過(guò)"<>", 一種通過(guò)"as", 舉例說(shuō)明:
let obj = 0.5 < Math.random() ? 1 : [1]; // number|number[]
// 斷言, 告訴ts, obj為數(shù)組
(obj).push(1);
//等價(jià)
(obj as number[]).push(1);
類型別名(type)
類型別名可以表示很多接口表示不了的類型, 比如字面量類型(常用來(lái)校驗(yàn)取值范圍):
type A = "top"|"right"|"bottom"|"left"; // 表示值可能是其中的任意一個(gè)
type B = 1|2|3;
type C = "紅"|"綠"|"黃";
type D = 150;
let a:A = "none"; // 錯(cuò)誤, A類型中沒(méi)有"none"
更多組合:
interface A1{
a:number;
}
type B = A1 | {b:string};
type C = A1 & {b:string};
// 與泛型組合
type D = A1 | T[];
索引類型(keyof)
js中的Object.keys大家肯定都用過(guò), 獲取對(duì)象的鍵值, ts中的keyof和他類似, 可以用來(lái)獲取對(duì)象類型的鍵值:
type A = keyof {a:1,b:"123"} // "a"|"b"
type B = keyof [1,2] // "1"|"2"|"push"... , 獲取到內(nèi)容的同時(shí), 還得到了Array原型上的方法和屬性(實(shí)戰(zhàn)中暫時(shí)沒(méi)遇到這種需求, 了解即可)
可以獲得鍵值, 也可以獲取對(duì)象類型的值的類型:
type C = A["a"] // 等于type C = 1;
let c:C = 2 // 錯(cuò)誤, 值只能是1
映射類型(Readonly, Pick, Record等...)
映射類型比較像修改類型的工具函數(shù), 比如Readonly可以把每個(gè)屬性都變成只讀:
type A = {a:number, b:string}
type A1 = Readonly // {readonly a: number;readonly b: string;}
打開node_modules/typescript/lib文件夾可以找到lib.es5.d.ts, 在這我們能找到Readonly的定義:
type Readonly = {
readonly [P in keyof T]: T[P];
};
其實(shí)不是很復(fù)雜, 看了本節(jié)課前面前面的內(nèi)容, 這個(gè)很好理解是吧:
定義一個(gè)支持泛型的類型別名, 傳入類型參數(shù)T.
通過(guò)keyof獲取T上的鍵值集合.
用in表示循環(huán)keyof獲取的鍵值.
添加readonly標(biāo)記.
Partial, 讓屬性都變成可選的
type A = {a:number, b:string}
type A1 = Partial // { a?: number; b?: string;}
Required, 讓屬性都變成必選
type A = {a?:number, b?:string}
type A1 = Required // { a: number; b: string;}
Pick, 只保留自己選擇的屬性, U代表屬性集合
type A = {a:number, b:string}
type A1 = Pick // {a:number}
Omit 實(shí)現(xiàn)排除已選的屬性
type A = {a:number, b:string}
type A1 = Omit // {b:string}
Record, 創(chuàng)建一個(gè)類型,T代表鍵值的類型, U代表值的類型
type A1 = Record // 等價(jià){[k:string]:string}
Exclude, 過(guò)濾T中和U相同(或兼容)的類型
type A = {a:number, b:string}
type A1 = Exclude // number
// 兼容
type A2 = Exclude // never , 因?yàn)閍ny兼容number, 所以number被過(guò)濾掉
Extract, 提取T中和U相同(或兼容)的類型
type A = {a:number, b:string}
type A1 = Extract // string
NonNullable, 剔除T中的undefined和null
type A1 = NonNullable // number|string
ReturnType, 獲取T的返回值的類型
type A1= ReturnType<()=>number> // number
InstanceType, 返回T的實(shí)例類型
ts中類有2種類型, 靜態(tài)部分的類型和實(shí)例的類型, 所以T如果是構(gòu)造函數(shù)類型, 那么InstanceType可以返回他的實(shí)例類型:
interface A{
a:HTMLElement;
}
interface AConstructor{
new():A;
}
function create (AClass:AConstructor):InstanceType{
return new AClass();
}
Parameters 獲取函數(shù)參數(shù)類型
返回類型為元祖, 元素順序同參數(shù)順序.
interface A{
(a:number, b:string):string[];
}
type A1 = Parameters // [number, string]
ConstructorParameters 獲取構(gòu)造函數(shù)的參數(shù)類型
和Parameters類似, 只是T這里是構(gòu)造函數(shù)類型.
interface AConstructor{
new(a:number):string[];
}
type A1 = ConstructorParameters // [number]
extends(條件類型)
T extends U ? X : Y
用來(lái)表示類型是不確定的, 如果U的類型可以表示T, 那么返回X, 否則Y. 舉幾個(gè)例子:
type A = string extends "123" ? string :"123" // "123"
type B = "123" extends string ? string :123 // string
明顯string的范圍更大, "123"可以被string表示, 反之不可.
infer(類型推斷)
單詞本身的意思是"推斷", 實(shí)際表示在extends條件語(yǔ)句中聲明待推斷的類型變量. 我們上面介紹的映射類型中就有很多都是ts在lib.d.ts中實(shí)現(xiàn)的, 比如Parameters:
type Parameters any> = T extends (...args: infer P) => any ? P : never;
為vue3學(xué)點(diǎn)typescript, 解讀高級(jí)類型
直達(dá)
第一課, 體驗(yàn)typescript
第二課, 基礎(chǔ)類型和入門高級(jí)類型
第三課, 泛型
第四課, 解讀高級(jí)類型
回顧
第二課的時(shí)候?yàn)榱烁玫闹v解基礎(chǔ)類型, 所以我們講解了一部分高級(jí)類型, 比如"接口( interface )" / "聯(lián)合類型( | )" / "交叉類型( & )", 本節(jié)課我會(huì)把剩余高級(jí)類型都講完.
知識(shí)點(diǎn)摘要
本節(jié)課主要關(guān)鍵詞為: 自動(dòng)類型推斷 / 類型斷言 / 類型別名(type) / 映射類型(Pick/Record等...) / 條件類型(extends) / 類型推斷(infer)
自動(dòng)類型推斷(不用你標(biāo)類型了,ts自己猜)
第二課我們講了那么多基礎(chǔ)類型, 大家現(xiàn)在寫ts的時(shí)候一定會(huì)在每個(gè)變量后面都加上類型吧? 但是?
現(xiàn)在告訴大家有些情況下你不需要標(biāo)注類型, ts可以根據(jù)你寫的代碼來(lái)自動(dòng)推斷出類型:
賦值字面量給變量
let n = 1; // ts會(huì)自動(dòng)推斷出n是number類型
n+=3 // 不報(bào)錯(cuò),因?yàn)橐阎愋?
let arr1 = []; // 類型為: never[]
arr1.push(1); // 報(bào)錯(cuò),
let arr = [1]; // 內(nèi)部要有數(shù)字, 才能推斷出正確類型
arr.push(2);
自動(dòng)閱讀if條件判斷
let n: number|null = 0.5 < Math.random() ? 1:null;
if(null !== n){
n+=3 // ts知道現(xiàn)在n不是null是number
}
瀏覽器自帶api
document.ontouchstart = ev=>{ // 能自動(dòng)推斷出ev為TouchEvent
console.log(ev.touches); // 不報(bào)錯(cuò), TouchEvent上有touches屬性
}
typeof
typeof就是js中的typeof, ts會(huì)根據(jù)你代碼中出現(xiàn)的typeof來(lái)自動(dòng)推斷類型:
let n:number|string = 0.5 < Math.random()? 1:"1";
// 如果沒(méi)有typeof, n*=2會(huì)報(bào)錯(cuò), 提示沒(méi)法推斷出當(dāng)前是number類型, 不能進(jìn)行乘法運(yùn)算
if("number" === typeof n) {
n*= 2;
} else {
n= "2";
}
注意: 在ts文檔中, 該部分的知識(shí)點(diǎn)叫做typeof類型保護(hù), 和其他類型推斷的內(nèi)容是分開的, 被寫在高級(jí)類型/類型保護(hù)章節(jié)中.
instanceof
ts會(huì)根據(jù)你代碼中出現(xiàn)的instanceof來(lái)自動(dòng)推斷類型:
let obj = 0.5 < Math.random() ? new String(1) : new Array(1);
if(obj instanceof String){
// obj推斷為String類型
obj+= "123"
} else {
// obj為any[]類型
obj.push(123);
}
注意: 在ts文檔中, 該部分的知識(shí)點(diǎn)叫做instanceof類型保護(hù), 和其他類型推斷的內(nèi)容是分開的, 被寫在高級(jí)類型/類型保護(hù)章節(jié)中.
類型斷言(你告訴ts是什么類型, 他都信)
有些情況下系統(tǒng)沒(méi)辦法自動(dòng)推斷出正確的類型, 就需要我們標(biāo)記下, 斷言有2種語(yǔ)法, 一種是通過(guò)"<>", 一種通過(guò)"as", 舉例說(shuō)明:
let obj = 0.5 < Math.random() ? 1 : [1]; // number|number[]
// 斷言, 告訴ts, obj為數(shù)組
(obj).push(1);
//等價(jià)
(obj as number[]).push(1);
類型別名(type)
類型別名可以表示很多接口表示不了的類型, 比如字面量類型(常用來(lái)校驗(yàn)取值范圍):
type A = "top"|"right"|"bottom"|"left"; // 表示值可能是其中的任意一個(gè)
type B = 1|2|3;
type C = "紅"|"綠"|"黃";
type D = 150;
let a:A = "none"; // 錯(cuò)誤, A類型中沒(méi)有"none"
更多組合:
interface A1{
a:number;
}
type B = A1 | {b:string};
type C = A1 & {b:string};
// 與泛型組合
type D = A1 | T[];
索引類型(keyof)
js中的Object.keys大家肯定都用過(guò), 獲取對(duì)象的鍵值, ts中的keyof和他類似, 可以用來(lái)獲取對(duì)象類型的鍵值:
type A = keyof {a:1,b:"123"} // "a"|"b"
type B = keyof [1,2] // "1"|"2"|"push"... , 獲取到內(nèi)容的同時(shí), 還得到了Array原型上的方法和屬性(實(shí)戰(zhàn)中暫時(shí)沒(méi)遇到這種需求, 了解即可)
可以獲得鍵值, 也可以獲取對(duì)象類型的值的類型:
type C = A["a"] // 等于type C = 1;
let c:C = 2 // 錯(cuò)誤, 值只能是1
映射類型(Readonly, Pick, Record等...)
映射類型比較像修改類型的工具函數(shù), 比如Readonly可以把每個(gè)屬性都變成只讀:
type A = {a:number, b:string}
type A1 = Readonly // {readonly a: number;readonly b: string;}
打開node_modules/typescript/lib文件夾可以找到lib.es5.d.ts, 在這我們能找到Readonly的定義:
type Readonly = {
readonly [P in keyof T]: T[P];
};
其實(shí)不是很復(fù)雜, 看了本節(jié)課前面前面的內(nèi)容, 這個(gè)很好理解是吧:
定義一個(gè)支持泛型的類型別名, 傳入類型參數(shù)T.
通過(guò)keyof獲取T上的鍵值集合.
用in表示循環(huán)keyof獲取的鍵值.
添加readonly標(biāo)記.
Partial, 讓屬性都變成可選的
type A = {a:number, b:string}
type A1 = Partial // { a?: number; b?: string;}
Required, 讓屬性都變成必選
type A = {a?:number, b?:string}
type A1 = Required // { a: number; b: string;}
Pick, 只保留自己選擇的屬性, U代表屬性集合
type A = {a:number, b:string}
type A1 = Pick // {a:number}
Omit 實(shí)現(xiàn)排除已選的屬性
type A = {a:number, b:string}
type A1 = Omit // {b:string}
Record, 創(chuàng)建一個(gè)類型,T代表鍵值的類型, U代表值的類型
type A1 = Record // 等價(jià){[k:string]:string}
Exclude, 過(guò)濾T中和U相同(或兼容)的類型
type A = {a:number, b:string}
type A1 = Exclude // number
// 兼容
type A2 = Exclude // never , 因?yàn)閍ny兼容number, 所以number被過(guò)濾掉
Extract, 提取T中和U相同(或兼容)的類型
type A = {a:number, b:string}
type A1 = Extract // string
NonNullable, 剔除T中的undefined和null
type A1 = NonNullable // number|string
ReturnType, 獲取T的返回值的類型
type A1= ReturnType<()=>number> // number
InstanceType, 返回T的實(shí)例類型
ts中類有2種類型, 靜態(tài)部分的類型和實(shí)例的類型, 所以T如果是構(gòu)造函數(shù)類型, 那么InstanceType可以返回他的實(shí)例類型:
interface A{
a:HTMLElement;
}
interface AConstructor{
new():A;
}
function create (AClass:AConstructor):InstanceType{
return new AClass();
}
Parameters 獲取函數(shù)參數(shù)類型
返回類型為元祖, 元素順序同參數(shù)順序.
interface A{
(a:number, b:string):string[];
}
type A1 = Parameters // [number, string]
ConstructorParameters 獲取構(gòu)造函數(shù)的參數(shù)類型
和Parameters類似, 只是T這里是構(gòu)造函數(shù)類型.
interface AConstructor{
new(a:number):string[];
}
type A1 = ConstructorParameters // [number]
extends(條件類型)
T extends U ? X : Y
用來(lái)表示類型是不確定的, 如果U的類型可以表示T, 那么返回X, 否則Y. 舉幾個(gè)例子:
type A = string extends "123" ? string :"123" // "123"
type B = "123" extends string ? string :123 // string
明顯string的范圍更大, "123"可以被string表示, 反之不可.
infer(類型推斷)
單詞本身的意思是"推斷", 實(shí)際表示在extends條件語(yǔ)句中聲明待推斷的類型變量. 我們上面介紹的映射類型中就有很多都是ts在lib.d.ts中實(shí)現(xiàn)的, 比如Parameters:
type Parameters any> = T extends (...args: infer P) => any ? P : never;
上面聲明一個(gè)P用來(lái)表示...args可能的類型, 如果(...args: infer P)可以表示 T, 那么返回...args對(duì)應(yīng)的類型, 也就是函數(shù)的參數(shù)類型, 反之返回never.
注意: 開始的T extends (...args: any) => any用來(lái)校驗(yàn)輸入的T是否是函數(shù), 如果不是ts會(huì)報(bào)錯(cuò), 如果直接替換成T不會(huì)有報(bào)錯(cuò), 會(huì)一直返回never.
應(yīng)用infer
接下來(lái)我們利用infer來(lái)實(shí)現(xiàn)"刪除元祖類型中第一個(gè)元素", 這常用于簡(jiǎn)化函數(shù)參數(shù), 這有一個(gè)我之前的應(yīng)用
export type Tail = ((...args: Tuple) => void) extends ((a: any, ...args: infer T) => void) ? T : never;
總結(jié)
多寫多練, 很快就上手, 放幾個(gè)我用ts寫的項(xiàng)目當(dāng)做參考, 拋磚引玉, 加油!
手勢(shì)庫(kù): https://github.com/any86/any-...
命令式調(diào)用vue組件: https://github.com/any86/vue-...
工作中常用的一些代碼片段: https://github.com/any86/usef...
一個(gè)mini的事件管理器: https://github.com/any86/any-...
上面聲明一個(gè)P用來(lái)表示...args可能的類型, 如果(...args: infer P)可以表示 T, 那么返回...args對(duì)應(yīng)的類型, 也就是函數(shù)的參數(shù)類型, 反之返回never.
注意: 開始的T extends (...args: any) => any用來(lái)校驗(yàn)輸入的T是否是函數(shù), 如果不是ts會(huì)報(bào)錯(cuò), 如果直接替換成T不會(huì)有報(bào)錯(cuò), 會(huì)一直返回never.
應(yīng)用infer
接下來(lái)我們利用infer來(lái)實(shí)現(xiàn)"刪除元祖類型中第一個(gè)元素", 這常用于簡(jiǎn)化函數(shù)參數(shù), 這有一個(gè)我之前的應(yīng)用
export type Tail = ((...args: Tuple) => void) extends ((a: any, ...args: infer T) => void) ? T : never;
總結(jié)
多寫多練, 很快就上手, 放幾個(gè)我用ts寫的項(xiàng)目當(dāng)做參考, 拋磚引玉, 加油!
手勢(shì)庫(kù): https://github.com/any86/any-...
命令式調(diào)用vue組件: https://github.com/any86/vue-...
工作中常用的一些代碼片段: https://github.com/any86/usef...
一個(gè)mini的事件管理器: https://github.com/any86/any-...
