TS簡明教程(1)

爲了後續內容(如nestjs等框架)的開展，本文更新TS相關的基礎知識。

關注獲取更多TS精品文章

TypeScript是JavaScript的一個超集，支持 ECMAScript 6 標準。 TypeScript能夠在任何瀏覽器、任何計算機和任何操做系統上運行，而且是開源的。 Typescript由微軟開發，與C#出自同一人之手!

TS與JS的區別

TS是JS的超集，擴展了TS的語法，所以現有的JS代碼可直接與TS一塊兒工做無需任何修改，TS經過類型註解提供編譯時的靜態類型檢查。

因爲TS與JS語法大部分一致，本文只對有差別的部分進行講解。

目錄

有些知識點多是交叉的建議通讀完本文再開始真正的開發，這樣疑惑會比較少一點

1. 數據類型與類型斷言
2. 函數
3. 接口和類
4. 泛型
5. 枚舉
6. 命名空間和模塊
7. 裝飾器(註解)
8. 高級類型
9. 聲明文件
10. tsconfig.json
11. 示例
    1. React示例(前端)
    2. Koa示例(後端)

數據類型與類型聲明

TS使用:語法對類型進行聲明。基礎類型以下：

布爾類型

TS使用boolean來聲明布爾類型。

let succeed: boolean = false; // 聲明succeed爲boolean類型
複製代碼

數字

TS對數字的支持與JS一致，全部數字都是浮點數，因此TS並不存在int,float之類的數字類型聲明，只有number。 除了支持十進制和十六進制，TS還支持ES6的二進制和八進制數字。

const age: number = 16; // 聲明年齡爲數字類型
const price: number = 99.99; // 聲明價格爲數字類型
複製代碼

字符串

TS使用string聲明字符串，和JS同樣，支持單引號和雙引號。

let name: string = "demo";

name = "demo1";

const description = `我是${name}`; // ES6語法
複製代碼

數組

TS使用類型[]聲明數組的元素類型，與JS不同的地方在於，TS中一旦指明一個類型，全部元素必須是該類型。JS則能夠往數組聽任意類型的元素。

const numbers: number[] = [];
numbers.push(1);
numbers.push(2);
numbers.push('3'); // 錯誤，'3'不是數字類型
複製代碼

對象

與JS同樣，TS的對象也是由鍵值對構成，類型聲明能夠分別做用與鍵類型以及值類型。

聲明語法：{[key名稱: key類型]: 值類型} key名稱能夠自定義，如key,index都是合法的。

const config: {[key: string]: string} = {}; // 聲明鍵和值都只能是字符串類型
config.version = '1.0.0';

const ages: {[key: number]: number} = {}; // 聲明鍵值對都是數字類型
ages[10] = '1.0.0'; // 賦值
複製代碼

上例中賦值語法雖然和數組一致，可是ages對象的長度爲1，若是ages是數組的話，長度爲11。(0-9個元素爲undefined)

任意類型

TS用any用來聲明任意類型，被any修飾的變量(或常量以及返回值等等)在編譯階段會直接經過，可是運行階段可能會拋出undefined或null相關錯誤。

any的出現使得現有的JS代碼可以很快速的切換到TS。

let age:any = 10;
age = 'name'; // 編譯經過
複製代碼

空類型

TS使用void聲明空類型。與any相反，表示沒有任何類型，經常使用在函數返回值中。 void類型只能被賦值爲null和undefined。

function test(name: string): void { // 聲明函數無返回值，編譯成JS以後取返回值會取到undefined，與JS一致
    console.log(name);
}

let v: void = null;
複製代碼

null和undefined

TS中默認狀況下，null和undefined是全部類型的子類型，換句話說，你能夠把null和undefined直接賦值給number/string/boolean等類型。 可是不能反過來幹，你不能把number/string/boolean類型賦值給null或者undefined

let u: undefined = undefined;
let n: null = null;
複製代碼

never

never是100%不存在的值的類型。好比函數中直接拋出異常或者有死循環。

function error(message: string): never {
    throw new Error(message);
}

function fail() { // TS自動類型推斷返回值類型爲never，類型推斷在下文中會提到
    return error('failed');
}

function loop(): never { // 死循環，確定不會返回
    while(true) {} 
}
複製代碼

never和void區別

1. 被void修飾的函數能正常終止，只不過沒有返回值
2. 被never修飾的函數不能正常終止，如拋出異常或死循環

枚舉

枚舉是對JS的一個擴展。TS使用enum關鍵字定義枚舉類型。

enum Color {
    Red,
    Green,
    Yellow
}
let c: Color = Color.Red;
複製代碼

Object

TS使用object類修飾對象類型，TS中表示非原始類型。原始類型以下：

1. number
2. string
3. boolean
4. null
5. undefined
6. symbol(ES6新出類型)

let a: object = {}; // ok
let a: object = 1; // error
let a: object = Symbol(); / error
複製代碼

雖然Symbol長得像對象類型，不過在ES6規範中，人家就是原始類型。

函數聲明

TS中能夠對函數的形參以及返回值進行類型聲明。

function a(name: string, age: number): string {
    return `name:${name},age:${age}`;
}
複製代碼

類型斷言

類型斷言說白了就是告訴編譯器，你按照我指定的類型進行處理。

let value: any = 'a string';
const length: number = (<string>value).length;
複製代碼

編譯結果(正常編譯且正常運行)

let value = 'a string';
const length = value.length;
複製代碼

類型推斷

當沒有手動指定類型時，TS編譯器利用類型推斷來推斷類型。 若是因爲缺少聲明而不能推斷出類型，那麼它的類型被視做默認的動態 any 類型。

let num = 2; // 推斷爲number類型
複製代碼

函數

TS函數與JS函數沒有大的區別，多了一個類型系統。

function test(name: string) { // 自動推斷返回類型爲string
    return name;
}
複製代碼

可選參數

TS中函數每一個形參都是必須的，固然你能夠傳遞null和undefined，由於他們是值。可是在JS中，每一個形參都是可選的，沒傳的狀況下取值會獲得undefined。 TS中在參數名後面使用?號指明該參數爲可選參數

function test(name: string, age?: number) {
    console.log(`${name}:${age}`);
}
test('a'); // 輸出 a:undefined
複製代碼

默認參數

與ES6一致，TS也的函數也支持默認參數。須要注意的是可選參數和默認參數是互斥的。由於若是使用了默認參數，無論外部傳不傳值，取值的時候都是有值的，和可選參數矛盾。

function test(name: string, age: number = 10) {
    console.log(`${name}:${age}`)
}
test('a'); // 輸出 a:10
複製代碼

剩餘參數

剩餘參數和ES6表現一致，可是多了類型聲明：

function test(name1: string, ...names: string[]) {
    console.log(name1, names);
}
test('1','2','3');// 輸出 1 ['2', '3']
複製代碼

this執行

TS中this指向和JS一致，這裏不作贅述。

結語

未完待續~歡迎加我微信交流TS相關的知識~