TypeScript 速查表 | Cheat Sheet

本文根据 Devhints / TypeScript 翻译。代码示例及版本范围沿用原文。

关于

TypeScript 与 ES2015 类似，但具备类型检查功能。所有 ES2015（类等）均应适用。

基本类型

any
void

boolean
number
string

null
undefined

bigint
symbol

string[]          /* or Array<string> */
[string, number]  /* tuple */

string | null | undefined   /* union */

never  /* unreachable */
unknown

enum Color {
  Red,
  Green,
  Blue = 4
};

let c: Color = Color.Green

声明

let isDone: boolean
let isDone: boolean = false

function add (a: number, b: number): number {
  return a + b
}

// Return type is optional
function add (a: number, b: number) { ... }

类型断言

变量

let len: number = (input as string).length
let len: number = (<string> input).length  /* not allowed in JSX */

函数

function object(this: {a: number, b: number}, a: number, b: number) {
  this.a = a;
  this.b = b;
  return this;
}

// this is used only for type declaration
let a = object(1,2);
// a has type {a: number, b: number}

接口

行内

function printLabel (options: { label: string }) {
  console.log(options.label)
}

// Note the semicolon
function getUser (): { name: string; age?: number } {
}

显式

interface LabelOptions {
  label: string
}

function printLabel(options: LabelOptions) { ... }

可选属性

interface User {
  name: string;
  age?: number;
}

只读

interface User {
  readonly name: string
}

动态键

{
  [key: string]: Object[]
}

类型别名

type Name = string | string[]

交叉类型

interface Colorful { ... }

interface Circle { ... }

type ColorfulCircle = Colorful & Circle;

函数类型

interface User { ... }

function getUser(callback: (user: User) => any) { callback({...}) }

getUser(function (user: User) { ... })

类

class Point {
  x: number
  y: number
  static instances = 0
  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
}

继承

class Point {...}

class Point3D extends Point {...}

interface Colored {...}

class Pixel extends Point implements Colored {...}

字段简写初始化

class Point {
  static instances = 0;
  constructor(
    public x: number,
    public y: number,
  ){}
}

无需初始化的字段

class Point {
  public someUselessValue!: number;
  ...
}

泛型

class Greeter<T> {
  greeting: T
  constructor(message: T) {
    this.greeting = message
  }
}

let greeter = new Greeter<string>('Hello, world')

模块

export interface User { ... }

类型提取

interface Building {
  room: {
    door: string;
    walls: string[];
  };
}

type Walls = Building['room']['walls']; // string[]

keyof 类型运算符

type Point = { x: number; y: number };

type P = keyof Point; // x | y

条件类型

// SomeType extends OtherType ? TrueType : FalseType;

type ToArray<T> = T extends any ? T[] : never;

type StrArrOrNumArr = ToArray<string | number>; // string[] | number[]

类型推断

type GetReturnType<T> = T extends (...args: unknown[]) => infer R
  ? R
  : never;

type Num = GetReturnType<() => number>; // number

type First<T extends Array<any>> = T extends [infer F, ...infer Rest] ? F : never;

type Str = First<['hello', 1, false]>; // 'hello'

字面量类型

const point = { x: 4, y: 2 }; // { x: number, y: number }

const literalPoint = { x: 4, y: 2 } as const; // { readonly x: 4, readonly y: 2 };

模板字面量类型

type SpaceChar = ' ' | '\n' | '\t';

type TrimLeft<S extends string> = S extends `${SpaceChar}${infer Rest}` ? TrimLeft<Rest> : S;

type Str = TrimLeft<'    hello'>; // 'hello'