「TypeScript 快速入门」02——数据类型

362 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

JavaScript 的数据类型分为原始类型对象类型

原始类型(7 种):undefined、null、Number、String、Boolean、BigInt、Symbol

对象类型:Object

TypeScript 支持 JavaScript 的这些类型

1 原始类型

1.1 undefined 和 null

TS 中,undefinednull 既表示值,也表示类型

// 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 总结

  1. TS 支持 JS 的所有类型
  2. 被声明为一个类型的变量,通常只能赋予对应类型的值
  3. any 类型的变量可以被赋予任意值
  4. 变量声明时为定义类型,若赋值则 TS 会根据值的类型推断出变量类型,若未赋值则会判断为 any 类型
  5. TS 定义数组的方式之一:数据类型 + []
  6. TS 还支持更多类型的值,后续会逐一涉及

9 示例代码

代码地址