TypeScript全解:类型(下)

何时用enum类型

当前端遇到这种需求的时候:

前端需要显示后端返回的状态 1,2,3,4,还要传输这个值回去,

但是我们经常会忘记这个值是什么意思,这个时候就可以使用 enum

🌰:二进制权限

enum Permission {
  None = 0,
  Read = 1 << 0, // 0001 // 这里的 << 是左移操作,1在二进制表示为 00..001,那么左移一位就是 00..010
  Write = 1 << 1, // 0010
  Delete = 1 << 2, //0100
  Manage = Read | Write | Delete, // 0111 // 这个的 | 是并操作,取二进制各个位置的 1 为结果
}

const user1: { permission: Permission } = { permission: 0b0101 };

// 这里的 & 是与操作,取二进制各个位置同时为 1的为结果
if ((user1.permission & Permission.Write) === Permission.Write) {
  console.log("拥有写权限")
}
if ((user1.permission & Permission.Manage) === Permission.Manage) {
  console.log("拥有管理权限")
}

何时不用 enum

并不是说不能用,而是这时候用会显得很呆

enum Fruit {
  apple = 'apple',
  banana = 'banana',
  pineapple = 'pineapple',
  watermelon = 'watermelon',
}

let f = Fruit.apple; // 这里甚至不能写 'apple'
f = Fruit.pineapple

几乎等价于

type Fruit = 'apple' | 'banana' | 'pineapple' | 'watermelon'

let f = 'apple'
f = 'pineapple'

结论

  • number enum √
  • string enum ×
  • other enum ×

个人也觉得在 JS 中不太实用,在没有 enum 的时候 JS 程序员就在用对象表示了,而且还比不上对象好用:

const PERMISSION = {
  0: 'read',
  1: 'write',
  2: 'delete',
  3: 'manage'
}

也几乎是一样的效果,无论有没有 enum,也能用的好好的,最多可能性能上没有 enum 好,又不是不能用,建议是能不用就不用

type与interfacer的区别

何时用 type?

答案是什么时候都可以,几乎没有不能用的场合

type 又叫类型别名,英文 Type Alias,简单来说就给其他类型取个名字

比如说我们可以给 string 换个名字,以下这样几乎是等价的:

type Name = string;

const a: Name = 'hi'

等等其他复杂类型都可以用 type,这里只说一种特殊情况,带有属性的函数:

type Fn = (a: number) => void // 纯函数,没有属性
type FnWithProp = {
  (a: number): void; // 这里来声明函数,语法很奇怪把~
  prop: string;
}

为何要叫做类型别名,不叫做类型声明

因为 ts 一开始并没有想要记住这个名字,比如说:

type A = string;
type B = A

请问此时 B 的类型是什么,应该是 A 把,
但是其实是 string,A 没有被记住

何时用 interface

interface 又叫声明接口,

接口是什么?你翻过的 JS 教程中,从来没有提到过这个单词,那是那个理论讲到这个呢?是面向对象。ts 为了满足这些人,搞了一个接口出来。

此接口非彼接口,还是对象,描述对象的属性(declare the shapes of objects)

// 描述普通对象
interface A {
  name: string;
  age: number;
}

// 描述数组
interface A extends Array<string>{
  name: string;
}
// 如何用 type 实现上述效果
type A2 = Array<string> & { name: string; }

// 描述函数
interface Fn {
  (a: number): void;
}
// 描述带成员的函数
interface Fn {
  (a: number): void;
  prop: string;
}

// 描述日期对象
interface D extends Date {}

type 不可重新赋值

这个既是优点也是缺点

type A = number;

A = string // 报错,没有这种语法

好处是提升效率,声明什么就是什么,不用管以后你还会变,当然带来的缺点则是不好拓展

interface 能自动合并

比如在我们经常使用的 axios 上:

// custom.d.ts
import { AxiosRTequestConfig } from 'axios'

declare module 'axios' {
  export interface  AxiosRequestConfig {
    _autoLoading?: boolean;
  }
}
axios.get('/list', {
  _autoLoading: true // 拓展出来的
})

比如拓展 String:

declare global {
  interface String {
    newFn(x: string): void
  }
}

const s = 'string'
s.newFn('xxx') // 此时不会报错

小结

  • 区别1:
    • interface 只描述对象
    • type 则描述所有数据
  • 区别2:
    • type 只是别名
    • interface 则是类型声明
  • 区别3:
    • 对外 API 尽量用 interface,方便拓展
    • 对内 API 尽量用 type,防止代码分散

看起来 type 的应用范围更广,且包括 interface,看起来 interface 没有必要出现。其实是原因之一为了迎合面向对象粉丝的需求

听说 type 不能继承?

瞎说!

继承的本质是什么?就是一个东西拥有另一个东西的属性

这个东西很容易实现,比如说复制

那 type 怎么拓展?

type MyAxiosRTequestConfig  = AxiosRTequestConfig  & { _autoLoading?: boolean; }

几乎是一样的效果,而且更安全,不会修改到原先的类型。

总结

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容