haoziの窝

一些typescript技巧

2019-11-19

一些typescript技巧#

用了 TS 也2年多了, 把遇到的一些 TS 的问题以及解决方案罗一下

有确说实 也就是文档看少了 见引用资料

多看一下 typescript 的源码, 以及各大流行框架的源码, 可以学到很多知识

Any#

毕竟 AnyScript

没啥好说的 any as any

一些新特性#

Optional chaining#

TS 3.7.2 版本新增 详细说明

这玩意很多语言都有了, 就是让你少写一些 if / &&

let x = foo?.bar.baz();
↓
let x = (foo === null || foo === undefined) ?
    undefined :
    foo.bar.baz();

Nullish Coalescing#

TS 3.7.2 版本新增 详细说明

就检查默认值是否存在, 官方例子

let x = foo ?? bar();
↓
let x = (foo !== null && foo !== undefined) ?
    foo :
    bar();

实际作用就是代替我们经常使用的 ||, 避免一些不可预期的错误 比如 0,""(空字符串

function Foo(name: string | null) {
   // this.name = this.name || "default";
    this.name = this.name ?? "default"
}

从 JSON生成Typescript定义#

我一般使用的 是 这个Json2Ts

关于对象#

MapLike#

interface MapLike<T> {
    [index: string]: T;
}

比如你定义了一个 Object 但是没定义 type 想操作里面的东西, 但是提示 Key 必须是 unique symbols的时候

如果给定了 Object 的 keys 列表

type usernames = "haozi" | "haozi2"

type IUser<T> = {
    [index in usernames]: T
}

如果给定的是 一个 class, interface

type A<T> = {
    [index in keyof ITest]: T;
};
  • typeof - 获取变量的类型
  • keyof - 获取类型的键
  • in - 遍历键名

以上三个可以组合使用

类型检查#

函数入参增加类型检查, 保证 a的读取写入安全

class Test {
    a: string 

    get_prototype<T extends keyof Test>(key: T): Test[T] {
        return this[key];
    }
    set_prototype<T extends keyof Test>(key: T, value: Test[T]): this {
        (this as Test)[key] = value;
        return this;
    }
}

never#

这属性用到的蛮少的, 比如一个函数永远不会返回值, 比如 renderLoop

// Function returning never must have unreachable 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 have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}

工具属性#

没啥好说的 文档,(点击函数名也可以跳转)

  • Partial<T>, 将 T 里面所以的属性变为可选属性

  • Readonly<T>T 里面所以的属性变为只读属性

  • Record<K,T> 构造一个类型为T属性为K的类型, 类似

interface F<K,T> {
    [index in T]: K
}
  • Pick<T,K>T 里面选择 K的成员 来组成一个新的属性

  • Omit<T,K>Pick 相反, 从 T里面排除K的成员来组成新的属性

  • Exclude<T,U>T,U两个元素的

  • Extract<T,U>T,U的成员并集

  • NonNullable<T> 排除 T 中的所有 null, undefine

  • ReturnType<T> 由函数类型T的返回值类型构造一个类型。

  • InstanceType<T>由构造函数类型T的实例类型构造一个类型。

  • Required<T>T成员改为 required

  • ThisType<T>这个工具不会返回一个转换后的类型。它做为上下文的this类型的一个标记。注意,若想使用此类型,必须启用--noImplicitThis

不支持 Emoji 的语言是屑#

const 🌶️💦💉💧🐂🍺 true
const 👴👀⑧⭐️ false
const 🍜 main
const 🔢 int
const 🔠 char

IOC 容器#

// TODO

剩下的问题持续收集中#

// TODO

引用资料#

[1]: Typescript Documentation https://www.typescriptlang.org/docs/home.html

[2]: TypeScript Deep Dive https://basarat.gitbooks.io/typescript/

Tags: 笔记

除另有声明外,本博客文章均采用 知识共享(Creative Commons) 署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议 进行许可。