ts學(xué)習(xí)(基礎(chǔ)篇二)

類型別名

類型別名是用來(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):

  1. 專為 TypeScript 服務(wù)谎柄,bug 比 ESLint 少

  2. 不受限于 ESLint 使用的語(yǔ)法樹(shù) ESTree

  3. 能直接通過(guò) tsconfig.json 中的配置編譯整個(gè)項(xiàng)目丁侄,使得在一個(gè)文件中的類型定義能夠聯(lián)動(dòng)到其他文件中的代碼檢查

ESLint 的優(yōu)點(diǎn):

  1. 基礎(chǔ)規(guī)則比 TSLint 多很多(249 : 151)

  2. 社區(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市揪荣,隨后出現(xiàn)的幾起案子筷黔,更是在濱河造成了極大的恐慌,老刑警劉巖仗颈,帶你破解...
    沈念sama閱讀 221,406評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件佛舱,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡挨决,警方通過(guò)查閱死者的電腦和手機(jī)请祖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)脖祈,“玉大人肆捕,你說(shuō)我怎么就攤上這事∪鱿” “怎么了福压?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,815評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)或舞。 經(jīng)常有香客問(wèn)我荆姆,道長(zhǎng),這世上最難降的妖魔是什么映凳? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,537評(píng)論 1 296
  • 正文 為了忘掉前任胆筒,我火速辦了婚禮,結(jié)果婚禮上诈豌,老公的妹妹穿的比我還像新娘仆救。我一直安慰自己,他們只是感情好矫渔,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布彤蔽。 她就那樣靜靜地躺著,像睡著了一般庙洼。 火紅的嫁衣襯著肌膚如雪顿痪。 梳的紋絲不亂的頭發(fā)上镊辕,一...
    開(kāi)封第一講書(shū)人閱讀 52,184評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音蚁袭,去河邊找鬼征懈。 笑死,一個(gè)胖子當(dāng)著我的面吹牛揩悄,可吹牛的內(nèi)容都是我干的卖哎。 我是一名探鬼主播,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼删性,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼亏娜!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起镇匀,我...
    開(kāi)封第一講書(shū)人閱讀 39,668評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤照藻,失蹤者是張志新(化名)和其女友劉穎袜啃,沒(méi)想到半個(gè)月后汗侵,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,212評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡群发,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評(píng)論 3 340
  • 正文 我和宋清朗相戀三年晰韵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片熟妓。...
    茶點(diǎn)故事閱讀 40,438評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡雪猪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出起愈,到底是詐尸還是另有隱情只恨,我是刑警寧澤,帶...
    沈念sama閱讀 36,128評(píng)論 5 349
  • 正文 年R本政府宣布抬虽,位于F島的核電站官觅,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏阐污。R本人自食惡果不足惜休涤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望笛辟。 院中可真熱鬧功氨,春花似錦、人聲如沸手幢。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,279評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)围来。三九已至跺涤,卻和暖如春踱阿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背钦铁。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,395評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工软舌, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人牛曹。 一個(gè)月前我還...
    沈念sama閱讀 48,827評(píng)論 3 376
  • 正文 我出身青樓佛点,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親黎比。 傳聞我的和親對(duì)象是個(gè)殘疾皇子超营,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評(píng)論 2 359