什么是typescript？

• TS語(yǔ)言本身也是開(kāi)源的
• 來(lái)自于一線大廠MicroSoft
• Anders Hejlsberg領(lǐng)銜開(kāi)發(fā)

TypeScript 是 JavaScript 的一個(gè)超集，主要提供了類型系統(tǒng)和對(duì) ES6 的支持，它由 Microsoft 開(kāi)發(fā)，代碼開(kāi)源于 GitHub 上。TypeScript中文網(wǎng)站

官網(wǎng)的定義：

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

翻譯成中文即是：

TypeScript 是 JavaScript 的類型的超集，它可以編譯成純 JavaScript。編譯出來(lái)的 JavaScript 可以運(yùn)行在任何瀏覽器上。TypeScript 編譯工具可以運(yùn)行在任何服務(wù)器和任何系統(tǒng)上。TypeScript 是開(kāi)源的。

TypeScript的優(yōu)勢(shì)

TypeScript 增加了代碼的可讀性和可維護(hù)性

• 類型系統(tǒng)實(shí)際上是最好的文檔，大部分的函數(shù)看看類型的定義就可以知道如何使用了
• 可以在編譯階段就發(fā)現(xiàn)大部分錯(cuò)誤，這總比在運(yùn)行時(shí)候出錯(cuò)好
• 增強(qiáng)了編輯器和 IDE 的功能，包括代碼補(bǔ)全、接口提示、跳轉(zhuǎn)到定義、重構(gòu)等

TypeScript 非常包容

• TypeScript 是 JavaScript 的超集，.js文件可以直接重命名為 .ts即可
• 即使不顯式的定義類型，也能夠自動(dòng)做出類型推論
• 可以定義從簡(jiǎn)單到復(fù)雜的一切類型
• 即使 TypeScript 編譯報(bào)錯(cuò)，也可以生成 JavaScript 文件
• 兼容第三方庫(kù)，即使第三方庫(kù)不是用 TypeScript 寫的，也可以編寫單獨(dú)的類型文件供 TypeScript 讀取

TypeScript 擁有活躍的社區(qū)

• 大部分第三方庫(kù)都有提供給 TypeScript 的類型定義文件
• Google 開(kāi)發(fā)的 Angular2 就是使用 TypeScript 編寫的
• ES6 的一部分特性是借鑒的 TypeScript 的（這條需要來(lái)源）
• TypeScript 擁抱了 ES6 規(guī)范，也支持部分 ES7 草案的規(guī)范

TypeScript 的缺點(diǎn)

• 有一定的學(xué)習(xí)成本，需要理解接口（Interfaces）、泛型（Generics）、類（Classes）、枚舉類型（Enums）等前端工程師可能不是很熟悉的東西。而且它的中文資料也不多
• 短期可能會(huì)增加一些開(kāi)發(fā)成本，畢竟要多寫一些類型的定義，不過(guò)對(duì)于一個(gè)需要長(zhǎng)期維護(hù)的項(xiàng)目，TypeScript 能夠減少其維護(hù)成本（這條需要來(lái)源）
• 集成到構(gòu)建流程需要一些工作量
• 可能和一些庫(kù)結(jié)合的不是很完美（這條需要舉例）

環(huán)境搭建

npm install -g typescript
npm install @types/node --dev-save
mkdir ts-demo
npm init
tsc --init

安裝完成之后，就有了 tsc 命令。編譯一個(gè) TypeScript 文件很簡(jiǎn)單：

tsc hello.ts

約定使用 TypeScript 編寫的文件以 .ts 為后綴。

上手實(shí)例

創(chuàng)建一個(gè)Animal類

Animal.ts

export class Animal{
    constructor(){
    }

    public eat():void{
        console.log("動(dòng)物吃生的東西！");
    }

    public run():void{
        console.log("動(dòng)物隨機(jī)到處跑！");
    }
}

創(chuàng)建一個(gè)Person類繼承Animal類

Person.ts

import {Animal} from "./Animal";

export class Person extends Animal{
   constructor() {
       super();
   }

   public eat():void{
       console.log("人類吃熟的東西！");
   }

   public run():void{
       console.log("人類直立行走！");
   }
}

入口文件main.ts

import {Animal} from "./Animal";
import {Person} from "./Person";

let animal=new Animal();
animal.eat();
animal.run();

let person=new Person();
person.eat();
person.run();

編譯后執(zhí)行main.ts

至少要掌握以下TypeScript特性

• 繼承
• 接口
• 裝飾器
• getter和setter