TypeScript学习笔记之类型

前端

Boolean 布尔

与JavaScript一样，代表最简单的true、false值。

1
let isDone: boolean = false;

Number 数值

与JavaScript一样，所有的number不是浮点数就是大整数，浮点数的类型是Number，而大整数的类型是BigInt。

除了十进制和十六进制字面量，TypeScript还支持自ECMAScript 2015中引入的二进制和八进制字面量。

1
2
3
4
5
let decimal: number = 6; // 十进制字面量
let hex: number = 0xf00d; // 十六进制字面量，以 0x 开头
let binary: number = 0b1010; // 二进制字面量，以 0b 开头
let octal: number = 0o744; // 八进制字面量，以 0o 开头
let big: bigint = 100n; // 大整数字面量，以n结尾

String 字符串

与JavaScript一样，使用双引号（”）和单引号（’）表示字符串，同时也可以使用反引号（`）表示模板字符串。

1
2
let name: string = "bob";
let sentence: string = `Hello, my name is ${name}`;

Array 数组

TypeScript有两种方式定义数组：

第一种，直接在元素类型后面跟上[]，这与许多强类型语言的数组定义类似

1
let list: number[] = [1, 2, 3];

第二种，使用数组泛型，Array<elemType>

1
let list: Array<number> = [1, 2, 3];

Tuple 元组

TypeScript中新增的类型。

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

1
2
3
4
5
// 定义一个元组类型
let x: [string, number]; 
// 初始化
x = ['hello', 10]; // 正确
x = [10, 'hello']; // 错误

当使用已知索引访问元素时，会得到正确的类型：

1
2
console.log(x[0].substr(1)); // 正确
console.log(x[1].substr(1)); // 错误，number类型没有substring方法

当越界访问时，会得到错误提示：

1
2
3
4
5
6
x[3] = 'world'; 
// Tuple type '[string, number]' of length '2' has no element at index '3'.

console.log(x[5].toString());
// Object is possibly 'undefined'.
// Tuple type '[string, number]' of length '2' has no element at index '5'.

Enum 枚举

TypeScript中新增的类型。

完全照搬微软自家C#语言的枚举类型语法，默认情况下枚举值是从0开始并依次递增：

1
2
3
4
5
6
enum Color { 
  Red, 
  Green, 
  Blue 
}; // Red = 0， Green = 1，Blue = 2
let c: Color = Color.Green;

可以手动设置每一项的枚举值：

1
2
3
4
5
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}

枚举类型还可以方便地通过值查找其名字：

1
2
3
4
5
6
7
enum Color {
  Red = 1,
  Green,
  Blue
}
let colorName: string = Color[2];
console.log(colorName) // 显示 Green

Any 任意

TypeScript中新增的类型

当不清楚变量的类型，并且希望编译通过时，可以使用Any类型。

不清楚变量的类型的情形可能有：

  • 动态内容
  • 用户输入
  • 第三方代码库
  • 非TypeScript代码

与Object类型的区别：Object只允许赋任意值，不能调用任意方法；Any既允许赋任意值，也能调用任意方法。

如非必要，应尽量避免使用any类型。

Unknown 未知

TypeScript中新增的类型

Unknown是Any类型的安全版本。Any允许我们做任何事，而Unknown则有许多限制。

在使用Unknown类型的变量前，必须通过typeof、比较运算符、类型守卫类限定其类型。

1
2
3
4
5
6
7
8
9
10
11
12
declare const maybe: unknown;
const aNumber: number = maybe; // error: Type 'unknown' is not assignable to type 'number'

if (maybe === true) {
  const aBoolean: boolean = maybe;
  const aString: string = maybe; // error: Type: 'boolean' is not assignable to type 'string'.
}

if (typeof maybe === 'string') {
  const aString: string = maybe;
  const aBoolean: boolean = maybe; // error: Type 'string' is not assignable to type 'boolean'. 
}

Void 空

TypeScript中新增的类型

void有点像any的反义词，表示完全没有任何类型。通常用于标识没有返回值的函数。

1
2
3
function warnUser(): void {
  console.log('This is my warning message');
}

将一个变量声明为void是没有意义的，因为只能给它赋值null（仅当**–strictNullChecks**开关没有被指定时）或undefined。

1
2
3
let unusable: void = undefined;
// Ok if '--strictNullChecks' is not given
unusable = null;

Null 和 Undefiend

在TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。和void有点像，它们本身的类型并没有多大用处：

1
2
3
// Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;

默认情况下，null和undefined是所有类型的子类型，意即null和undefined可以赋值给其他所有类型，例如：number类型。

但是当你启用了–strictNullChecks标记时，null和undefined只能赋值给void和它们自己。这能避免很多常见的问题。如果你想传入一个string或null或undefined，你可以使用联合类型string | null | undefined。

Never 永不

TypeScript新增的类型

never代表那些永远不会发生或永不存在的值。例如，never类型是那些总是会抛出异常或者根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是never类型，当它们被永不为真的类型保护所约束时。

never是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never类型的子类型，除了never类型本身。即使any也不能赋值给never。

如下是一些返回never的函数示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Function returning never must not have a reachable end point
function error(message: string): never {
  throw new Error(message);
}

// Inferred return type is never
function fail() {
  return error("Something failed");
}

// Function returning never must not have a reachable end point
function infiniteLoop(): never {
  while (true) {}
}

Object 对象

object表示非原始类型，也就是除了number、string、boolean、bigint、symbol、null和undefined之外的类型。

使用object类型，就可以更好的表示像Object.create这样的API。

1
2
3
4
5
6
7
8
9
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error