TypeScript学习总结（一）

2020-08-22 本文已影响0人虚拟J

前言

TypeScript 是 JavaScript 的一个超集，它可以编译成纯 JavaScript（编译出来的 JavaScript 可以运行在任何浏览器上）。主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

对前端工程师来说可能有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等可能不是很熟悉的概念。
短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本。

基础

TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

TypeScript 里的类型注解是一种轻量级的为函数或变量添加约束的方式，我们使用 “ : ” 指定变量的类型，“ : ” 的前后有没有空格都可以。

布尔值、数值、字符串

let isChestnut: boolean = false;
let chestnutNumber: number = 6;
let chestnutName: string = "Kastanien";

数组、元组（Tuple）

有两种方式可以定义数组：

可以在元素类型后面接上 [ ]，表示由此类型元素组成的一个数组：
使用数组泛型，Array<元素类型>

let chestnutList: number[] = [1, 2, 3];
//or
let chestnutList: Array<number> = [1, 2, 3];

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

let chestnutTuple: [string, number] = ['hello', 6];

Any、Void、Null、Undefined

Any 类型用来表示允许赋值为任意类型

编程阶段为还不清楚类型的变量指定一个类型，或只知道一部分数据的类型时。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查，那么可以使用 any 类型来标记这些变量。

特点：
任意值上访问任何属性都是允许的，也允许调用任何方法。
对任意值的任何操作，返回的内容的类型都是任意值。
变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型。

在 TypeScript 中，可以用 void 表示没有任何返回值的函数：
（声明一个 void 类型的变量没有什么用，只能为它赋予 undefined和 null）

function alertChestnut(): void {
    alert('This is Chestnut');
}

let unusable: void = undefined;

TypeScript 里，null 和 undefined 两者各自有自己的类型分别叫做 null 和 undefined。（默认情况下 null 和 undefined 是所有类型的子类型）

let u: undefined = undefined;
let n: null = null;

类型推论

类型推论：TypeScript 会在没有明确的指定类型的时候推测出一个类型。
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查。

类型推论时的细微差别：

最佳通用类型：当需要从几个表达式中推断类型时候，会使用这些表达式的类型来推断出一个最合适的通用类型。（如果没有找到最佳通用类型的话，类型推断的结果为联合数组类型）
按上下文归类：按照相反的方向进行，会发生在表达式的类型与所处的位置相关时。（如果上下文类型表达式包含了明确的类型信息，上下文的类型被忽略）

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。（要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可）

类型断言有两种形式：

<类型>值

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

值 as 类型（当在 TypeScript 里使用 JSX 时，只有 as 语法断言是被允许的）

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

有时候你会遇到这样的情况：

你清楚地知道一个实体具有比它现有类型更确切的类型，比 TypeScript 更了解某个值的详细信息。（将一个父类断言为更加具体的子类）（将 any 断言为一个具体的类型）
我们确实需要在还不确定类型的时候就访问其中一个类型特有的属性或方法。（将一个联合类型断言为其中一个类型）（将任何一个类型断言为 any）

通过类型断言这种方式，TypeScript会假设你已经进行了必须的检查，只是在编译阶段起作用。无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误。

其他

TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。（如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json，请参阅官方手册（中文版）。）

学习链接：
TypeScript中文网
 TypeScript 入门教程