TypeScript按对象/类型生成对应函数 优化无参调用及冗余undefined代码

解决方案 #

问题1：删除冗余的undefined写法 #

原来的写法需要为每个属性手动标注类型并重复赋值undefined，有两种优化方案可选：

• 最小改动优化：将尖括号类型断言改为更简洁的as写法，删除data4重复的类型标注

  const myFunctions = {
    data1: undefined as number | undefined,
    data2: undefined as string[] | undefined,
    data3: undefined as string | undefined,
    data4: undefined,
  }
  

• 更简洁的批量生成方案：通过泛型工具函数批量生成配置对象，只需要定义一次类型和属性名数组即可，避免重复写undefined

  // 只需要定义一次参数类型映射
  type FunctionParamMap = {
    data1: number
    data2: string[]
    data3: string
    data4: undefined
  }
  // 工具函数自动生成带类型的配置对象
  const createFunctionConfig = <T extends Record<string, unknown>>(keys: Array<keyof T>) => {
    return Object.fromEntries(keys.map(key => [key, undefined])) as { [K in keyof T]: T[K] | undefined }
  }
  // 生成配置对象，无需手动写每个属性的undefined，属性名传错TS会自动报错
  const myFunctions = createFunctionConfig<FunctionParamMap>(['data1', 'data2', 'data3', 'data4'])
  

问题2：支持data4无参调用 #

报错原因是原来的TFunctions类型没有对属性为undefined的场景做特殊处理，统一要求传入参数。我们可以通过条件类型适配无参场景：

type TFunctions<Obj> = {
  [Prop in keyof Obj]: 
    // 如果属性类型处理后为never（即原类型只有undefined），返回无参函数类型
    NonNullable<Obj[Prop]> extends never 
      ? () => void 
      : (value: NonNullable<Obj[Prop]>) => void
}

完整可运行代码 #

type FunctionParamMap = {
  data1: number
  data2: string[]
  data3: string
  data4: undefined
}

const createFunctionConfig = <T extends Record<string, unknown>>(keys: Array<keyof T>) => {
  return Object.fromEntries(keys.map(key => [key, undefined])) as { [K in keyof T]: T[K] | undefined }
}

const myFunctions = createFunctionConfig<FunctionParamMap>(['data1', 'data2', 'data3', 'data4'])

type TFunctions<Obj> = {
  [Prop in keyof Obj]: 
    NonNullable<Obj[Prop]> extends never 
      ? () => void 
      : (value: NonNullable<Obj[Prop]>) => void
}

const functionGenerator = <T>(fObj:T):TFunctions<T> => {
  const funObj:any = {}
  for(const key in fObj){
    funObj[key] = (payload : any) :void => { console.log(payload)}
  }
  return funObj;
}

const f = functionGenerator(myFunctions)
f.data1(1) // 正常
f.data2(['a','b']) // 正常
f.data3('test') // 正常
f.data4() // 无报错，正常运行

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