摘要：接下來來看一段代碼示例語法與語言比較當類型不對的時候，會提示錯誤編譯后語法聯想大致可以把它看成是加了類型系統的。

這篇文章是我在公司前端小組內部的演講分享稿，目的是教會大家使用 TypeScript，
這篇文章雖然標著基礎，但我指的基礎是學完后就能夠勝任 TypeScript 的開發工作。
從我分享完的效果來看，大家都學會了，效果還是好的。我把這篇分享稿發布出來，
希望能對大家的 TypeScript 學習有所幫助。

TypeScript 是由微軟發布的一款開源的編程語言。它是 JavaScript 的超集（兼容 JavaScript 代碼），其代碼必須經過編譯后，方可在 JavaScript 環境中運行，核心功能是類型系統和可以提前使用 ES 的新特性。

接下來來看一段代碼示例：

// TypeScript 語法
function add(x: number, y: number): number {
    const res: number = x + y;
    return res;
}

// 與 C 語言比較
int add(int x, int y) {
    int res = x + y;
    return res;
}

當類型不對的時候，IDE 會提示錯誤：

編譯后：

// JavaScript 語法
function add(x, y) {
    const res = x + y;
    return res;
}

聯想：大致可以把它看成是加了類型系統的 Babel。

類型系統可以在代碼編譯階段就可以發現潛在的變量類型問題，甚至在開發階段，IDE 就可以幫助我們找到這些潛在的問題，避免了項目在上線后才發現變量類型不對的錯誤。

TypeScript 是前端開發的趨勢，有些特性還可能會成為 ES 的新標準，Vue 3.0 也會采用 TypeScript 作為開發語言，當你想看源碼的時候不至于看不懂，跟著趨勢走肯定是沒錯的。

減少類型校驗等無用的代碼書寫。

可以提前享受 ES 新特性帶來的便利。

向 qian 看，qian 途。

$ yarn global add typescript

// 測試是否安裝成功
$ tsc -v
Version 3.4.5

// add.ts
function add(x: number, y: number): number {
    const res: number = x + y;
    return res;
}
export default add;

$ tsc add.ts

// add.js
function add(x, y) {
    const res = x + y;
    return res;
}
export default add;

適用于邊開發邊看結果的情況：

$ tsc -w add.ts
Starting compilation in watch mode...

Watching for file changes.

// 布爾值
let isDone: boolean = false;
// 數值
let age: number = 12;
// 字符串
let name: string = "Jay";
// 數組
let list: number[] = [1, 2, 3];
let list: Array = [1, 2, 3];
// 對象
let mokey: object = {name: "wu kong"};
// 空值，表示沒有返回值
function print(): void {}
// 任意值
let goods: any = {};
let goods: any = 2019;
// 未指定類型，視為任意值
let goods;
// 類型推斷
let name = "Jay";
name = 123; // 報錯
// 聯合類型
let name: string | number;
name = "Jay";
name = 123;

類

類是對屬性和方法的封裝

類的示例：

// 跟 JavaScript 的類相似，多了訪問控制等關鍵詞
class Monkey {
    public height: number;
    private age: number = 12;
    public static mkName: string = "kinkong";
    private static action: string = "jump";
    
    constructor(height: number) {
        this.height = height;
    }
    public getAge(): number {
        return this.age;
    }
}

const monkey = new Monkey(120);
monkey.getAge();

const height = monkey.height;
const age = monkey.age; // 報錯
const mkName = Monkey.mkName;
const action = Monkey.action; // 報錯

類的繼承

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);

protected、private、readonly 和 super

protected 和 private 都不能從外部訪問

protected 可以被繼承，private 不可以

class Person {
    protected name: string;
    private age: number;
    constructor(name: string, age: number) { 
        this.name = name; 
        this.age = age;
    }
}

class Employee extends Person {
    private readonly initial: string = "abc";
    private readonly department: string;
    constructor(name: string, department: string) {
        super(name, 1);
        this.department = department;
    }
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
    public getAge() {
        return this.age;
    }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error

let passcode = "secret passcode";

class Employee {
    private _fullName: string;

    get fullName(): string {
        return this._fullName;
    }

    set fullName(newName: string) {
        if (passcode && passcode == "secret passcode") {
            this._fullName = newName;
        }
        else {
            console.log("Error: Unauthorized update of employee!");
        }
    }
}

let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
    console.log(employee.fullName);
}

類可以用于接口繼承

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

接口

接口是用來定義規范的，常常用作類型說明。
接口的示例：

// 定義規范，限定類型
interface Point {
    x: number;
    y: number;
    // 可選屬性
    z?: number;
}
let pt: Ponit = {x: 1, y: 1, z: 1};

function setPoint(point: Point): void {}
setPoint({x: 1, y: 1});

// 實現接口
class point implements Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    public getPoint(): object {
        return {
            x: this.x,
            y: this.y,
        }
    }
}

const p = new point(3, 4);
p.getPoint();

接口繼承接口

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

初始化參數規范

interface ClockConstructor {
    new (hour: number, minute: number);
}

class Clock implements ClockConstructor {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

當 TypeScript 提供的類型不夠用時，可以用來自定義類型，供自己使用。

// type 定義新類型，相當于類型別名
type myType = string | number | boolean
// 使用：
const foo: myType = "foo"

// type 定義函數類型
type hello = (msg: string) => void

// type 對象類型
type WebSite = {
    url: string;
    title: number;
}

命名空間主要有兩個方面的用途：

組織代碼。組織一些具有內在聯系的特性和對象，能夠使代碼更加清晰。

避免名稱沖突。

namespace Validator {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }

