在讨论为什么使用 TypeScript 时,我们涵盖了 TypeScript 类型系统的主要功能。以下是讨论
的一些关键点:
TypeScript 类型系统设计是可选的,因此,你的 JavaScript 即是 TypeScript;
TypeScript 不会阻止 JavaScript 的运行,即使存在类型错误也不例外,这能让你的
JavaScript 逐步迁移至 TypeScript。
现在让我们开始学习 TypeScript 类型系统的语法,在这一章节中,你将能给你的代码加上类
型注解,并且能看到它的益处。这将为我们进一步了解类型系统做铺垫。

原始类型


布尔类型:boolean
数字类型:number
字符串类型:string
空值:void
Null 和 Undefined:null 和 undefined
Symbol 类型:symbol
BigInt 大数整数类型:bigint

布尔类型


我们用 boolean 来表示布尔类型,注意开头是小写的,如果你在Typescript文件中写成 Boolean 那代表是 JavaScript 中的布尔对象,这是新手常犯的错误。
虽然,通过引用 Boolean 对象作为类型也可以正常运行,但这是错误的使用方式,我们几乎很少需要使用到通过 new Boolean 方式创建的对象

  1. const isBool: boolean = false // good
  2. const isBool: Boolean = false // bad

数字


JavaScript中的二进制、十进制、十六进制等数都可以用 number 类型表示。

  1. const num1: number = 6
  2. const num2: number = 0xf00d
  3. const num3: number = 0b1010
  4. const num4: number = 0o744

JavaScript 原始类型也同样适应于 TypeScript 的类型系统
因此 string 、 number 、 boolean 也可以被用作类型注解:

  1. let num: number;
  2. let str: string;
  3. let bool: boolean;
  4. num = 123;
  5. num = 123.456;
  6. num = '123'; // Error

字符串


  1. const str1: string = 'AAAAA'
  2. const str1: string = 1111 // Error

空值


表示没有任何类型,当一个函数没有返回值时,你通常会见到其返回值类型是 void:

  1. function handleUser(): void {
  2. alert("这里是控制");
  3. }

实际上只有 null 和 undefined 可以赋给 void :

  1. const a: void = undefined

Null 和 Undefined


TypeScript 里,undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null,和 void 相似,它们的本身的类型用处不是很大:
默认情况下null和undefined是所有类型的子类型,可以把null和undefined赋值给其它任何类型
但是在正式项目中一般都是开启 —strictNullChecks 检测的,即 null 和 undefined 只能赋值给 any 和它们各自(一个例外是 undefined 是也可以分配给 void ),可以规避非常多的问题。

  1. let a: undefined = undefined
  2. let b: null = null;
  3. // null 和 undefined 赋值给 number
  4. let num: number = 1;
  5. num = null;
  6. num = undefined;
  7. // null 和 undefined 赋值给 boolean
  8. let bool: boolean = false;
  9. bool = null;
  10. bool = undefined;
  11. // null 和 undefined 赋值给 object
  12. let obj: object = {};
  13. obj = null;
  14. obj = undefined;

Symbol


注意:我们在使用 Symbol 的时候,必须添加 es6 的编译辅助库,如下:
基础类型 - 图1
Symbol 是在ES2015之后成为新的原始类型,它通过 Symbol 构造函数创建:
而且 Symbol 的值是唯一不变的:

  1. const sym1 = Symbol('key1');
  2. const sym2 = Symbol('key2');
  3. Symbol('key1') === Symbol('key1') // false

BigInt


BigInt 类型在 TypeScript3.2 版本被内置,使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了JavaScript构造函数 Number 能够表示的安全整数范围。
注意:我们在使用 BigInt 的时候,必须添加 ESNext 的编译辅助库,如下:
基础类型 - 图2
在 JavaScript 中采用双精度浮点数,这导致精度有限,比如 Number.MAX_SAFE_INTEGER 给出了可以安全递增的最大可能整数,即2**53-1,我们看一下案例:

  1. let big: bigint = 100n;
  2. let num: number = 1;
  3. num = big; // Type 'bigint' is not assignable to type 'number'
  4. const max = Number.MAX_SAFE_INTEGER;
  5. const max1 = max + 1
  6. const max2 = max + 2
  7. max1 === max2 //true

max1与max2居然相等?这就是超过精读范围造成的问题,而BigInt正是解决这类问题而生的:

  1. // 注意,这里是 JavaScript 代码,并不是 typescript
  2. const max = BigInt(Number.MAX_SAFE_INTEGER);
  3. const max1 = max + 1n
  4. const max2 = max + 2n
  5. max1 === max2 // false

这是在 Chrome 浏览器 console 的结果:
基础类型 - 图3
值得注意的是我们需要用 BigInt(number) 把 Number 转化为 BigInt,同时如果类型是 BigInt ,那么数字后面需要加 n ,就如同上面例子的 const max1 = max + 1n 中的 1n。
在TypeScript中,number 类型虽然和 BigInt 都是有表示数字的意思,但是实际上两者类型是不同的:

  1. declare let foo: number;
  2. declare let bar: bigint;
  3. foo = bar; // error: Type 'bigint' is not assignable to type 'number'.
  4. bar = foo; // error: Type 'number' is not assignable to type 'bigint'.