TypeScript 合并Getter/Setter结构下的类型推断实现方法

解决方案 #

以下是完全符合要求的类型实现：

// 定义单个属性对应的get/set对类型约束
type GetSetPair<StateValueType, SetInputType> = {
  get: (stateVal: StateValueType) => SetInputType;
  set: (inputVal: SetInputType) => StateValueType;
};

// 配置项类型定义
type CreateOptions<
  State extends Record<string, any>,
  SetInputMap extends Record<keyof State, any>
> = {
  state: State;
  gettersAndSetters: {
    [K in keyof State]: GetSetPair<State[K], SetInputMap[K]>;
  };
};

// create 函数定义
function create<
  State extends Record<string, any>,
  SetInputMap extends Record<keyof State, any>
>(opts: CreateOptions<State, SetInputMap>) {
  // 业务逻辑实现
  return opts;
}

正常使用示例 #

类型推断完全符合预期：

create({
  state: {
    s1: 5,
    s2: '9',
  },
  gettersAndSetters: {
    s1: {
      // n 自动推断为 number 类型，返回值自动要求为 string 类型（与set入参对齐）
      get: n => n.toString(),
      set: (s: string) => parseInt(s, 10),
    },
    s2: {
      // s 自动推断为 string 类型，返回值自动要求为 number 类型（与set入参对齐）
      get: s => parseInt(s, 10),
      set: (n: number) => n.toString(),
    }
  },
});

错误场景校验 #

你给出的错误示例会正确抛出所有预期的类型错误：

create({
  state: {
    s1: 5,
  },
  gettersAndSetters: {
    s1: {
      get: n => {
        // 报错：parseInt 第一个参数要求为 string，但是n的类型为number
        parseInt(n, 10);
        // 报错：get方法要求返回string类型，此处返回number
        return 5;
      },
      set: (s: string) => {
        // 报错：set方法要求返回number类型，此处返回string
        return 'mystring';
      },
    },
  },
});

内容的提问来源于stack exchange，提问作者darkadept