一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情。
JavaScript 的数据类型分为原始类型和对象类型
原始类型(7 种):undefined、null、Number、String、Boolean、BigInt、Symbol
对象类型:Object
TypeScript 支持 JavaScript 的这些类型
1 原始类型
1.1 undefined 和 null
TS 中,undefined 和 null 既表示值,也表示类型
// ts 用":"来指定类型,冒号前后有无空格均可
let a: undefined = undefined;
let b: null = null;
用 tsc 文件名.ts 命令编译后的 JS 代码如下:
var a = undefined;
var b = null;
1.2 number
TS 用 number 表示数字类型,可以表示任意进制的数
let decimal: number = 1;
let hex: number = 0xff;
let binary: number = 0b101;
let octal: number = 0o777;
编译后
var decimal = 1;
var hex = 0xff;
var binary = 5;
var octal = 511;
1.3 string
TS 用 string 表示字符串类型
let str1: string = "Hello TypeScript";
let myName: string = `TypeScript`;
let str2: string = `Hello ${myName}`;
let age: string = `My age is ${decimal + 1}`;
编译后
var str1 = "Hello TypeScript";
var myName = "TypeScript";
var str2 = "Hello " + myName;
var age = "My age is " + (decimal + 1);
1.4 boolean
TS 用 boolean 表示布尔类型
let isDone: boolean = true;
let isTrue: boolean = false;
编译后
var isDone = true;
var isTrue = false;
1.5 bigint
BigInt 是 ES2020 新增数据类型,表示大于 2^53 - 1 的整数
2^53 - 1 是 Javascript 中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。
TS 用 bigint 表示此类型
// 注意需要在整数字面量后面加n来定义一个 BigInt
let big: bigint = 9007199254740991n;
编译后报错:
types.ts:23:19 - error TS2737: BigInt literals are not available when targeting lower than ES2020.
23 let big: bigint = 9007199254740991n;
~~~~~~~~~~~~~~~~~
Found 1 error.
因为 tsc 命令编译 ts 文件时,默认会把 TS 代码编译成 ES3 版本的 JS 代码,而 ES3 版本显然不支持 ES2020 中的 BigInt
事实上可以通过给 tsc 命令添加配置来解决此问题,此处权且不表
可以发现即使报错,依然生成了对应的 js 文件,也是默认配置所致
1.6 symbol
符号(Symbols) 是 ES2015 新增类型,它的功能类似于一种标识唯一性的 ID。
符号类型是唯一的并且是不可修改的,
TS 用 symbol 表示符号类型
let symbol1: symbol = Symbol("key");
编译后
var symbol1 = Symbol("key");
2 对象类型
TS 用 object 来表示对象类型
let obj: object = {};
编译后
var obj = {};
3 类型检查
变量被声明为一个类型之后,通常情况下只能被赋予该类型的值
否则,编译时就会报错
比如把 string 类型的值赋给一个 number 类型的变量
let a: number = "Hello";
编译后报错:
index.ts:1:5 - error TS2322: Type 'string' is not assignable to type 'number'.
1 let a: number = "Hello";
~
Found 1 error.
注意:虽然编译报错,但是仍然生成了对应的 JS 文件,这是 tsc 命令的默认配置所致,之后在 tsc 的配置章节会涉及到,此处暂且不表
4 Any 类型
除了上述 JS 支持的数据类型,TS 还提供了其他类型,其中最典型的就是 Any 类型
如果一个变量被声明为 Any 类型,那么它可以被赋值为任何值,换言之,这个变量将不再受编译时类型检查的约束
TS 用 any 来表示任意类型
let a: any = 1;
a = "Hello";
编译后
var a = 1;
a = "Hello";
5 联合类型
如果希望一个变量接受多个类型的值但又不希望是任意值,可以使用联合类型
联合类型使用 | 分隔每个类型。
let a: string | number;
a = "Hello";
a = 777;
6 类型推断
在某些没有指明类型的地方,TS 编译器可以自动识别类型
比如:
let x = 3;
x = "Hello";
上面的第一句代码没有指明 x 的类型,但是给 x 赋值为 3,TS 会自动推断出 x 的类型为 number,故不能再给 x 赋值 string 类型的 'Hello',编译时即会报错
如果在声明变量时未赋值,TS 会将变量定义为 any 类型
let y; // 相当于 let y: any;
y = 3;
y = "Hello";
7 数组
TypeScript 可以像 JavaScript 一样操作数组元素
TS 定义数组的方式很多,最简单的就是在元素类型后面接上[]
let list: number[] = [1, 2, 3];
编译后
var list = [1, 2, 3];
8 总结
- TS 支持 JS 的所有类型
- 被声明为一个类型的变量,通常只能赋予对应类型的值
- any 类型的变量可以被赋予任意值
- 变量声明时为定义类型,若赋值则 TS 会根据值的类型推断出变量类型,若未赋值则会判断为 any 类型
- TS 定义数组的方式之一:
数据类型 + [] - TS 还支持更多类型的值,后续会逐一涉及