TypeScript型別系統

承接TS系列上一篇的型別系統介紹：從0開始的TypeScript（一）

型別系統是TypeScript中一個重要的概念，

TypeScript里型別可以隱式撰寫也可以顯式撰寫

型別的隱式和顯式

隱式 ??

在TypeScript中，回嘗試推斷出盡可能多的型別資訊，以便在開發程序中以最小生產力成本提供型別安全，

在下面的例子中TypeScript會知道變數型別，并且會給出錯誤提示， 如果是在JavaScript中，這樣的撰寫方式是可以的，但是在TypeScript是會出現報錯的，這是由于TypeScript存在型別系統

var foo = 123;
foo = '456';

效果：

顯式 ??

在型別的賦值中，TypeScript可以使用注釋來表明型別，好處：

• 幫助編譯器，更重要的是未來下一個閱讀代碼的開發人員記錄內容
• 強制編譯器看到應該看到的內容，自己對代碼的理解和代碼的演算法分析相匹配

在TypeScript中可以使用后綴型別注釋，由開發者來告訴 TS 變數是什么型別 (如果賦值的型別與后綴型別不同，就會直接報錯)：

var foo1: number = 123;
var foo2: number = '123';  // Type '"123"' is not assignable to type 'number' 
var foo3: string = '123';
var foo4: string = 123;  // Type '123' is not assignable to type 'string'.

型別錯誤不會阻止JavaScript生成

在使用tsc編譯.ts檔案時，即使存在編譯錯誤，在默認情況，TypeScript也會盡可能發出有效的JavaScript檔案
如上面的后綴型別注釋，盡管出現報錯，但是js檔案依舊生成了

因此,您可以逐步將 JavaScript 代碼升級到 TypeScript，這與許多其他語言編譯器的作業方式截然不同，是遷移到TypeScript的另一個原因， 🌌

型別可以是環境

TypeScript的一個主要設計目標是可以安全、輕松的使用現有的JavaScript庫，

TypeScript通過宣告 ?? 來實作這一點，

比如jQuery簡單示例：

$('.num').show();  //  Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.

如果想要快速修復，可以使用declare在TypeScript申明，確實有一個$

declare定義的型別只會用于編譯時的檢查，在編譯結果中會被洗掉

declare var $: any
$('.num').show();

TypeScript基礎型別

為了讓程式有價值，TypeScript支持與JavaScript幾乎相同的資料型別

在JavaScript中存在的資料型別，TypeScript也都存在

布林值

在JavaScript和TypeScript中是boolean，資料型別就是true/false

let flag: boolean = false;

數字

number型別，在JavaScript和TypeScript中，所有的數字都是浮點數，

此外： TypeScript還支持引入的二進制和八進制字面量，
在number型別中，還可以直接賦值為NaN和Infinity

NaN: 大多數定長的整數格式無法顯式表示無效資料
Infinity: 無限大的資料

TS檔案：

let num1: number = 10;   // 十進制
let num2: number = 0xf00d;  // 十六進制
let num3: number = 0b1010101;  // 二進制
let num4: number = 0o744;  // 八進制
let num5: number = NaN;
let num6: number = Infinity;

編譯后： 因為JavaScript支持十六進制，所以ts中賦值的num2沒有被轉換成十進制資料

var num1 = 10; // 十進制
var num2 = 0xf00d; // 十六進制
var num3 = 85; // 二進制
var num4 = 484; // 八進制
var num5 = NaN;
var num6 = Infinity;

字串

string型別，可以使用雙引號或單引號表示字串，或者使用``模板字串

TS檔案：

let str1: string = 'hello';
let str2: string = 'world';
let str3: string = `${num1} +

${num2}`;

編譯后：

var str1 = 'hello';
var str2 = 'world';
var str3 = num1 + " +\n\n" + num2;

陣列

在TypeScript中，有兩種型別注釋方式可以定義陣列

1. 在元素型別后加[] — 資料型別[]
2. 使用陣列泛型 — Array<資料型別>

TypeScript只允許陣列中包括一種資料型別的值, 如果想要為陣列添加不同型別的值，需要使用 聯合型別

創建聯合型別的語法格式如下：

Type1|Type2|Type3

TS聯合型別可參考：https://www.runoob.com/typescript/ts-union.html

TS:

let arr1: string[] = ['1', '2', '3'];
let arr2: Array<number> = [1, 2, 3];
let arr3: number[] = [1, '2'];  // Type 'string' is not assignable to type 'number'
let arr4: (number|string)[] = [1, '2'];  //聯合型別

JS:

var arr1 = ['1', '2', '3'];
var arr2 = [1, 2, 3];
var arr3 = [1, '2']; // Type 'string' is not assignable to type 'number'
var arr4 = [1, '2']; //聯合型別

這樣來看，使用后綴型別注釋好像寫陣列更加麻煩了，
但實際在大型專案中，會起到很棒的效果，

比如定義一個由個體資料組成的陣列，個體具有name、age、score三種屬性， name是字串，age是數值，score是是否通過的布林值，

TS：

// 定義person陣列的組成形式
let person: { name: string, age: number, score: boolean }[];
// 按照定義的格式添加陣列元素
person = [{name: 'kcj', age: 18, score: true}]
person.push({name: 'anxi', age: 19, score: false})

這樣一來，如果有什么值不符合規范，能夠在編譯程序中很輕松的看出來， 是不是和class類有些相像

Null和Undefined

Null和undefined可以直接賦值， 一般使用undefined，不要使用null

let jk: string|undefined|null;
jk = null;
jk = undefined;