七週七種前端框架三: Angular2 之 TypeScript

TypeScript 是什麼

有了擁抱ES6的TypeScript 果斷可以拋棄 CoffeeScript 和 Babel了。

TypeScript 是ES6的一個超集，也就是完整包含了全部ES6特性，並且還引入了強類型和註解。

TypeScript = ES6 + 強類型 + Annotation

不要用 CoffeeScript 了，因爲他的語法大部分都和ES6是不一樣，並不符合JS的發展方向。

不要被標題誤導，TypeScript 和 Angular2 並沒什麼關係 只是Angular2默認用TypeScript寫的，這應該會導致TypeScript火起來。

TypeScript 怎麼用

你可以安裝 tsc 來把 TypeScript 編譯成 ES5的代碼：

 npm install -g tsc

然後 tsc -p src/ 就行了。

tsc還有watch模式，通過 -w 參數開啓。

在src目錄下可以通過 tsconfig.json 來配置，比如這樣配置：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

TypeScript的語法

TypeScript 兼容ES6的語法，可以參考我之前的博客，對ES6的語法做了很多介紹。這裏挑一些重點說一下：

class

按照ES6的規範，可以直接定義一個類：

class AppComponent {
  public title = 'Tour of Heroes';
  public heroes;

  public selectedHero: Hero;

  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }

  public onSelect(hero: Hero) {
    this.selectedHero = hero;
  }

  public getSelectedClass(hero: Hero) {
    return { "selected" : hero == this.selectedHero }
  }
}

interface

這個也是ES6中沒有的定義的，接口絕對是一個非常重要的特性，不然JS怎麼面向接口編程呢。

interface Person {
    firstname: string;
    lastname: string;
}

然後可以通過 implements 關鍵字聲明一個類實現了某個接口：

interface ClockInterface {
    currentTime: Date;
}

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

mixins

這個mixins 看起來非常像繼承，不過實際上確實只是把相關的屬性和方法mixin進去了，並不存在父子關係。而且關鍵字竟然也是 implements:

class SmartObject implements Disposable, Activatable {
//...
}

註解

註解可以讓我們把配置和業務邏輯分開，真正實現代碼的時候會變得很優雅，比如這樣：

@Injectable()
export class HeroService {
  getHeroes() {
    var HEROES: Hero[] = [
      { "id": 11, "name": "Mr. Nice" },
      { "id": 12, "name": "Narco" }
    ];
    return HEROES;
  }
}

這樣 HeroService 就是一個普通的類，加上一個註解就變成了一個可注入的服務。

強類型

TypeScript 允許我們聲明變量的類型，把JS變成了一個強類型語言：

可以在聲明變量的時候帶上類型：

 var name:string;

可以在參數中聲明類型：

 function(name: string) {}

也可以使用 類和接口作爲類型：

class Animal {
    feet: number;
    constructor(name: string, numFeet: number) { }
}

class Size {
    feet: number;
    constructor(numFeet: number) { }
}

var a: Animal;
var s: Size;

字符串模板

字符串模板有兩個作用，一個是可以寫多行字符串，另一個就是可以直接嵌入當前作用域的變量：

// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript this is
 not legal.`

// String interpolation
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

模塊管理

非常非常重要的一個特性，不必再用 requirejs/browserify 之類的工具，直接用 TypeScript打包就行了。通過 export 導出模塊，通過 import 導入模塊：

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));