Unknown Me

TypeScript 的一些优秀写法

最近写 ts 比较多，记下一些用法

慢慢补充，用到多少写多少。。

# 多用 const enum

const enum 跟直接 enum 用起来差不多，区别是：

  1. const enum 编译时会把实际用到的枚举成员替换成常量值：
// const-enum.ts
const enum Color {
  Red,
  Green,
  Blue
}
console.log(Color.Red)

// output.js
console.log(0 /* Red */);
  1. 而 enum 会编译成运行时的一个对象：
// enum.ts
enum Color {
  Red,
  Green,
  Blue
}
console.log(Color.Red)

// output.js
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
console.log(Color.Red);

所以，如果使用的时候只是简单字符串/数组比较，尽量用 const enum，编译后代码少点

但只能是静态值时可以用，动态获取的不行

const enum Color {
  Red,
  Green,
  Blue
}

// 这样可以
console.log(Color.Blue)

// 这样不行!!
const key = 'Blue'
console.log(Color[key])

但是如果是写第三方库的时候，由于不知道用户会怎么用，还是应该老老实实用 enum

# 初始化类属性

每次写类属性 + 构造函数都觉得是重复劳动怎么办？

简洁写法

class Student {
    constructor(public name: string, private age: number) {}
}

相当于

class Student {
    public name: string;
    private age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

也就是在构造函数的参数前面加可见性的修饰符的话，可以自动创建对应的字段，并初始化

# 从 API 结果生成 interface/type

后端给一堆 API 文档过来，我要转成 ts 的类型怎么办？

方法1，在线生成，把 json 贴进去就好

http://json2ts.com/ (opens new window)

方法2，用 typeof

const post = {
  id: '123',
  title: 'title',
  content: 'title',
  interact: {
    like_count: 100,
    view_count: 200,
  },
};

type Post = typeof post;
// 这样 Post 就相当于拿到了 post 实例的数据解构定义了

# 自动找 typings

在使用那些没有自带 d.ts 的库时，我经常要手动去搜一下有没有对应的 @types/package，这个体验太奇葩了。

现在最终找到一个小工具来替代，它会在 package.json 里寻找依赖，自动跑一次上面的流程，最后帮我写入 package.json，多爽！

https://www.npmjs.com/package/typesync (opens new window)