typescript 泛型继承类型错误

Question

我想要实现类似原生 addEventListener 的效果，根据 key 的值推导出 callback 参数的类型。有一个接口定义了 key 和 callback 参数的对照，但是如何存储所有的 callback 出现了问题。
代码如下：

type IOptionStore = {
  shapeType: LineType;
  strokeStyle: string;
  lineWidth: number;
};
type IChangeHandler = (value: IOptionStore[keyof IOptionStore]) => void;
const listenerHandlersMap = new Map<keyof IOptionStore, IChangeHandler[]>([
    ["shapeType", []],
    ["strokeStyle", []],
    ["lineWidth", []],
  ]);
function addListener<K extends keyof IOptionStore>(
    key: K,
    callback: (value: IOptionStore[K]) => void
  ) {
    this.listenerHandlersMap.get(key)?.push(callback);
  }

在 push(callback) 的时候报错了
请问这个情况该如何处理？

Answer 1

这个错的本质是：
type callback1 = (value: string | number) => void
type callback2 = (value: string) => void

可以看出来，callback1和callback2的入参类型都不一样

你的 addListener 可以传类型 addListener<'strokeStyle' | 'shapeType'>
那这时候 callback 就变成了 (value: string | LineType) => void

也可以传类型 addListener<'strokeStyle'> 这时候 callback 又变成了 (value: string) => void

你Map里的callback是固定的，而addListener的callback是多变的

办法就是用as

listenerHandlersMap.get(key)?.push(callback as IChangeHandler);

Answer 2

换了个写法，还是报错：

type IOptionStore = {
  shapeType: LineType;
  strokeStyle: string;
  lineWidth: number;
};
type IChangeHandler<K extends keyof IOptionStore> = (value: IOptionStore[K]) => void;
type listenerMap = {
  [key in keyof IOptionStore]: IChangeHandler<key>[];
};
const listenerHandlersMap: listenerMap = {
    shapeType: [],
    strokeStyle: [],
    lineWidth: [],
  };