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>
`
