一. enum，何时去使用enum
- enum用于映射，以下是基本用法
enum A {
todo = 0, // 表示todo等于0，往下依次增加
done,
archived,
deleted,
}
let orderStatus = 0;
orderStatus = A.todo;
orderStatus = A.done;
console.log(orderStatus);
- 例子2，通过位运算和enums做权限控制
enum Permission {
None = 0, // 0000
Read = 1 << 0, // 0001
Write = 1 << 1, // 0010
Delete = 1 << 2, // 0100
Manage = Read | Write | Delete, // 二进制的或 // 0111
}
type User = {
permission: Permission;
};
const user: User = {
permission: 0b0111,
}; // 这个值应该是从后台获取
// 用二进制表示权限，若user.permission&Permission.Write === Permission.Write 则user.permission有Permission.Write的所有1
if ((user.permission & Permission.Write) === Permission.Write) {
console.log('拥有写权限');
}
二. 什么时候用enum会显得很呆
// 以下这种场景就很呆，不如用type+并集
enum Fruit {
apple = 'apple',
banana = 'banana',
pineapple = 'pineapple',
watermelon = 'watermelon',
}
let f: Fruit = Fruit.apple;
f = Fruit.watermelon;
console.log(f);
- 对比直接用type+并集的方式
// 用type加并集
type Fruit = 'apple' | 'banana' | 'watermelon' | 'pineapple';
let f: Fruit = 'banana';
f = 'watermelon';
console.log(f);
- 总结: number + enum 不错，string 和 混用的情况都不太合适，如果没有enum在js中我们可以用map来替代
三. type和interface的区别
-
-
什么时候用type？
- 几乎没有不能用type的场景，它的官方名称应该叫做类型别名(Type Aliases)，也就是给其它类型取一个名字
-
type Name = string;
const a: Name = 'hi';
type FalseLike = 0 | '' | null | undefined | false;
// 比较特殊的带有属性的函数的声明方式
type FnWithProp = {
(a: number, b: number): number;
prop: string;
};
const f: FnWithProp = (x, y) => {
return x + y;
};
f.prop = 'hello';
-
- 为什么叫做类型别名
type A = string;
type B = A; // B 实际上的类型还是string，不是A，也就是说type声明的是一个类型的别名，没有产生新的类型
-
-
什么时候用interface
- 接口interface是面向对象里面的概念，它表示class需要有的一些功能，ts中的功能不仅能描述功能也能描述对象的属性
-
type A1 = Array<string> & {
name: string;
} & X;
interface X {
age: number;
}
// interface就是用面向对象的黑话，把type能做的事情再描述一遍
interface A2 extends Array<string>, X {
name: string;
}
-
- interface描述函数
interface Fn {
(a: number, b: number): number;
xxx: number;
}
const f: Fn = (x, y) => {
return x + y;
};
f.xxx = 1;
console.log(f);
-
- 描述日期对象
interface D extends Date {
}
const d: D = new Date();
console.log(d);
-
-
type和interface的范围如下图
- 这里可以看到type也能描述对象，是不是就不需要interface? 我感觉并非如此，主要有两点。第一点，其实interface这个特性的出现迎合了面向对象的粉丝的需要，有助于typescript这门语言的推广传播。 第二点之后我会细说。
-
-
-
总结区别
-
- interface只描述对象，type则描述所有区别
-
- type 只是别名interface则是类型声明
-
四. type和interface的第三个区别
- type的重要特性: type不可以重新赋值，这样的好处计算非常快，但是缺点就是type不好扩展
type A = number;
- interface可以自动合并，所以可以被扩展
interface X {
name: string;
}
interface X {
age: number;
}
const a: X = {
name: 'frank',
age: 18,
};
- interface扩展的例子
// 扩展axios
import {AxiosRequestConfig} from 'axios'
declare module 'axios' {
export interface AxiosRequestConfig {
_autoLoading?: boolean;
_mock?: string;
}
}
// 扩展string
interface String {
padZero(length: number): string;
}
const s = 'hello';
s.padZero(1);
- 总结: 对外API尽量使用interface，方便扩展，对内API尽量用type，防止代码分散
