TypeScript中如何让对象属性label返回字符串而非函数类型

问题根源 #

你当前给label属性赋值的本身就是一个接收object参数、返回字符串的函数，因此它的类型自然是(object: Object) => string而非字符串类型。你尝试的类型标注写法属于错误用法，对象属性不支持这种直接的函数类型赋值标注；IIFE不生效的原因是你执行IIFE时没有拿到要传入的object实例，无法计算得到结果。

可行方案 #

方案1：生成选项时传入参数直接计算（最推荐）

如果调用requestOptions生成配置时，你已经能拿到用于计算label的object实例，直接把这个实例作为参数传入requestOptions即可，此时label会直接生成字符串值：

// 定义选项的TS类型，约束label必须为字符串
interface Option {
  id: number;
  label: string;
  value: string;
}

// 修改requestOptions接收object参数
const requestOptions = (object: Object): Option[] => [
  {
    id: 3,
    label: `${activeStatus(object)}`, // 直接计算得到字符串
    value: 'toggleActiveStatus',
  }
] 

// 调用时传入你需要的object实例，得到的label已经是字符串类型
const options = requestOptions(yourObjectInstance)

方案2：组件侧适配函数类型label

如果用于计算label的object实例只能在组件内部拿到，你可以和组件逻辑对齐，把label定义为「字符串+返回字符串的函数」的联合类型，组件内部判断如果是函数就调用得到字符串：

interface Option {
  id: number;
  label: string | ((object: Object) => string);
  value: string;
}

const requestOptions = (): Option[] => [
  {
    id: 3,
    label: (object: Object) => `${activeStatus(object)}`,
    value: 'toggleActiveStatus',
  }
] 

// 组件内部使用label时的处理
const getLabel = (option: Option, obj: Object) => {
  return typeof option.label === 'function' ? option.label(obj) : option.label
}

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