摘要：導(dǎo)航第一課體驗(yàn)第二課基礎(chǔ)類型和入門(mén)高級(jí)類型第三課泛型第四課解讀高級(jí)類型很重要這一節(jié)很重要可以說(shuō)是的最核心部分這一節(jié)學(xué)完其實(shí)就可以開(kāi)始用寫(xiě)代碼了想想中的再看看標(biāo)題中的類型字所以請(qǐng)大家務(wù)必認(rèn)真什么是入門(mén)高級(jí)類型因?yàn)楦呒?jí)類型的內(nèi)容比較多但是有些基

第一課, 體驗(yàn)typescript

第二課, 基礎(chǔ)類型和入門(mén)高級(jí)類型

第三課, 泛型

第四課, 解讀高級(jí)類型

這一節(jié)很重要, 可以說(shuō)是ts的最核心部分, 這一節(jié)學(xué)完其實(shí)就可以開(kāi)始用ts寫(xiě)代碼了, 想想typescript中的type, 再看看標(biāo)題中的"類型"2字, 所以請(qǐng)大家務(wù)必認(rèn)真.

因?yàn)楦呒?jí)類型的內(nèi)容比較多, 但是有些基礎(chǔ)類型的知識(shí)點(diǎn)還必須要用到高級(jí)類型的知識(shí)講解才連貫, 所以本節(jié)課把最常用的高級(jí)類型提前講解一下, 比如接口/聯(lián)合類型/交叉類型.

ts中基礎(chǔ)類型有如下幾種:boolean / number / string / object / 數(shù)組 / 元組 / 枚舉 / any / undefined / null / void / never, 下面我們一一舉例學(xué)習(xí):

介紹類型前,有一個(gè)前置知識(shí)點(diǎn)就是字面量, 字面量的意思就是直接聲明, 而非new關(guān)鍵詞實(shí)例化出來(lái)的數(shù)據(jù):

// 字面量
const n:number = 123;
const s:string = "456";
const o:object = {a:1,b:"2"};

// 非字面量
const n:Number = new Number(123);
const s:String = new String("456");
const o:Object = new Object({a:1,b:"2"});

通過(guò)上面的例子, 大家應(yīng)該看明白為什么ts中有些類型的開(kāi)頭字母是小寫(xiě)的了吧. 這是因?yàn)閠s中用小寫(xiě)字母開(kāi)頭的類型代表字面量, 大寫(xiě)的是用來(lái)表示通過(guò)new實(shí)例化的數(shù)據(jù).

布爾類型, 取值只有true / false

const IS_MOBILE:boolean = true;
const IS_TABLE:boolean = false;

數(shù)字類型, 整數(shù)/小數(shù)都包括, 同時(shí)支持2/8/10/16進(jìn)制字面量.

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串類型

let s1:string = "hello world!";
let s2:string = "hello ${name}`;

數(shù)組有2種表示方式:

第1種, 通過(guò)在指定類型后面增加[], 表示該數(shù)組內(nèi)的元素都是該指定類型:

let numbers:number[] = [1,2,3,4,5];
// number|string代表聯(lián)合類型, 下面的高級(jí)類型中會(huì)講
let numbers:(number|string)[] = [1,2,3,4,"5"];

第2種, 通過(guò)泛型表示, Array<元素類型>, 泛型會(huì)在后面課講解, 先做了解即可:

let numbers:Array = [1,2,3,4,5];

元組類型表示一個(gè)已知元素?cái)?shù)量和類型的數(shù)組, 各元素的類型不必相同:

let list1:[number, string] = [1, "2", 3]; // 錯(cuò)誤, 數(shù)量不對(duì), 元組中只聲明有2個(gè)元素
let list2:[number, string] = [1, 2]; // 錯(cuò)誤, 第二個(gè)元素類型不對(duì), 應(yīng)該是字符串"2"
let list3:[number, string] = ["1", 2]; // 錯(cuò)誤, 2個(gè)元素的類型顛倒了
let list4:[number, string] = [1, "2"]; // 正確

枚舉是ts中有而js中沒(méi)有的類型, 編譯后會(huì)被轉(zhuǎn)化成對(duì)象, 默認(rèn)元素的值從1開(kāi)始, 如下面的Color.Red的值為1, 以此類推Color.Green為2, Color.Blue為3:

enum Color {Red, Green, Blue}
// 等價(jià)
enum Color {Red=1, Green=2, Blue=3}

當(dāng)然也可以自己手動(dòng)賦值:

enum Color {Red=1, Green=2, Blue=4}

并且我們可以反向通過(guò)值得到他的鍵值:

enum Color {Red=1, Green=2, Blue=4}
Color[2] === "Green" // true

看下編譯成js后的枚舉代碼, 你就明白為什么可以反向得到鍵值:

var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
// Color的值為: {0: "Red", 1: "Green", 2: "Blue", Red: 0, Green: 1, Blue: 2}

any代表任意類型, 也就是說(shuō), 如果你不清楚變量是什么類型, 就可以用any進(jìn)行標(biāo)記, 比如引入一些比較老的js庫(kù), 沒(méi)有聲明類型, 使用的時(shí)候就可以標(biāo)記為any類型, 這樣ts就不會(huì)提示錯(cuò)誤了. 當(dāng)然不能所有的地方都用any, 那樣ts就沒(méi)有使用的意義了.

let obj:any = {};
// ts自己推導(dǎo)不出forEach中給obj增加了"a"和"b"字段.
["a", "b"].forEach(letter=>{
    obj[letter] = letter;
});

// 但是因?yàn)闃?biāo)記了any, 所以ts認(rèn)為a可能存在
obj.a = 123

