高可维护性TS编码技巧

1.显示的定义要使用的类型 减少借助类型推断的类型

import { useState } from 'react'

interface IUser {
  name: string;
}

function Component(user: IUser) {
  // 即使可以类型推到任然显示的去定义类型
  const [userInfo, setUserInfo] = useState<IUser>(user)
}

2. 合理使用enum和type

/ 通常来说，enum和type的使用场景还是比较接近的

// 在字段值是无语义的时候建议用enum
enum PersonType {
    plocieman = 0,
    firman = 1
}

// 如果字段值本身就是有语义的东西的时候建议用type
type KeyName = 'address' | 'name' | 'age'

// 通过const减少enum编译的内容, 在想把打包后代码体积压缩到极致的时候会有一定帮助
const enum PersonType2 {
    plocieman = 0,
    firman = 1
}

3. 利用keyof快速生成关键字

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

type AKeys = keyof A; // age | name

4. 使用ts提供的原生类型辅助工具

// Partial 将类型所有属性转化为可选的
interface A {
    age: number;
    name: string;
}

/**
** {age?:number;name?:string}
**/
type PartialA = Partial<A>

// Required 将类型所有属性转化为必选的
interface A {
    age?: number;
    name?: string;
}

/**
** {age:number;name:string}
**/
type RequiredA = Required<A>

// Readonly 将类型所有属性转化为只读的
interface A {
    age: number;
    name: string;
}

/**
** {readonly age:number;readonly name: string}
**/
type ReadOnlyA = ReadOnly<A>

// Pick 提取出想要的属性组成一个新的类型
interface A {
    age: number;
    name: string;
    address: string;
}

/**
** {age:number;address: string}
**/
type PickA = Pick<A, 'age'|'address'>

// Omit 剔除掉不想要的属性组成一个新的类型
interface A {
    age: number;
    name: string;
    address: string;
}

/**
** {age: number;address: string;}
**/
type OmitA = Omit<A, 'name'>

// Extract 提取两个类型的交集

type A = 'name' | 'age'
type B = 'age' | 'address'

// 'age'
type C = Extract<A, B>

// NonNullable 剔除掉null和undefined类型

type A = string | number | null | undefined
// string | number
type B = NonNullable<A>

5. 利用is帮助类型推断

interface A {
  type: string;
  data: {
    name: string;
  }
}
interface B {
  type: string;
  data: boolean;
}
function isA(params: any): boolean {
  return params.type === 'A';
}
// 这里能够帮助推断出类型
function isA2(params: any): params is A {
  return params.type === 'A';
}
function test(params: A | B) {
  if (isA(params)) {
    (params as A).data
  }
  if ((isA2(params))) {
    params.data
  }
}

6. 泛型类型限制

// 这里就会限制了类型A的data属性必须是有length属性，且length类型为number
interface A<T extends {length: number;}> {
  data:T;
}

7. Infer 辅助类型推断

// ts 官方是有提供相关的几个工具类型，也有用到 infer

/**
 * Obtain the parameters of a constructor function type in a tuple
 */
type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

8. 函数重载

// 常见的场景就是我们根据不同传参类型返回不同的值
interface Create {
  (val: number): number
  (val: string): string
  (val: Date): Date
}

// 这种写法无法感知传参和返回体之间的联系
// function create(params: number | string | Date): number | string | Date {}

const create: Create = (val) => {
    if (typeof val === 'number') return 0
    if (typeof val === 'string') return '0'
    return new Date(0)
}

一种比较常用的场景 eventBus

enum EventName {
  sayName,
  run,
}
interface EventBusOn {
  (event: EventName.sayName, cb: (params: {name: string}) => void): void
  (event: EventName.run, cb: (params: {duration: number}) => void): void
}

interface EventBusEmit {
  (event: EventName.sayName, params: {name: string}): void
  (event: EventName.run, params: {duration: number}): void
}

interface EventBus {
  on: EventBusOn;
  emit: EventBusEmit;
}

const eventBus: EventBus = new Vue();
eventBus.on(EventName.sayName, ({name}) => {
  console.log(name);
});
eventBus.emit(EventName.sayName, {name: 'sd'});

这样还有个问题，就是我们每次增加一个事件类型，都需要去修改 EventBusOn 和 EventBusEmit 两个接口，但是他们的修改模式基本是固定的，结合前面的两个技巧，我们也可以优化这个接口。

enum EventName {
  sayName,
  run,
  hi,
}
interface EventParams {
  [EventName.sayName]: {
    name: string;
  };
  [EventName.run]: {
    duration: number;
  };
  [EventName.hi]: {name:string}
}
interface EventBusOn {
  <T extends EventName>(event: T, cb: (params: EventParams[T]) => void): void;
}

interface EventBusEmit {
  <T extends EventName>(event: T, params: EventParams[T]): void;
}
interface EventBus {
  on: EventBusOn;
  emit: EventBusEmit;
}

const eventBus: EventBus = new Vue();
eventBus.on(EventName.sayName, ({name}) => {
  console.log(name);
})
eventBus.emit(EventName.sayName, {name: 'name'})

还遗留了一个小问题，没有解决不传参的eventBus场景，感兴趣的可以自己尝试解决一下


不传参EventBus解法一

export enum EventName {
  doSomething= 'doSomething',
  add = 'add',
  delete = 'delete'
}

interface EventParams {
  [EventName.doSomething]: DoSomething
  [EventName.add]: void
  [EventName.delete]: {name: string}
}

interface EventBusOn {
  <EventType extends EventName>(
    event: EventType,
    cb: EventParams[EventType] extends void
      ? () => void :
      (params: EventParams[EventType]) => void
  ): void
}

interface EventBusEmit {
  <EventType extends EventName>(
    ...args: EventParams[EventType] extends void
      ? [EventType] :
      [EventType, EventParams[EventType]]
  ): void
}

不传参EventBus解法二

interface EventParams {
  [EventName.doSomething]: DoSomething
  [EventName.add]: void
  [EventName.delete]: {name: string}
}

type NoParamsEvent = EventName.add |  EventName.delete

interface EventBusOn {
  <T extends Exclude<EventName, NoParamsEvent>>(event: T, cb: (params: EventParams[T]) => void): void
  <T extends NoParamsEvent>(event: T, cb: () => void): void
}

interface EventBusEmit {
  <T extends Exclude<EventName, NoParamsEvent>>(event: T, params: EventParams[T]): void
  <T extends NoParamsEvent>(event: T): void
}