在讨论为什么使用 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 // goodconst isBool: Boolean = false // bad
数字
JavaScript中的二进制、十进制、十六进制等数都可以用 number 类型表示。
const num1: number = 6const num2: number = 0xf00dconst num3: number = 0b1010const 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 = undefinedlet b: null = null;// null 和 undefined 赋值给 numberlet num: number = 1;num = null;num = undefined;// null 和 undefined 赋值给 booleanlet bool: boolean = false;bool = null;bool = undefined;// null 和 undefined 赋值给 objectlet 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 + 1const max2 = max + 2max1 === max2 //true
max1与max2居然相等?这就是超过精读范围造成的问题,而BigInt正是解决这类问题而生的:
// 注意,这里是 JavaScript 代码,并不是 typescriptconst max = BigInt(Number.MAX_SAFE_INTEGER);const max1 = max + 1nconst max2 = max + 2nmax1 === 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'.