void的意義和any相反, 表示不是任何類型, 一般出現(xiàn)在函數(shù)中, 用來(lái)標(biāo)記函數(shù)沒(méi)有返回值:

function abc(n:number):void{
    console.log(n);
}

void類型對(duì)應(yīng)2個(gè)值, 一個(gè)是undefined,一個(gè)null:

const n1:void = undefined;
const n2:void = null;

默認(rèn)情況下null和undefined是所有類型的子類型, 比如:

const n1:null = 123;
const n2:undefined = "123";

注意: 這是因?yàn)槟J(rèn)情況下的編譯選項(xiàng)strictNullChecks為false, 但是為了避免一些奇怪的問(wèn)題出現(xiàn), 我還是建議大家設(shè)置為true(編譯選項(xiàng)設(shè)置的內(nèi)容, 會(huì)在后面的課程講解), 請(qǐng)用精準(zhǔn)的類型去標(biāo)注.

如果一個(gè)變量的值確實(shí)需要是null或者undefined, 可以像下面這么用, ts會(huì)自動(dòng)根據(jù)if/else推導(dǎo)出正確類型:

// 這是"聯(lián)合類型", 在"高級(jí)類型"中會(huì)有詳細(xì)介紹, 表示n可能是undefined也可能是number
let num: undefined|number;

if(Math.random()>0.5) num = 1;

if(undefined !== num) {
    num++;
}

never表示不可達(dá), 用文字還真不好描述, 主要使用在throw的情況下:

function error():never{
    throw "錯(cuò)了!";
}

object表示非原始類型, 也就是除number/ ss/ boolean/ symbol/ null/ undefined之外的類型:

let o1:object = [];
let o2:object = {a:1,b:2};

但是, 我們實(shí)際上基本不用object類型的, 因?yàn)樗麡?biāo)注的非常不具體, 一般都用接口來(lái)標(biāo)注更具體的對(duì)象類型, 請(qǐng)繼續(xù)看下面的接口的內(nèi)容.

通過(guò)基礎(chǔ)類型組合而來(lái)的, 我們可以叫他高級(jí)類型. 包含: 交叉類型 / 聯(lián)合類型 / 接口等等, 當(dāng)然不止他們3個(gè), 為了不讓本節(jié)課太長(zhǎng)造成讀者疲勞, 本節(jié)只先講這3個(gè), 不過(guò)不要著急, 下節(jié)課會(huì)完結(jié)高級(jí)類型.

一種定義復(fù)雜類型的格式, 比如我們用對(duì)象格式存儲(chǔ)一篇文章, 那么就可以用接口定義文章的類型:

interface Article {
    title: stirng;
    count: number;
    content:string;
    fromSite: string;
}

const article: Article = {
    title: "為vue3學(xué)點(diǎn)typescript(2), 類型",
    count: 9999,
    content: "xxx...",
    fromSite: "baidu.com"
}

在這種情況下,當(dāng)我們給article賦值的時(shí)候, 如果任何一個(gè)字段沒(méi)有被賦值或者字段對(duì)應(yīng)的數(shù)據(jù)類型不對(duì), ts都會(huì)提示錯(cuò)誤, 這樣就保證了我們寫(xiě)代碼不會(huì)出現(xiàn)上述的小錯(cuò)誤.

還是上面的例子, fromSite的意思是文章來(lái)自那個(gè)網(wǎng)站,如果文章都是原創(chuàng)的, 該字段就不會(huì)有值, 但是如果我們不傳又會(huì)提示錯(cuò)誤, 怎么辦?
這時(shí)候就需要標(biāo)記fromSite字段為非必填, 用"?"標(biāo)記:

interface Article {
    title: stirng;
    count: number;
    content:string;
    fromSite?: string; // 非必填
}

// 不會(huì)報(bào)錯(cuò)
const article: Article = {
    title: "為vue3學(xué)點(diǎn)typescript(2), 類型",
    count: 9999,
    content: "xxx...",
}

接口不僅可以定義對(duì)象, 還可以定義函數(shù):

// 聲明接口
interface Core {
    (n:number, s:string):[number,string]
}

// 聲明函數(shù)遵循接口定義
const core:Core = (a,b)=>{
    return [a,b];
}

先簡(jiǎn)單看下如何給類定義接口, 后面的課程具體講類:

// 定義
interface Animate {
    head:number;
    body:number;
    foot:number;
    eat(food:string):void;
    say(word:string):string;
}

// implements
class Dog implements Animate{
    head=1;
    body=1;
    foot=1;
    eat(food){
        console.log(food);
    }
    say(word){
        return word;
    }
}

交叉類型是將多個(gè)類型合并為一個(gè)類型, 表示"并且"的關(guān)系,用&連接多個(gè)類型, 常用于對(duì)象合并:

interface A {a:number};
interface B {b:string};

const a:A = {a:1};
const b:B = {b:"1"};
const ab:A&B = {...a,...b};

交叉類型也是將多個(gè)類型合并為一個(gè)類型, 表示"或"的關(guān)系,用|連接多個(gè)類型:

function setWidth(el: HTMLElement, width: string | number) {
    el.style.width = "number" === typeof width ? `${width}px` : width;
}

注意: 我這里標(biāo)記了el為HTMLElement, 可以在typescript的倉(cāng)庫(kù)看到ts還定義了很多元素, 請(qǐng)自行瀏覽(不用背, 用的時(shí)候現(xiàn)查),
https://github.com/microsoft/...

如果您看完了上面的所有知識(shí)點(diǎn), 你就可以開(kāi)始動(dòng)手造輪子練習(xí)了, 加油. 下面是我用ts造的輪子, 如果喜歡請(qǐng)幫忙點(diǎn)下star, 謝謝.

手勢(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-...