TypeScript学习笔记之类型

Boolean 布尔

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

1	let isDone: boolean = false;

Number 数值

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

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

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 中新增的类型。

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

// 定义一个元组类型
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方法

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

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 开始并依次递增：

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

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

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

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

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、比较运算符、类型守卫类限定其类型。

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 的函数示例：

// 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。

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