TypeScript 类型系统

承接 TS 系列上一篇的类型系统介绍：https://xie.infoq.cn/article/3f79fefb552e2a538f95ef0be

类型系统是TypeScript中一个重要的概念。

TypeScript 里类型可以隐式编写也可以显式编写

类型的隐式和显式

隐式

在 TypeScript 中，回尝试推断出尽可能多的类型信息，以便在开发过程中以最小生产力成本提供类型安全。

在下面的例子中 TypeScript 会知道变量类型，并且会给出错误提示。 如果是在 JavaScript 中，这样的编写方式是可以的，但是在 TypeScript 是会出现报错的，这是由于 TypeScript 存在类型系统

var foo = 123;foo = '456';

效果：

显式

在类型的赋值中，TypeScript 可以使用注释来表明类型，好处：

• 帮助编译器，更重要的是未来下一个阅读代码的开发人员记录内容

• 强制编译器看到应该看到的内容，自己对代码的理解和代码的算法分析相匹配

在 TypeScript 中可以使用后缀类型注释，由开发者来告诉 TS 变量是什么类型 (如果赋值的类型与后缀类型不同，就会直接报错)：

var foo1: number = 123;var foo2: number = '123';  // Type '"123"' is not assignable to type 'number' var foo3: string = '123';var foo4: string = 123;  // Type '123' is not assignable to type 'string'.

类型错误不会阻止 JavaScript 生成

在使用 tsc 编译.ts 文件时，即使存在编译错误，在默认情况，TypeScript 也会尽可能发出有效的 JavaScript 文件如上面的后缀类型注释，尽管出现报错，但是 js 文件依旧生成了

因此,您可以逐步将 JavaScript 代码升级到 TypeScript。这与许多其他语言编译器的工作方式截然不同，是迁移到 TypeScript 的另一个原因。

类型可以是环境

TypeScript 的一个主要设计目标是可以安全、轻松的使用现有的 JavaScript 库。

TypeScript 通过声明来实现这一点。

比如 jQuery 简单示例：

$('.num').show();  //  Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.

如果想要快速修复，可以使用 declare 在 TypeScript 申明，确实有一个 $

declare 定义的类型只会用于编译时的检查，在编译结果中会被删除

declare var $: any$('.num').show();

TypeScript 基础类型

为了让程序有价值，TypeScript 支持与 JavaScript 几乎相同的数据类型

在 JavaScript 中存在的数据类型，TypeScript 也都存在

布尔值

在 JavaScript 和 TypeScript 中是boolean，数据类型就是 true/false

let flag: boolean = false;

数字

number 类型，在 JavaScript 和 TypeScript 中，所有的数字都是浮点数。

此外： TypeScript 还支持引入的二进制和八进制字面量。在 number 类型中，还可以直接赋值为 NaN 和 Infinity

NaN: 大多数定长的整数格式无法显式表示无效数据 Infinity: 无限大的数据

TS 文件：

let num1: number = 10;   // 十进制let num2: number = 0xf00d;  // 十六进制let num3: number = 0b1010101;  // 二进制let num4: number = 0o744;  // 八进制let num5: number = NaN;let num6: number = Infinity;

编译后： 因为 JavaScript 支持十六进制，所以 ts 中赋值的 num2 没有被转换成十进制数据

var num1 = 10; // 十进制var num2 = 0xf00d; // 十六进制var num3 = 85; // 二进制var num4 = 484; // 八进制var num5 = NaN;var num6 = Infinity;

字符串

string 类型，可以使用双引号或单引号表示字符串，或者使用``模板字符串

TS 文件：

let str1: string = 'hello';let str2: string = 'world';let str3: string = `${num1} +
${num2}`;

编译后：

var str1 = 'hello';var str2 = 'world';var str3 = num1 + " +\n\n" + num2;

数组

在 TypeScript 中，有两种类型注释方式可以定义数组

1. 在元素类型后加[] --- 数据类型[]
   

2. 使用数组泛型 --- Array<数据类型>
   

TypeScript 只允许数组中包括一种数据类型的值, 如果想要为数组添加不同类型的值，需要使用 <font color=#f00 size=2 >联合类型</font>

创建联合类型的语法格式如下：

Type1|Type2|Type3

TS 联合类型可参考：https://www.runoob.com/typescript/ts-union.html

TS:

let arr1: string[] = ['1', '2', '3'];let arr2: Array<number> = [1, 2, 3];let arr3: number[] = [1, '2'];  // Type 'string' is not assignable to type 'number'let arr4: (number|string)[] = [1, '2'];  //联合类型

JS:

var arr1 = ['1', '2', '3'];var arr2 = [1, 2, 3];var arr3 = [1, '2']; // Type 'string' is not assignable to type 'number'var arr4 = [1, '2']; //联合类型

这样来看，使用后缀类型注释好像写数组更加麻烦了。但实际在大型项目中，会起到很棒的效果。

比如定义一个由个体数据组成的数组，个体具有 name、age、score 三种属性。 name 是字符串，age 是数值，score 是是否通过的布尔值。

TS：

// 定义person数组的组成形式let person: { name: string, age: number, score: boolean }[];// 按照定义的格式添加数组元素person = [{name: 'kcj', age: 18, score: true}]person.push({name: 'anxi', age: 19, score: false})

这样一来，如果有什么值不符合规范，能够在编译过程中很轻松的看出来。 是不是和 class 类有些相像

Null 和 Undefined

Null 和 undefined 可以直接赋值， 一般使用 undefined，不要使用 null

let jk: string|undefined|null;jk = null;jk = undefined;