Angular：了解Typescript

Angular是用Typescript构建的。因此在学习Angular之前有必要了解一下Typescript。

[ 类型 ]

Typescript增加了类型系统，好处是：

　　1. 有助于代码编写，预防在编译期出现的bug

　　2. 有助于代码阅读，更清晰的表现代码意图

如：

var name: string = 'Jay';            // 定义一个string类型的变量 name

在声明函数时，也可以为函数参数和返回值指定类型：

function greetText(name: string): string { return "Hello" + name; }

[ 内置类型 ]

字符串：string

var name : string = 'Felia'

数字：number

var age : number = 36

布尔类型：boolean

var married : boolean = true

数组：Array

可以用Array<type>或者type[]语法来为数组条目指定元素类型：

var jobs : Array<string> = ['IBM' , 'Microsoft' , 'Google']; var jobs : string[] = ['IBM' , 'Microsoft' , 'Google'];

enum

枚举是一组可命名数值的集合。比如，如果想拿到某人的一系列角色，可以这么写：

enum Role {Employee, Manager, Admin}; var role : Role = Role.Employee;

默认情况下，枚举类型的初始值是0。可以调整初始值。

enum Role {Employee = 3, Manager, Admin}; var role : Role = Role.Employee;

枚举中其他项的值是依次递增的，这意味着 Role.Manager的值为4，Role.Admin的值为5。

还可以从枚举的值来反查它的名称：

enum Role {Employee, Manager, Admin}; console.log('Roles:',Role[0],',',Role[1],'and',Role[2]);

any类型

如果没有为变量指定类型，那它的默认类型就是any。在typescript中，any类型的变量可以接受任意类型的数据：

var something : any = 'as string'; something = 1; something = [1,2,3];

"无"类型

void 意味着我们不期望那里有类型。它通常用作函数的返回值，表示没有任何返回值：

function setName(name : string) : void { this.name = name; }

[ 类 ]

用 class 关键字来定义一个类：class Vehicle {  } 。类可以包含属性、方法以及构造函数。

属性

属性定义了类实例对象的数据。比如叫Person的类可能有first_name、last_name和age属性。Person类的声明是这样的：

class Person {
    first_name : string;
    last_name : string;
    age : number;
}

方法

方法是运行在类对象实例上下文中的函数。在调用对象的方法之前，必须要有这个对象的实例。

如果我们希望问候某个Person，就可以这样写：

class Person { first_name : string; last_name : string; age : number; greet() { console.log("Hello", this.first_name); } }

如果没有显式声明过方法的返回类型和返回值，就会假定它可能返回任何东西。

调用greet方法之前，我们要有一个Person类的实例对象：

var p : Person; p = new Person(); p.first_name = 'Felipe'; p.greet();

我们还可以将对象的声明和实例化缩写为一行代码：

var p : Person = new Person();

假设我们希望Person类有一个带返回值的方法。比如，要获取某个Person在数年后的年龄，我们可以这样写：

class Person { first_name : string; last_name : string; age : number; greet() { console.log("Hello", this.first_name); } ageInYears(years : number) : number { return this.age + years; } } var p : Person = new Person(); p.age = 6; p.ageInYears(12); // -> 18

构造函数

构造函数是当类进行实例化时执行的特殊函数，必须命名为constructor。因为构造函数是在类被实例化时调用的，所以它们可以有输入参数但不能有任何返回值。

当没有显式地定义构造函数时，将自动创建一个无参构造函数：

class Vehicle{} var v = new Vehicle();

它等价于：

class Vehicle { constructor(){ } } var v = new Vehicle(); 

在Typescript中，每个类只能有一个构造函数。

我们可以使用带参数的构造函数来将对象的创建工作参数化：

class Person { first_name: string; last_name: string; age: number; constructor(first_name: string, last_name: string, age: number) { this.first_name = first_name; this.last_name = last_name; this.age = age; } greet() { console.log("Hello", this.first_name); } ageInYears(years: number): number { return this.age + years; } } 

用下面这种方法重写前面的例子要容易些：

var p: Person = new Person('Felipe', 'Coury', 36); p.greet();

当创建这个对象的时候，其姓名、年龄都会被初始化。

继承

继承表明子类能够从父类得到它的行为。然后，我们就可以在这个子类中重写、修改以及添加行为。

继承是TypeScript的核心语法，并不像ES5那样要靠原型链实现，用extends关键字实现。
为了说明这一点，我们创建一个Report类：

class Report { data: Array<string>; constructor(data: Array<string>) { this.data = data; } run() { this.data.forEach(function(line) { console.log(line); }); } } 

实例化这个类，并且调用run方法：

var r: Report = new Report(['First line', 'Second line']); r.run();

  // First line
  // Second line

为了复用Report类的行为，要使用extends关键字来继承它：

class TabbedReport extends Report { headers: Array<string>; constructor(headers: string[], values: string[]) { super(values) this.headers = headers; } run() { console.log(this.headers); super.run(); } } var headers: string[] = ['Name']; var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; var r: TabbedReport = new TabbedReport(headers, data); r.run(); 

// First line
// Second line

[ 工具 ]

胖箭头函数

胖箭头（=>）函数是一种快速书写函数的简洁语法。

var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship']; data.forEach( (line) => console.log(line) ); 

当只有一个参数时，圆括号可以省略。箭头（=>）语法可以用作表达式：

var evens = [2,4,6,8]; var odds = evens.map(v => v + 1); 

也可以用作语句：

data.forEach( line => { console.log(line.toUpperCase()) }); 

=>语法还有一个重要的特性，就是它和环绕它的外部代码共享同一个this。

这是它和普通function写法最重要的不同点。通常，我们用function声明的函数有它自己的this。有时在JavaScript中能看见如下代码：

var nate = { name: "Nate", guitars: ["Gibson", "Martin", "Taylor"], printGuitars: function() { var self = this; this.guitars.forEach(function(g) { // this.name is undefined so we have to use self.name 
            console.log(self.name + " plays a " + g); }); } }; 

由于胖箭头会共享环绕它的外部代码的this，我们可以这样改写：

var nate = { name: "Nate", guitars: ["Gibson", "Martin", "Taylor"], printGuitars: function() { this.guitars.forEach( (g) => { console.log(this.name + " plays a " + g); }); } }; 

模板字符串

ES6引入了新的模板字符串语法，它有两大优势：
　　1. 可以在模板字符串中使用变量（不必被迫使用+来拼接字符串）；
　　2. 支持多行字符串。

字符串中的变量

这种特性也叫字符串插值（string interpolation）。你可以在字符串中插入变量，做法如下：

var firstName = "Nate"; var lastName = "Murray"; var greeting = `Hello ${firstName} ${lastName}`; console.log(greeting); // Hello Nate Murray

注意，字符串插值必须使用反引号，不能用单引号或双引号。

多行字符串

var template = ` <div> 
        <h1>Hello</h1> 
        <p>This is a great website</p> 
    </div> 
`