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

你可能感兴趣的:(TypeScript)