都2021年了凯砍，TypeScript已經(jīng)成為大廠React應(yīng)用的標(biāo)配购笆，也成為前端程序員的必備技能之一爸业。
Vue也完全支持了TypeScript矫渔，基本所有用流行框架搭建的應(yīng)用都可以使用TypeScript崔列。
本文將從TypeScript是什么添诉、TypeScript的作用與優(yōu)勢(shì)屁桑、如何學(xué)習(xí)TypeScript三個(gè)角度幫助大家入門TypeScript。（以下簡(jiǎn)稱ts）
TypeScript是什么
TypeScript extends JavaScript by adding types.
- ts通過(guò)增加類型栏赴，來(lái)擴(kuò)展js
- 換句話說(shuō)蘑斧，ts是js類型的超集
- ts最終也是編譯成js來(lái)運(yùn)行
- ts由微軟于2012年10月發(fā)布，此后越來(lái)越流行
我的理解：ts不是一門新的語(yǔ)言须眷，而是基于js的一種新語(yǔ)法糖竖瘾。
TypeScript的作用與優(yōu)勢(shì)
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.
- 通過(guò)理解js，在運(yùn)行代碼前花颗，ts節(jié)省了你用來(lái)捕獲錯(cuò)誤捕传、修復(fù)類型錯(cuò)誤的時(shí)間
- 任何瀏覽器、任何操作系統(tǒng)扩劝、任何可以運(yùn)行js的地方庸论，都可以運(yùn)行ts
- 完全開源
我的理解：
1. ts最主要的作用就是靜態(tài)類型檢查职辅，規(guī)避js弱類型的弊端，在開發(fā)階段就避免因類型原因?qū)е碌腷ug
2. 對(duì)于其他語(yǔ)言（如java）轉(zhuǎn)到前端的開發(fā)人員友好聂示，ts的語(yǔ)法糖參考了許多面向?qū)ο笳Z(yǔ)言的語(yǔ)法
3. 清晰的類型定義與代碼結(jié)構(gòu)域携，使后期維護(hù)更為便利
4. TypeScript已經(jīng)相對(duì)成熟了，網(wǎng)上的資料也很齊全催什，大部分的庫(kù)涵亏、框架以及IDE都對(duì)TypeScript做了很好支持
如何學(xué)習(xí)TypeScript
學(xué)習(xí)一門新技術(shù)，最好的方法蒲凶，一定是結(jié)合官網(wǎng)气筋，邊閱讀邊實(shí)踐。
Ts官網(wǎng)分英文官網(wǎng)和中文官網(wǎng)旋圆，建議閱讀英文官網(wǎng)宠默，原因：
- 中文官網(wǎng)更新不及時(shí)，英文官網(wǎng)已經(jīng)更新Ts 4.1版本了灵巧，中文的才3.1
- 中文官網(wǎng)充滿了廣告 (＃￣～￣＃)
- 英文官網(wǎng)版權(quán)到2021年搀矫，中文官網(wǎng)才到2018年，已經(jīng)過(guò)期了刻肄，似乎已經(jīng)很久沒維護(hù)了瓤球。。
本文的目的是幫助新手快速入門ts敏弃，對(duì)其有概念后卦羡，再通過(guò)自己在項(xiàng)目中運(yùn)用來(lái)進(jìn)行深入。
安裝與編譯
安裝（任選一種）
npm install -g typescript- 在支持ts的IDE（如vscode）上安裝ts插件
編譯
ts文件以.ts為后綴麦到，可通過(guò)tsc指令將ts文件編譯成js文件：
tsc greeter.ts
再來(lái)介紹幾個(gè)最常用的基本概念：基本類型绿饵、接口、泛型瓶颠、類
基本類型
眾所周知拟赊，js有6種數(shù)據(jù)類型：數(shù)字（number）、字符串（string）粹淋、布爾值（boolean）吸祟、undefined、null桃移、對(duì)象（Object）欢搜。
但是，js是弱類型語(yǔ)言谴轮，定義變量時(shí)是某種類型炒瘟，其后也可以對(duì)其類型進(jìn)行隨意更改，并且例如if()等語(yǔ)法會(huì)對(duì)變量進(jìn)行隱式轉(zhuǎn)換第步，這些操作極易引發(fā)預(yù)期之外的錯(cuò)誤疮装，在其他面向?qū)ο笳Z(yǔ)言中也是絕對(duì)不被允許的缘琅。
ts對(duì)變量類型進(jìn)行了強(qiáng)定義與擴(kuò)展，在定義或引用之初就特定類型：
// 1. 布爾值
let isDone: boolean = false;
// 2. 數(shù)字
let decLiteral: number = 6;
// 3. 字符串
let name: string = "bob";
// 4. 數(shù)組：成員相同類型
let list: number[] = [1, 2, 3];
// 5. 元祖：成員不同類型
let x: [string, number];
// 6. 枚舉：適用于映射關(guān)系廓推、關(guān)聯(lián)常量
enum Color { Red = 1, Green = 2, Blue = 4 }
let c: Color = Color.Green;
// 7. Any：適用未知類型變量刷袍，定義之后可以改變類型，盡量少用
let notSure: any = 4;
// 8. Void：適用函數(shù)無(wú)返回值
function warnUser(): void {
console.log("This is my warning message");
}
// 9. Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
// 10. Never
// 返回never的函數(shù)必須存在無(wú)法達(dá)到的終點(diǎn)
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
類型斷言
當(dāng)開發(fā)人員比ts更清楚某個(gè)值的類型樊展，且該場(chǎng)景下必須為該類型呻纹，可使用類型斷言：
// 二者等價(jià)
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
接口
將復(fù)雜結(jié)構(gòu)的數(shù)據(jù)類型抽離出來(lái)，定義成一個(gè)單獨(dú)的數(shù)據(jù)专缠，這就是接口雷酪，關(guān)鍵字interface。
將接口單獨(dú)抽離涝婉，可使代碼結(jié)構(gòu)更加清晰哥力，且便于復(fù)用。
// ?代表可選參數(shù)墩弯，其余為必選
interface SquareConfig {
color: string;
width?: number;
}
一般可以在項(xiàng)目src或者每個(gè)模塊下新建types目錄吩跋，用于存放該模塊下所有接口：
src
|- types
| |- index.d.ts
| |- data.d.ts
|- components
泛型
- 泛型是新手比較難理解和使用的概念。
- 它的作用是渔工，使組件能支持未來(lái)的數(shù)據(jù)類型锌钮，即當(dāng)前不能確定是何類型，未來(lái)確定類型后引矩，能靈活使用該類型轧粟。
- 適用大型系統(tǒng)中的復(fù)雜不確定場(chǎng)景。
- 在C#和Java中脓魏，都可以使用泛型來(lái)創(chuàng)建可重用的組件。
function identity<T>(arg: T): T {
return arg;
}
上例中通惫，arg為不確定類型的參數(shù)茂翔，若函數(shù)中或返回值需要使用該參數(shù)類型，則可用泛型T來(lái)代替并直接使用履腋。
類
后端同學(xué)或使用過(guò)其他面向?qū)ο笳Z(yǔ)言的同學(xué)會(huì)對(duì)這個(gè)概念比較熟悉珊燎，因?yàn)轭愒谶@些語(yǔ)言中是已存在的基本概念，即基于類的繼承并且對(duì)象是由類構(gòu)建出來(lái)的遵湖。
實(shí)際上悔政，ES6已經(jīng)將類的概念納入到了js基本語(yǔ)法中，大家可以放心使用延旧。
類的寫法
// 該類包括greeting屬性谋国、構(gòu)造函數(shù)、greet方法
// this代表該構(gòu)造函數(shù)本身
// greeter為該類的實(shí)例對(duì)象
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
繼承
// 通過(guò)extends關(guān)鍵字迁沫，子類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();
公共芦瘾，私有與受保護(hù)的修飾符
// public-自由訪問
// private-只能在聲明類中訪問
// protected-只能在聲明類和子類中訪問
// 若不加修飾符 默認(rèn)為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修飾符
// 只讀屬性捌蚊，無(wú)法修改
// 必須在聲明時(shí)或構(gòu)造函數(shù)里被初始化
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"; // 錯(cuò)誤! name 是只讀的.
結(jié)語(yǔ)
以上為TypeScript中最常用的概念，本文以最簡(jiǎn)單的例子進(jìn)行論述近弟，目的是讓讀者快速入門缅糟。
看完后對(duì)ts有了基本認(rèn)識(shí)，已經(jīng)可以在項(xiàng)目中使用起來(lái)了祷愉。
之后的進(jìn)階與深入窗宦，請(qǐng)結(jié)合官網(wǎng)，在實(shí)踐中獲得真理二鳄！
