五个ts小技巧和函数

102 阅读1分钟

一、特定值为 null 或 undefined 的场景

const raise = (err: string) : never => { throw new Error(err);};

应用:

const Page = (props: { params: { id?: string }}) => {
  const id = props.params.id ?? raise('No id provided');
};

二、 映射类型

1. readonly

interface IUser {
  name: string;
  age: number;
}

type ReadonlyUser = Readonly<IUser>;

2. Partial

type PartialUser = Partial<IUser>;

此时,PartialUser 这个类型就是 { name?: string, age?: number }


3. record

type UserRecord = Record<string, IUser>;

此时userRcord 这个类型接受一个string类型作为key,value类型是IUser

4. 定制一个类型

type Nullable<T> = { [P in keyof T]: T[P] | null };

此时类型T的每个属性都可以为null了

三、类型防护

function isString(test: any): test is string {
  return typeof test === "string";
}

function printLength(input: string | any[]) {
  if (isString(input)) {
    console.log(input.length);
  } else {
    console.log(input.length);
  }
}

这里的 isString 是一个类型防护

四、强类型事件emitters

import { EventEmitter } from "events";

interface MyEvents {
  event1: (param1: string, param2: number) => void;
  event2: () => void;
}

class MyEventEmitter extends EventEmitter {
  public emit<T extends keyof MyEvents>(
    event: T,
    ...args: Parameters<MyEvents[T]>
  ) {
    return super.emit(event, ...args);
  }

  public on<T extends keyof MyEvents>(
    event: T,
    listener: MyEvents[T]
  ): this {
    return super.on(event, listener);
  }
}

const myEmitter = new MyEventEmitter();
myEmitter.on('event1', (param1, param2) => {
  // Type-safe parameters!
});

五、强制类型处理

interface Config {
  readonly apiUrl: string;
  readonly defaultTimeout: number;
}

const config: Config = {
  apiUrl: "https://myapi.com",
  defaultTimeout: 5000,
};

config.apiUrl = "https://anotherapi.com"; // Error!

原文:double-trouble.dev/post/typesc…