類型別名
類型別名是用來(lái)給一個(gè)新類型取一個(gè)新名字夭织,一般用作優(yōu)雅代碼的時(shí)候使用,參考用法:
// 類型別名全都是以type開(kāi)頭
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
我感覺(jué)這個(gè)用的意義不太大兼丰,用的話也就是使代碼更加的優(yōu)雅好看撼玄。而且類型別名常用于聯(lián)合類型仔涩。
字符串字面類型變量(常用)
字符串字面量類型用來(lái)約束取值只能是某幾個(gè)字符串中的一個(gè)。
type test = 'click' | 'scroll' | 'mousemove';
const test1: test = 'no';
// 開(kāi)始報(bào)錯(cuò)了S济獭I罡臁!只能是上面click铜犬,scroll和mousemove其中的一個(gè)
元組
名字起的很玄幻舞终,,其實(shí)沒(méi)什么大用癣猾,定義類型的時(shí)候敛劝,合并不同類型,并只針對(duì)于數(shù)組纷宇。參考代碼:
let xcatliu: [string, number] = ['Xcat Liu', 25];
唯一有一點(diǎn)注意的就是夸盟,加入想給他初始化賦值的時(shí)候,那么值必須將所有的類型都涵蓋到
let xcatliu: [string, number] = ['Xcat Liu'];
// index.ts(1,5): error TS2322: Type '[string]' is not assignable to type '[string, number]'.
// Property '1' is missing in type '[string]'.
枚舉(常用)
枚舉使用enum關(guān)鍵字來(lái)進(jìn)行定義像捶。一般分為兩個(gè)上陕,一個(gè)是常數(shù)項(xiàng),一個(gè)是計(jì)算所得項(xiàng)拓春。示例代碼如下:
enum test = {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true
枚舉成員會(huì)被賦值從0開(kāi)始遞增的數(shù)字释簿,同時(shí)也會(huì)對(duì)枚舉值到枚舉名進(jìn)行反向映射。事實(shí)上硼莽,上面的例子可以編譯為:
var Days;
(function (Days) {
Days[Days["Sun"] = 0] = "Sun";
Days[Days["Mon"] = 1] = "Mon";
Days[Days["Tue"] = 2] = "Tue";
Days[Days["Wed"] = 3] = "Wed";
Days[Days["Thu"] = 4] = "Thu";
Days[Days["Fri"] = 5] = "Fri";
Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
使用枚舉的時(shí)候盡量不要設(shè)置想同下標(biāo)的枚舉庶溶,因?yàn)闀?huì)造成覆蓋的情況,而且ts并不會(huì)報(bào)錯(cuò)。
常數(shù)枚舉是我們經(jīng)常用的枚舉偏螺。
const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
編譯的結(jié)果是:
directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
類(重點(diǎn))
在傳統(tǒng)方法中行疏,JS通過(guò)構(gòu)造函數(shù)實(shí)現(xiàn)類的概念,但是在ES6中砖茸,我們可以使用Class來(lái)進(jìn)行隘擎。下面來(lái)進(jìn)行一些基本的概念:
- 類(Class):定義了一件事物的抽象特點(diǎn)殴穴,包含它的屬性和方法
- 對(duì)象(Object):類的實(shí)例凉夯,通過(guò) new 生成
- 面向?qū)ο螅∣OP)的三大特性:封裝、繼承采幌、多態(tài)
- 封裝(Encapsulation):將對(duì)數(shù)據(jù)的操作細(xì)節(jié)隱藏起來(lái)劲够,只暴露對(duì)外的接口。外界調(diào)用端不需要(也不可能)知道細(xì)節(jié)休傍,就能通過(guò)對(duì)外提供的接口來(lái)訪問(wèn)該對(duì)象征绎,同時(shí)也保證了外界無(wú)法任意更改對(duì)象內(nèi)部的數(shù)據(jù)
- 繼承(Inheritance):子類繼承父類,子類除了擁有父類的所有特性外磨取,還有一些更具體的特性
- 多態(tài)(Polymorphism):由繼承而產(chǎn)生了相關(guān)的不同的類人柿,對(duì)同一個(gè)方法可以有不同的響應(yīng)。比如 Cat 和 Dog 都繼承自 Animal忙厌,但是分別實(shí)現(xiàn)了自己的 eat 方法凫岖。此時(shí)針對(duì)某一個(gè)實(shí)例,我們無(wú)需了解它是 Cat 還是 Dog逢净,就可以直接調(diào)用 eat 方法哥放,程序會(huì)自動(dòng)判斷出來(lái)應(yīng)該如何執(zhí)行 eat
- 存取器(getter & setter):用以改變屬性的讀取和賦值行為
- 修飾符(Modifiers):修飾符是一些關(guān)鍵字,用于限定成員或類型的性質(zhì)爹土。比如 public 表示公有屬性或方法
- 抽象類(Abstract Class):抽象類是供其他類繼承的基類甥雕,抽象類不允許被實(shí)例化。抽象類中的抽象方法必須在子類中被實(shí)現(xiàn)
- 接口(Interfaces):不同類之間公有的屬性或方法胀茵,可以抽象成一個(gè)接口社露。接口可以被類實(shí)現(xiàn)(implements)。一個(gè)類只能繼承自另一個(gè)類琼娘,但是可以實(shí)現(xiàn)多個(gè)接口
參考:https://ts.xcatliu.com/advanced/class
泛型(常用)
泛型是指在定義函數(shù)峭弟,接口和類的時(shí)候,不預(yù)先指定具體的類型轨奄,而在使用的時(shí)候再指定類型的一種特性孟害。
泛型參考代碼:
function createArray<T>(length: number, value: T): Array<T> {
let result: T = [];
for (let i = 0; i < length; i ++) {
result[i] = value;
}
return result;
}
createArray<string>(3, 'x') 或者不指定類型,讓泛型自己自動(dòng)確定類型 createArray(3, 'x')
多個(gè)類型參數(shù):
function swap<T,U>(tuple: [T,u]): [U, T]{
return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]
但是使用泛型的時(shí)候會(huì)存在泛型約束
最后的最后挪拟,代碼檢查
TS的代碼檢查主要參考兩種方式:TSlint 或者使用 Eslint + typescript-eslint-parser
TSlint的優(yōu)點(diǎn)在于挨务,能夠通過(guò)typescript的語(yǔ)法解析,利用類型系統(tǒng)做一些Eslint做不到的檢查,
TSLint 的優(yōu)點(diǎn):
專為 TypeScript 服務(wù)谎柄,bug 比 ESLint 少
不受限于 ESLint 使用的語(yǔ)法樹(shù) ESTree
能直接通過(guò) tsconfig.json 中的配置編譯整個(gè)項(xiàng)目丁侄,使得在一個(gè)文件中的類型定義能夠聯(lián)動(dòng)到其他文件中的代碼檢查
ESLint 的優(yōu)點(diǎn):
基礎(chǔ)規(guī)則比 TSLint 多很多(249 : 151)
社區(qū)繁榮,插件眾多(50+ : 9)
為什么我們需要Eslint搭配 typescript-eslint-parser一起使用??
因?yàn)镋slint默認(rèn)使用Espree進(jìn)行語(yǔ)法解析朝巫,無(wú)法識(shí)別ts的一些語(yǔ)法鸿摇,所以我們需要再安裝typescript-eslint-parser。由于 typescript-eslint-parser 對(duì)一部分 ESLint 規(guī)則支持性不好劈猿,故我們需要安裝 eslint-plugin-typescript拙吉,彌補(bǔ)一些支持性不好的規(guī)則
參考:https://ts.xcatliu.com/engineering/lint