在讨论为什么使用 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 方式创建的对象
const isBool: boolean = false // good
const isBool: Boolean = false // bad
数字
JavaScript中的二进制、十进制、十六进制等数都可以用 number 类型表示。
const num1: number = 6
const num2: number = 0xf00d
const num3: number = 0b1010
const num4: number = 0o744
JavaScript 原始类型也同样适应于 TypeScript 的类型系统
因此 string 、 number 、 boolean 也可以被用作类型注解:
let num: number;
let str: string;
let bool: boolean;
num = 123;
num = 123.456;
num = '123'; // Error
字符串
const str1: string = 'AAAAA'
const str1: string = 1111 // Error
空值
表示没有任何类型,当一个函数没有返回值时,你通常会见到其返回值类型是 void:
function handleUser(): void {
alert("这里是控制");
}
实际上只有 null 和 undefined 可以赋给 void :
const a: void = undefined
Null 和 Undefined
TypeScript 里,undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null,和 void 相似,它们的本身的类型用处不是很大:
默认情况下null和undefined是所有类型的子类型,可以把null和undefined赋值给其它任何类型
但是在正式项目中一般都是开启 —strictNullChecks 检测的,即 null 和 undefined 只能赋值给 any 和它们各自(一个例外是 undefined 是也可以分配给 void ),可以规避非常多的问题。
let a: undefined = undefined
let b: null = null;
// null 和 undefined 赋值给 number
let num: number = 1;
num = null;
num = undefined;
// null 和 undefined 赋值给 boolean
let bool: boolean = false;
bool = null;
bool = undefined;
// null 和 undefined 赋值给 object
let obj: object = {};
obj = null;
obj = undefined;
Symbol
注意:我们在使用 Symbol 的时候,必须添加 es6 的编译辅助库,如下:
Symbol 是在ES2015之后成为新的原始类型,它通过 Symbol 构造函数创建:
而且 Symbol 的值是唯一不变的:
const sym1 = Symbol('key1');
const sym2 = Symbol('key2');
Symbol('key1') === Symbol('key1') // false
BigInt
BigInt 类型在 TypeScript3.2 版本被内置,使用 BigInt 可以安全地存储和操作大整数,即使这个数已经超出了JavaScript构造函数 Number 能够表示的安全整数范围。
注意:我们在使用 BigInt 的时候,必须添加 ESNext 的编译辅助库,如下:
在 JavaScript 中采用双精度浮点数,这导致精度有限,比如 Number.MAX_SAFE_INTEGER 给出了可以安全递增的最大可能整数,即2**53-1,我们看一下案例:
let big: bigint = 100n;
let num: number = 1;
num = big; // Type 'bigint' is not assignable to type 'number'
const max = Number.MAX_SAFE_INTEGER;
const max1 = max + 1
const max2 = max + 2
max1 === max2 //true
max1与max2居然相等?这就是超过精读范围造成的问题,而BigInt正是解决这类问题而生的:
// 注意,这里是 JavaScript 代码,并不是 typescript
const max = BigInt(Number.MAX_SAFE_INTEGER);
const max1 = max + 1n
const max2 = max + 2n
max1 === max2 // false
这是在 Chrome 浏览器 console 的结果:
值得注意的是我们需要用 BigInt(number) 把 Number 转化为 BigInt,同时如果类型是 BigInt ,那么数字后面需要加 n ,就如同上面例子的 const max1 = max + 1n 中的 1n。
在TypeScript中,number 类型虽然和 BigInt 都是有表示数字的意思,但是实际上两者类型是不同的:
declare let foo: number;
declare let bar: bigint;
foo = bar; // error: Type 'bigint' is not assignable to type 'number'.
bar = foo; // error: Type 'number' is not assignable to type 'bigint'.