Tips

Typescript 指导书

费时两个多月, 终于完成了 Typescript指导书 90%的基础知识, 需要更多实践

未知Object类型

interface AnyObject {
  [key: string]: any;
}

自定义Object类型

interface CustomObject<V> {
  [key: string]: V;
}

自定义Array类型

export type ArrayMap<T> = T[];

typescript 中 ! ? + - 都是什么意思？

!

表达式不能为 null 或 undefined 的方式

A new ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact. Specifically, the operation x! produces a value of the type of x with null and undefined excluded. Similar to type assertions of the forms <T>x and x as T, the ! non-null assertion operator is simply removed in the emitted JavaScript code.

class C {
    foo!: number;
    // ^
    // Notice this '!' modifier.
    // This is the "definite assignment assertion"

    constructor() {
      this.initialize();
    }

    initialize() {
      this.foo = 0;
    }
}

严格的属性初始化

非null断言运算符

[TypeScript 类属性检查](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/release-notes/TypeScript 2.7.html)

?

• 定义属性用于 可选属性定义

interface Profile {
  name: string;
  age?: number | string;
}

optional-properties

• 使用属性用于 可选的属性访问

?. 只会检查其左侧的值是否为 null 或 undefined，而不检查任何后续属性。

const x = foo?.bar.baz

// ===>

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

Note: typescript 3.7+才支持。

optional-chaining

Announcing TypeScript 3.7 RC -> 译文

??

空值合并运算符 是即将推出的另一个 ECMAScript 2020功能，它与可选的链接并驾齐驱。

let x = foo ?? bar();

// ===>

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

nullish-coalescing

+ -

TypeScript 2.8 为映射类型增加了增加或移除特定修饰符的能力。 特别地，映射类型里的readonly或?属性修饰符现在可以使用+或-前缀，来表示修饰符是添加还是移除。

type MutableRequired<T> = {
  -readonly [P in keyof T]-?: T[P]
};  // 移除readonly和?
type ReadonlyPartial<T> = {
  +readonly [P in keyof T]+?: T[P]
};  // 添加readonly和?

改进对映射类型修饰符的控制

参考

Typescript 官方文档

TypeScript Spec

TypeScript 入门教程

What's new in TypeScript