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