Typescript知识点

Typescript 中 interface 和 type 区别

相同点

都可以描述对象或者数组

1
2
3
4
5
6
7
8
9
10
11
12
13
interface User {
  name: string;
  age: number;
}
interface SetUser {
  (name: string, age: number) => void;
}

type User = {
  name: string;
  age: number;
};
type setUser = (name: string, age: number) => void;

都允许扩展
inteface 和 type 都可以拓展，并且可以相互扩展。

各自扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface Name {
  name: string;
}

interface User extends Name {
  age: number;
}
// ==================================

type Name = {
  name: string;
};

type User = Name & { age: number };

相互扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface Name {
  name: string;
}

type User = { age: number } & Name;

// ==================================

type Name = {
  name: string;
};

interface User extends Name {
  age: number;
}

不同点

type 可以的，interface 不可以

type 可以声明类型别名、联合类型、元组等类型

1
2
3
4
5
6
7
8
// 声明类型别名
type cxkyyds = string; // 以后就可以用cxkyyds来表示字符串类型

// 联合类型
type action = "ADD" | "EDIT" | "COPY";

// 定义元组类型，指定数组每个位置元素的类型
type list = [string, number, boolean];

interface 可以的，type 不可以
interface 可以声明合并，两个同名的 interface 会自动合并

1
2
3
4
5
6
7
8
9
10
11
12
13
interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {}; // Type '{}' is missing the following properties from type 'User': name, age

// ==================================
type User = { name: string };
type User = { age: 20 }; // 报错：Duplicate identifier 'User'.

TypeScript 中 any、never、unknown、null & undefined 和 void 有什么区别

any

  • 含义：any 类型表示任何 JavaScript 值都可以赋值给它，可以绕过 TS 的静态检查。
  • 应用场景：不想给变量设置类型，或者迁移老的 JavaScript 项目临时使用。

示例：

1
2
3
let info: any = "chenjiang";
info = 26;
info = "男";

never

  • 含义：永远不存在的值的类型。
  • 应用场景：一个从来不会有返回值的函数（函数内含有 while(true){}），一个总是抛出错误的函数(function fn(){throw new Error('xxxx')})

示例：

1
2
3
function error(message: string): never {
  throw new Error(message);
}

never 类型不能被其他类型赋值，只能 never 类型赋值给 never 类型

1
2
3
4
5
let name: never = "chenjiang"; // 报错：number 类型不能赋值给 never 类型

let foo: never = (() => {
  throw new Error("报错了");
})(); // 这样是可以

void

  • 含义：它表示没有任何类型，一般在函数中使用，表示函数没有返回值。
  • 应用场景：一般用于没有返回值的函数的返回值类型上。

示例：

1
2
3
function tip(): void {
  console.log("tip message");
}

由此看来 void 和 never 很类似，到底有什么区别呢？

  • never 表示永远不存在的值的类型，函数总是抛出错误、一直处于循环，有值也返回不了，所以说永远不存在的值的类型
  • never 类型不能被其它类型赋值，只能被 never 类型赋值
  • void 表示没有任何类型，函数没有任何返回值。
  • void 可以被其它类型赋值

unknow

  • 含义：表示任何类型，和 any 类型，但是它比 any 安全，因为 unknow 类型的值执行很多操作是不被允许的，直到我们通过类型检查缩小了该值的类型。
  • 应用场景：不想设置值的类型，又想要求别人使用这个对象的时候要先做类型判断，可以把它做为 any 类型的安全版本。

示例：

1
2
3
4
5
6
7
8
let info: unknow = 26;
info.toFixed(2); // Error: unknow对象不能直接访问上面的属性

// 上面提到的应用场景
const info: unknow = 26;
if (typeof info === "number") {
  info.toFixed(2);
}

unknow 类型 不能直接赋值给非 any 和 unknow 类型

null、undefined

  • 含义：null 表示无值的特殊值，undefined 表示未定义。

示例：

1
2
const empty: null = null;
const name: undefined;