Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架并且 Angular 本身就是用 TypeScript 写成的。

所以学习一些TypeScript相关的知识是非常重要的。

先说说TypeScript的主要特征

  1. 免费开源
  2. 基于 ECMAScript 标准进行扩展
  3. 新增了可选静态类型，类，模块
  4. 经过编译以后成为可读的，符合 ECMAScript 规范的JavaScript
  5. 跨平台
  6. 可以和 JavaScript 代码一起运行

TypeScript的基本类型

  1. boolean(布尔)类型：
const isShow: boolean = false;
  1. number(数字)类型：
const a: number = 1;
const b: number = 1_000; // === 1000
  1. string(字符串)类型：
    在这里可以使用双引号(")或者单引号(’)标示字符串
let a: string = "Mr a.";
let b: string = 'Mr b.';

还可以使用模版字符串，可以定义多行文本和内嵌表达式，是由反引号表示，并使用$进行插值表达

let a: string = "Mr a.";
let b: string = 'Mr b.';
let message1: string = `This is ${a} and ${b}`;
let message2: string = 'This is ' + a + ' and ' + b;

注意：上述代码中，message1 和 message2 的值是一样的。

  1. null(一个表明是null值的特殊关键字)

注意:大小写敏感，不能写成：NULL 或者 Null。

  1. undefined(变量未定义时的属性)
  2. symbol (ES6新添加的一种类型,类型的实例唯一且不可以改变)
const symbol1 = Symbol('Hello World');
const symbol2 = Symbol('Hello World');
console.log(symbol1===symbol2); // false

因为 symbol 是唯一的，所以symbol1，symbol2无论如何都不会相等，在项目开发中，常量使用 symbol 值最大的好处是在其他的任何值都不可能有项目的值，可以保证在特定的变量或者特定的switch 语句按照预想的方式工作。

  1. object(对象，存放值的命名容器)
  2. Array(数组)

定义数组的两种方式
在元素类型后面跟上[]，并且由此表示此类型的元素组成的数组

let list: number[] = [1, 2, 3];

使用数组泛型，Array<元素类型>

let list: Array<number> = [1, 2, 3];

类型断言

泛型

在项目中，大部分时候，设计的某一个功能可能需要支持多种数据类型，而不是局限于某一种类型，泛型用于提高代码的重用性。

  1. 泛型函数

创建一个泛型函数，sayHello 函数，这是一个简单的函数，直接将参数值作为返回值。

当需要传入一个数字类型的时候，函数为

public function sayHello(arg: number): number{
    return arg;
}

但是突然需求改成需要传入一个字符串，就会变成

public function sayHello(arg: string): string{
    return arg;
}

也可以使用 any 类型来表示这种混乱

public function sayHello(arg: any): any{
    return arg;
}

但是any类型并不能准确的表达出函数的返回值与参数值相同、类型相同。

此时就可以使用泛型变量 T, T 代表用户传入的类型，类型既可以是number，也可以是string，也可以使用 T 作为函数的返回类型。这样就达到了返回值与参数值的类型相同的目的，保持函数表达的准确性。

public function sayHello<T>(arg: T): T{
    return arg;
}

使用泛型函数

使用泛型函数有两种方式

  1. 使用尖括号进行类型表达
let world = sayHello<string>('hello World');
  1. 使用类型推断（什么都不做）

TypeScript的编译器会根据传入的参数类型自动判断 T 的数据类型

let world = sayHello('hello World');

这个时候，编译器会知道函数的参数类型就是 string 类型的，同样，返回的类型也就是string了。

枚举类型

在项目开发中，有时候会和后端开发约定某个业务的状态值： 代办状态是0，申请开发状态是1， 完成状态是2，这样的纯数字会使代码缺乏可读性，此时就可以使用枚举类型，从而提高代码的可读性。

TypeScript 支持基于数字枚举和字符串的枚举

  1. 数字枚举
enum taskStatus {
    backLog,
    applyDev,
    done,
}

实际开发中，就可以使用taskStatus.backLog 代表原来的数字 0 了。

  • 小技巧
    当在使用数字枚举时，如果第一个枚举的变量没有赋值，那么第一个变量的值就是0，后面的变量依次递增。如果第一个枚举的变量的2，或者其他数字，其他的变量没有赋值，那么第一个以后的变量就为第一个变量值依次递增。

例如，对backLog赋值为4，那其他的值为5，6

enum taskStatus {
    backLog = 4,
    applyDev,  // 5
    done,      // 6
}
  1. 字符串枚举

在一个字符串枚举中，为了可读性，所有成员必须是字符串字面量。

enum taskStatus {
    backLog = 'backLog',
    applyDev = 'applyDev',
    done = 'done',
}
  1. 反向映射

反向映射仅限于 数字类型的枚举

例如设定一个枚举：

export enum TaskStatus {
  a, // 0
  b, // 1
  c, // 2
}

此时输出：

console.log(TaskStatus.a);  // 0
console.log(TaskStatus[0]); // 'a'

注意： 字符串枚举没有反向映射

在Angular中，创建一个枚举类型的数据

使用 cli 命令创建，执行命令：

ng g enum taskStatus

或者

ng generate enum taskStatus

结果

wujiayudeMacBook-Pro:demo-test wjy$ ng generate enum taskStatus
CREATE src/app/task-status.enum.ts (27 bytes)

打开文件以后，如下：

export enum TaskStatus {
}

此时就可以在这个文件中添加成员变量了。