一个ts问题，很伤脑筋？

Question

先说问题，renderType是一个联合类型，Shape类里面可能有一些方法，方法名必须是renderType里面的一个，然后Shape类里面需要有一个添加的方法，就是给Shape添加方法，添加的方法名也必须是renderType里面的一个，问题就出在这个添加方法customShape上，报错，说现在的类里面没有renderType的其他方法，不知道应该怎么改。

type renderType =
  | 'rectangle'
  | 'ellipse'
  | 'round'
  | 'triangle'
  | 'round-triangle'
  | 'round-rectangle'
  | 'bottom-round-rectangle'
  | 'cut-rectangle'
  | 'barrel'
  | 'rhomboid'

type returnSize = {
  width: number;
  height: number;
};

type ShapeType = {
  [key in renderType]?: (
    contentWidth: number,
    contentHeight: number
  ) => returnSize;
  // customShape: (shape: type.renderType, calcFunc: ( contentWidth: number, contentHeight: number ) => returnSize) => void
};

export class Shape implements ShapeType {
  rectangle(contentWidth: number, contentHeight: number) {
    return {
      width: contentWidth + 20,
      height: contentHeight + 10
    };
  }

  customShape(shape: renderType, calcFunc: Function): void {
    this[shape] = calcFunc;
  }
}

Answer 1

在掘金的小册群里有大佬指点了一下，核心就是，显示的指定this，转成js的时候，这个this参数会被忽略，还是只有shape,calcFunc两个形参

customShape(this: ShapeType ,shape: renderType, calcFunc: Function): void {
    this[shape] = calcFunc;
  }

Answer 2

可以试试这个

 type TShapeCommonFunc = (contentWidth: number, contentHeight: number) => { width: number, height: number }

 interface IShape {
  rectangle?: TShapeCommonFunc,
  ellipse?: TShapeCommonFunc,
  round?: TShapeCommonFunc,
  triangle?: TShapeCommonFunc,
  roundTriangle?: TShapeCommonFunc,
  roundRectangle?: TShapeCommonFunc,
  bottomRoundRectangle?: TShapeCommonFunc,
  cutRectangle?: TShapeCommonFunc,
  barrel?: TShapeCommonFunc,
  rhomboid?: TShapeCommonFunc,
  addFunc: (newFunc: TShapeCommonFunc, funcName: Exclude<keyof IShape, 'addFunc'>)=>void
 }

 export class Shape implements IShape {
  ellipse: TShapeCommonFunc
  round: TShapeCommonFunc
  triangle:TShapeCommonFunc
  roundTriangle:TShapeCommonFunc
  roundRectangle:TShapeCommonFunc
  bottomRoundRectangle:TShapeCommonFunc
  cutRectangle:TShapeCommonFunc
  barrel:TShapeCommonFunc
  rhomboid:TShapeCommonFunc
  
  rectangle(contentWidth: number, contentHeight: number) {
    return {
      width: contentWidth + 20,
      height: contentHeight + 10
    };
  }

  addFunc(newFunc: TShapeCommonFunc, funcName: Exclude<keyof IShape, 'addFunc'>) {
    this[funcName] = newFunc
  }
 }

 // test --------------
 const b = new Shape();
 b.addFunc((contentWidth: number, contentHeight: number) => {
  console.log('--------------------')
  return {
    height: 1,
    width: 2,
  }
 },'ellipse')
 b.ellipse(2,3)