摘要：導航第一課體驗第二課基礎類型和入門高級類型第三課泛型第四課解讀高級類型很重要這一節很重要可以說是的最核心部分這一節學完其實就可以開始用寫代碼了想想中的再看看標題中的類型字所以請大家務必認真什么是入門高級類型因為高級類型的內容比較多但是有些基

第一課, 體驗typescript

第二課, 基礎類型和入門高級類型

第三課, 泛型

第四課, 解讀高級類型

這一節很重要, 可以說是ts的最核心部分, 這一節學完其實就可以開始用ts寫代碼了, 想想typescript中的type, 再看看標題中的"類型"2字, 所以請大家務必認真.

因為高級類型的內容比較多, 但是有些基礎類型的知識點還必須要用到高級類型的知識講解才連貫, 所以本節課把最常用的高級類型提前講解一下, 比如接口/聯合類型/交叉類型.

ts中基礎類型有如下幾種:boolean / number / string / object / 數組 / 元組 / 枚舉 / any / undefined / null / void / never, 下面我們一一舉例學習:

介紹類型前,有一個前置知識點就是字面量, 字面量的意思就是直接聲明, 而非new關鍵詞實例化出來的數據:

// 字面量
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"});

通過上面的例子, 大家應該看明白為什么ts中有些類型的開頭字母是小寫的了吧. 這是因為ts中用小寫字母開頭的類型代表字面量, 大寫的是用來表示通過new實例化的數據.

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

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

數字類型, 整數/小數都包括, 同時支持2/8/10/16進制字面量.

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}`;

數組有2種表示方式:

第1種, 通過在指定類型后面增加[], 表示該數組內的元素都是該指定類型:

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

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

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

元組類型表示一個已知元素數量和類型的數組, 各元素的類型不必相同:

let list1:[number, string] = [1, "2", 3]; // 錯誤, 數量不對, 元組中只聲明有2個元素
let list2:[number, string] = [1, 2]; // 錯誤, 第二個元素類型不對, 應該是字符串"2"
let list3:[number, string] = ["1", 2]; // 錯誤, 2個元素的類型顛倒了
let list4:[number, string] = [1, "2"]; // 正確

枚舉是ts中有而js中沒有的類型, 編譯后會被轉化成對象, 默認元素的值從1開始, 如下面的Color.Red的值為1, 以此類推Color.Green為2, Color.Blue為3:

enum Color {Red, Green, Blue}
// 等價
enum Color {Red=1, Green=2, Blue=3}

當然也可以自己手動賦值:

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

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

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代表任意類型, 也就是說, 如果你不清楚變量是什么類型, 就可以用any進行標記, 比如引入一些比較老的js庫, 沒有聲明類型, 使用的時候就可以標記為any類型, 這樣ts就不會提示錯誤了. 當然不能所有的地方都用any, 那樣ts就沒有使用的意義了.

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

// 但是因為標記了any, 所以ts認為a可能存在
obj.a = 123

void的意義和any相反, 表示不是任何類型, 一般出現在函數中, 用來標記函數沒有返回值:

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

void類型對應2個值, 一個是undefined,一個null:

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

默認情況下null和undefined是所有類型的子類型, 比如:

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

注意: 這是因為默認情況下的編譯選項strictNullChecks為false, 但是為了避免一些奇怪的問題出現, 我還是建議大家設置為true(編譯選項設置的內容, 會在后面的課程講解), 請用精準的類型去標注.

如果一個變量的值確實需要是null或者undefined, 可以像下面這么用, ts會自動根據if/else推導出正確類型:

// 這是"聯合類型", 在"高級類型"中會有詳細介紹, 表示n可能是undefined也可能是number
let num: undefined|number;

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

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

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

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

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

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

但是, 我們實際上基本不用object類型的, 因為他標注的非常不具體, 一般都用接口來標注更具體的對象類型, 請繼續看下面的接口的內容.

通過基礎類型組合而來的, 我們可以叫他高級類型. 包含: 交叉類型 / 聯合類型 / 接口等等, 當然不止他們3個, 為了不讓本節課太長造成讀者疲勞, 本節只先講這3個, 不過不要著急, 下節課會完結高級類型.

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

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

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

在這種情況下,當我們給article賦值的時候, 如果任何一個字段沒有被賦值或者字段對應的數據類型不對, ts都會提示錯誤, 這樣就保證了我們寫代碼不會出現上述的小錯誤.

還是上面的例子, fromSite的意思是文章來自那個網站,如果文章都是原創的, 該字段就不會有值, 但是如果我們不傳又會提示錯誤, 怎么辦?
這時候就需要標記fromSite字段為非必填, 用"?"標記:

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

// 不會報錯
const article: Article = {
    title: "為vue3學點typescript(2), 類型",
    count: 9999,
    content: "xxx...",
}

接口不僅可以定義對象, 還可以定義函數:

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

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

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

// 定義
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;
    }
}

交叉類型是將多個類型合并為一個類型, 表示"并且"的關系,用&連接多個類型, 常用于對象合并:

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

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

交叉類型也是將多個類型合并為一個類型, 表示"或"的關系,用|連接多個類型:

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

注意: 我這里標記了el為HTMLElement, 可以在typescript的倉庫看到ts還定義了很多元素, 請自行瀏覽(不用背, 用的時候現查),
https://github.com/microsoft/...

如果您看完了上面的所有知識點, 你就可以開始動手造輪子練習了, 加油. 下面是我用ts造的輪子, 如果喜歡請幫忙點下star, 謝謝.

手勢庫: https://github.com/any86/any-...

命令式調用vue組件: https://github.com/any86/vue-...

工作中常用的一些代碼片段: https://github.com/any86/usef...

一個mini的事件管理器: https://github.com/any86/any-...