Angular之TypeScript（一）

所谓好记性不如烂笔头，本博客是基于《Angular权威教程》上的内容学习的记录笔记，这里也推荐大家去看此书，写得挺不错的。同时若有侵权问题，请留言联系，会及时删除相关博客信息。

Angular是使用一种类似JavaScript的语言---------------TypeScript构建的。

TypeScript并不是一门全新的语言，而是ES6的超集，所有的ES6代码都是完全有效且可编译的TypeScript代码。下图展示了它们之间的关系。

 需要指出的是：TypeScript并不是开发Angular应用的必选语言。同样可以使用ES5代码（即“普通”的JavaScript）来开发Angular应用。Angular也提供了ES5API。之所以使用TypeScript，是因为TypeScript提供了一些强大的功能，极大简化了开发。

 

TypeScript相对ES5有五大改善：分别是类型、类、注解、模块导入、语言工具包（比如，解构）。以下是对她们的一一介绍。

一、类型

相对于ES6，TypeScript最大的改善是增加了类型系统。增加类型检测一方面可以在编译期预防bug，有助于代码的编写；另一方面，它能清晰地表明你的意图，有助于代码阅读。

TypeScript的基本类型与平时所写的JavaScript代码中的隐式类型一样，包括字符串、数字、布尔值等。TypeScript语法从ES5演化而来，仍然延用var来定义变量，但其可以为变量提供类型。例如：

var name：string；

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

function greetTest（name：string）：string {
    return "Hello" + name;
}

若编写了不符合类型声明的代码，在编译会报错：

function hello(name: string) : string {
    return 23;
}

如上函数在编译时会报：compile-error：error TS2322:Type "number" is not assignable to type 'string'.

 

（1）字符串类型：字符串包含文本，声明为string类型：

   var name: string = 'Jackson';

（2）数字：无论数字还是浮点，任何类型的数字都属于number类型。在TypeScript中，所有的数字都是用浮点数表示。

   var ang: number = 36;

（3）布尔类型：布尔类型（boolean）以true（真）和flase（假）为值：

  var isPass: boolean = true;

（4）数组：数组用Array类型来表示，因为数组是一组相同类型的集合，所以我们还需要为数组中的条目指定一个类型，可以使用Array<type>或者type [ ] 语法来为数组条目指定元素类型。

  var jobs: Array<string> = ["TM", "SE", "HR", "BOSS"];

  var jobs: string [ ] = ["TM", "SE", "HR", "BOSS"];

（5）枚举：枚举类型是一组可命名的数值集合

  enum Role {Employee, Manager, Admin};

  var role: Role = Role.Employee;

默认情况下，枚举的初始值为0，我们可以调整初始化值的范围

  enum Role {Employee = 3, Manager, Admin};

在上述代码中，Employee的初始值是3而不是0。枚举中其他项的值都是递增的，意味着Manager的值为5，Admin的值为5。同样，我们也可以单独为每个枚举中的每一项指定值：

enum Role {Employee = 3, Manager = 7, Admin = 9};

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

enum Role {Employee, Manager, Admin};

console.log("Roles：", Role[0], ',' , Role[1], 'and' , Role[2]);

（6）任意类型：如果没有为变量指定类型，那么默认类型就是any。在TypeScript中，any类型的变量能够接收任意类型的数据。

var something: any = 'as string';

something = 1;

something = [1, 2, 3, 4];

（7）“无”类型：void意味着我们不期望那里有类型。它通常作为函数的返回值，表示没有任何数据返回

function setName(name: string) : void {

            this.name = name;

}

注意：void类型也是一种合法的any类型

以上七种数据类型是TypeScript的内置类型。在ES6中有了“类”的概念，使用class关键字来定义一个类，紧随其后的是类名和类的代码块。类包含属性、方法和构造函数。TypeScript同样有类的概念。

定义一个类：

class Person {

}

属性：属性定义了类实例对象的数据。比如名叫Person的类可能有first_name、last_name、age等属性。类中每个属性都可以包含一个可选类型，比如把first_name和last_name声明为string类型，二age声明为number类型。

Person类的声明如下：

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

方法：方法是运行在类对象实例上下文中的函数。在调用对象方法之前，必徐要有这个对象的实例。要实例化一个类，可以使用new关键字。比如new Person() 会创建一个Person类的实例对象。

如果我们希望问候某个人，可以如下写法：

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

在调用sayHello之前，我们需要又一个Person类的实例。代码如下：

// 声明一个Person实例
var person: Person = new Person();
// 给person实例的first_name赋值
person.first = "Jackson";
// 调用sayHello()方法
person.sayHello();

构造函数： 构造函数是当类进行初始化时执行的函数。通常会在构造函数中对新的对象进行初始化工作。构造函数必需命名为constructor。因为构造函数是在类被实例化时调用的，所以它们可以有输入参数，但不能有任何返回值。当类么有显示定义一个构造函数时，将会创建一个无参的构造函数。在TypeScript中，每个类只能又一个构造函数，这里违背了ES6标准，在ES6中，一个类可以拥有不同参数的构造函数。

我们可以使用带有参数的构造函数来将对象进行初始化。例如：

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;
    }
    
    sayHello () {
        console.log("Hello", this.fist_name);
    }
}

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

var person: Person = new Person("Jack", "jackson", 23);

person.sayHello();

继承：面向对象另一个重要的特性就是继承。继承表明子类能够从父类得到它的行为。然后就可以在子类中重写、修改以及添加行为。

TypeScript是完全支持继承特性的，使用extends关键字实现。

例如：人分为Boy（男孩）和Girl（女孩），男孩会唱歌，女孩会跳舞，而他们同时又有Person的fast_name、last_name、age以及sayHello方法。这里我们就可以使用继承取实现。

男孩唱歌：

class Boy extent Person {
    // 男孩唱歌
    sing () {
        console.log("男孩唱歌");
    }
}

女孩i跳舞：

class Girl extends Person {
    // 女孩跳舞
    dance () {
        console.log("女孩跳舞");
    }
}

二：工具

TypeScript和ES6提供了许多语法特性，让编码成为一种享受。其中最重要的是：胖箭头函数语法和模版字符串

（1）胖箭头函数

胖箭头（=>）函数是一种快速书写函数的简洁语法。在ES5中，每当我们要用函数最为参数时，都必须要用function关键字和紧随其后的花括号（{ }）表示。例如：

// ES5- like example

var colors = ["Green", "Block", "Red", "Blue"]; 

colors.forEach(function(item) { console.log(item); });

现在ES6和TypeScript中可以使用胖箭头函数（=>）语法来重写：

// ES6 or TypeScript - like example

var colors = ["Green", "Block", "Red", "Blue"]; 

colors.forEach( (item) => console.log(item) );

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

var evens = [2, 4, 56, 8, 10];

var odds = evens.map(v => v + 1);

也可以用作语句：

colors.forEach(item => {

      console.log(item.toUpperCase());

});

箭头函数（=>）还有一个重要的特性，就是它和环绕它的外部代码共享一个this。这是他和普通function写法最重要的不同。箭头函数是处理内联函数的好办法。

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

1）字符串的变量：这种特性也叫字符串的插值。可以在字符串中插入变量。做法如下：

var firstName = "Nate";

var lastName = "Murry";

// 字符串插值

var greeting = `Hello ${firstName} ${lastName}`;

console.log(greeting);

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

2）多行字符串：反引号字符串的另一个优点是应许多行文字。例如：

 

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

当我们需要插入模版这样的长文本时，多行字符串会非常有帮助。

 

后续持续更新～～～～～～～～～～～