    const lettersRegexp = /^[A-Za-z]+$/;
    const numberRegexp = /^[0-9]+$/;

// 當聲明一個命名空間的時候，所有實體部分默認是私有的，可以使用 export 關鍵字導出公共部分。
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return lettersRegexp.test(s);
        }
    }

    export class ZipCodeValidator implements StringValidator {
        isAcceptable(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}
new Validator.LettersOnlyValidator();

interface MyClassMethodOptions {
    name?: string;
    age?: number;
}

namespace MyClass {
  export interface MyClassMethodOptions {
    width?: number;
    height?: number;
  }
}

使用外部定義的 namespace

/// 
const v = new Validator.LettersOnlyValidator();

泛型允許在強類型程序設計語言中編寫代碼時，使用一些以后才指定的類型，在實際調用時才去指定泛型的類型。

舉例：

// 模擬服務，提供不同的數據。這里模擬了一個字符串和一個數值
const service = {
    getStringValue: function() {
        return "a string value";
    },
    getNumberValue: function() {
        return 20;
    }
};

// 處理數據的中間件
function middleware(value: string): string {
    return value;
}
// 沒問題
middleware(service.getStringValue());
// 報錯：參數類型不對
middleware(service.getNumberValue());
// 設成 any 行不行？
function middleware(value: any): any
// 多寫幾個 middleware 行不行？
function middleware1(value: string): string { ... }
function middleware2(value: number): number { ... }

// 改為泛型
function middleware(value: T): T {
    return value;
}
// 使用
middleware(service.getStringValue());
middleware(service.getNumberValue());

更多內容查看文章：泛型

如果把 add.js 發布成一個 npm 包，別人在使用的時候 IDE 的提示往往都不太友好：

那么如何能讓 IDE 給 add 方法加上類型提示和參數提示呢？

TypeScript 提供了 xxx.d.ts 文件來給 IDE 使用。

xxx.d.ts 叫做聲明文件，一般用于類型提示和模塊補充，可以自動生成，也可以手動編寫，一般情況下是不用我們手動編寫的。

// 加上 -d 參數，就會生成 add.d.ts 文件
$ tsc -d add.ts

// add.d.ts
declare function add(x: number, y: number): number;
export default add;

declare 關鍵字
用于聲明你需要的變量、函數、類等，聲明以后 IDE 就可以根據它來進行類型提示。

如果有 add.d.ts 文件，那么它就承擔了類型提示的任務：

同時也相當于 add 方法的接口文檔：

有以下兩個場景會去手動創建這個文件：

給未使用 TypeScript 的 js 模塊編寫聲明文件，可以當做交接文檔用；使用別人沒有寫聲明文件的 js 庫。

模塊補充。

// 定義模塊補充的語法
declare module "filePath" {
   
}

module-augmentation

使用場景：vue-shim.d.ts 文件，為了讓 TypeScript 識別 .vue 文件。

// 文件內容
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

增強類型以配合插件使用

指定輸出目錄：

$ tsc -d --strict -m ESNext --outDir lib index.ts

tsc 的所有參數可以通過執行：tsc -h來查看。

避免書寫冗長的命令，豐富的配置項。

生成 tsconfig.json 文件：

$ tsc --init

常用配置項解讀：

{
  "compilerOptions": {
    "target": "ES5", /* target用于指定編譯之后的版本目標 version: "ES3" (default), "ES5", "ES2015", "ES2016", "ES2017","ES2018" or "ESNEXT". */
    "module": "ESNext", /* 用來指定要使用的模塊標準: "none", "commonjs", "amd", "system", "umd", "es2015", or "ESNext". */
    "declaration": true,  /* 生成對應的 ".d.ts" 聲明文件 */
    "outDir": "./lib", /* 指定編譯輸出目錄 */
    "esModuleInterop": true, /* 通過為導入內容創建命名空間，實現CommonJS和ES模塊之間的互操作性 */
    "experimentalDecorators": true, /* 啟用 ES7 裝飾器語法 */
  }
}

查看更多配置項

配置后，執行以下命令，就會讀取配置文件：

$ tsc add.ts

上述的方法適用于開發命令行工具，比如 @xiyun/cli，開發 web 應用還是不太方便。

如果想要方便地開發 web 應用，比如：開啟前端服務、模塊熱加載等，就需要配合構建工具使用。

點擊查看配合 webpack 開發 web 應用源碼

parcel：極速零配置 Web 應用打包工具。

聯想：可以看成是已經配置好了的 webpack。

全局安裝 parcel 工具：

$ yarn global add parcel-bundler

運行：

$ parcel index.html

它就會幫你生成 package.json，自動安裝 typeScript，啟動好開發服務，并支持熱加載。

最方便快捷：vue create my-app，選擇 TypeScript。

如果要改造現有項目：

增加 dev 依賴包：

"devDependencies": {
    "@vue/cli-plugin-typescript": "^3.8.0",
    "typescript": "^3.4.3",
  }

增加 tsconfig.json 配置

更改文件后綴：main.js --> main.ts

組件中指定 lang：

在 src 目錄下加上：vue-shim.d.ts 文件，為了讓 TypeScript 識別 .vue 文件。

// 文件內容
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

Vue 支持 TypeScript 的配置參考

另外一種語法

如果想要用這種語法來寫 Vue 組件：

import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}

那么需要加上這兩個依賴：

"dependencies": {
    // 官網出的ts支持包
    "vue-class-component": "^7.0.2",
    // 對ts支持包更好封裝的裝飾器
    "vue-property-decorator": "^8.1.0"
  },

Vue 官方對 TypeScript 的說明

創建應用時加上--typescript參數即可：

$ create-react-app my-app --typescript

TypeScript 官方文檔
TypeScript Declare Keyword
Vue 對 模塊補充的說明