七周七种前端框架三: 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));