都2021年了，TypeScript已經成為大廠React應用的標配，也成為前端程序員的必備技能之一。
Vue也完全支持了TypeScript，基本所有用流行框架搭建的應用都可以使用TypeScript。
本文將從TypeScript是什么、TypeScript的作用與優勢、如何學習TypeScript三個角度幫助大家入門TypeScript。（以下簡稱ts）
TypeScript是什么
TypeScript extends JavaScript by adding types.
- ts通過增加類型，來擴展js
- 換句話說，ts是js類型的超集
- ts最終也是編譯成js來運行
- ts由微軟于2012年10月發布，此后越來越流行
我的理解：ts不是一門新的語言，而是基于js的一種新語法糖。
TypeScript的作用與優勢
By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code.
Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.
- 通過理解js，在運行代碼前，ts節省了你用來捕獲錯誤、修復類型錯誤的時間
- 任何瀏覽器、任何操作系統、任何可以運行js的地方，都可以運行ts
- 完全開源
我的理解：
1. ts最主要的作用就是靜態類型檢查，規避js弱類型的弊端，在開發階段就避免因類型原因導致的bug
2. 對于其他語言（如java）轉到前端的開發人員友好，ts的語法糖參考了許多面向對象語言的語法
3. 清晰的類型定義與代碼結構，使后期維護更為便利
4. TypeScript已經相對成熟了，網上的資料也很齊全，大部分的庫、框架以及IDE都對TypeScript做了很好支持
如何學習TypeScript
學習一門新技術，最好的方法，一定是結合官網，邊閱讀邊實踐。
Ts官網分英文官網和中文官網，建議閱讀英文官網，原因：
- 中文官網更新不及時，英文官網已經更新Ts 4.1版本了，中文的才3.1
- 中文官網充滿了廣告 (＃￣～￣＃)
- 英文官網版權到2021年，中文官網才到2018年，已經過期了，似乎已經很久沒維護了。。
本文的目的是幫助新手快速入門ts，對其有概念后，再通過自己在項目中運用來進行深入。
安裝與編譯
安裝（任選一種）
npm install -g typescript- 在支持ts的IDE（如vscode）上安裝ts插件
編譯
ts文件以.ts為后綴，可通過tsc指令將ts文件編譯成js文件：
tsc greeter.ts
再來介紹幾個最常用的基本概念：基本類型、接口、泛型、類
基本類型
眾所周知，js有6種數據類型：數字（number）、字符串（string）、布爾值（boolean）、undefined、null、對象（Object）。
但是，js是弱類型語言，定義變量時是某種類型，其后也可以對其類型進行隨意更改，并且例如if()等語法會對變量進行隱式轉換，這些操作極易引發預期之外的錯誤，在其他面向對象語言中也是絕對不被允許的。
ts對變量類型進行了強定義與擴展，在定義或引用之初就特定類型：
// 1. 布爾值
let isDone: boolean = false;
// 2. 數字
let decLiteral: number = 6;
// 3. 字符串
let name: string = "bob";
// 4. 數組：成員相同類型
let list: number[] = [1, 2, 3];
// 5. 元祖：成員不同類型
let x: [string, number];
// 6. 枚舉：適用于映射關系、關聯常量
enum Color { Red = 1, Green = 2, Blue = 4 }
let c: Color = Color.Green;
// 7. Any：適用未知類型變量，定義之后可以改變類型，盡量少用
let notSure: any = 4;
// 8. Void：適用函數無返回值
function warnUser(): void {
console.log("This is my warning message");
}
// 9. Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
// 10. Never
// 返回never的函數必須存在無法達到的終點
function error(message: string): never {
throw new Error(message);
}
// 11. Object
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
類型斷言
當開發人員比ts更清楚某個值的類型，且該場景下必須為該類型，可使用類型斷言：
// 二者等價
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
接口
將復雜結構的數據類型抽離出來，定義成一個單獨的數據，這就是接口，關鍵字interface。
將接口單獨抽離，可使代碼結構更加清晰，且便于復用。
// ?代表可選參數，其余為必選
interface SquareConfig {
color: string;
width?: number;
}
一般可以在項目src或者每個模塊下新建types目錄，用于存放該模塊下所有接口：
src
|- types
| |- index.d.ts
| |- data.d.ts
|- components
泛型
- 泛型是新手比較難理解和使用的概念。
- 它的作用是，使組件能支持未來的數據類型，即當前不能確定是何類型，未來確定類型后，能靈活使用該類型。
- 適用大型系統中的復雜不確定場景。
- 在C#和Java中，都可以使用泛型來創建可重用的組件。
function identity<T>(arg: T): T {
return arg;
}
上例中，arg為不確定類型的參數，若函數中或返回值需要使用該參數類型，則可用泛型T來代替并直接使用。
類
后端同學或使用過其他面向對象語言的同學會對這個概念比較熟悉，因為類在這些語言中是已存在的基本概念，即基于類的繼承并且對象是由類構建出來的。
實際上，ES6已經將類的概念納入到了js基本語法中，大家可以放心使用。
類的寫法
// 該類包括greeting屬性、構造函數、greet方法
// this代表該構造函數本身
// greeter為該類的實例對象
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
繼承
// 通過extends關鍵字，子類Dog從基類Animal中繼承了屬性與方法
class Animal {
move(distanceInMeters: number = 0) {
console.log(`Animal moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
}
const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();
公共，私有與受保護的修飾符
// public-自由訪問
// private-只能在聲明類中訪問
// protected-只能在聲明類和子類中訪問
// 若不加修飾符 默認為public
class Animal {
public name: string;
private age: number;
protected gender: string;
public constructor(theName: string) { this.name = theName; }
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
readonly修飾符
// 只讀屬性，無法修改
// 必須在聲明時或構造函數里被初始化
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 錯誤! name 是只讀的.
結語
以上為TypeScript中最常用的概念，本文以最簡單的例子進行論述，目的是讓讀者快速入門。
看完后對ts有了基本認識，已經可以在項目中使用起來了。
之后的進階與深入，請結合官網，在實踐中獲得真理！
