含方法的对象经泛型函数传递后Getter返回类型为any的问题

问题描述 #

以下代码中，store.simpleGetter实际返回字符串类型，但TypeScript却将其推断为any：

// 复现问题必需的代码
const wrapperFunction = <T>(obj: T) => obj;

const store = wrapperFunction({
  value: 'Super max',

  get simpleGetter() {
    return this.value;
  },

  // 复现问题必需的方法
  bark() {
    console.log('WUF');
  },
});

// TypeScript推断val为any
const val = store.simpleGetter;
// 实际运行输出"Super max"
console.log(val);

原因分析 #

当对象同时包含getter访问器和普通方法时，TypeScript的泛型类型推断会出现局限：泛型函数wrapperFunction处理这类对象时，无法正确解析getter中this的上下文关联，导致getter的返回类型无法被正确推导，最终降级为any。

解决方案 #

方案1：显式定义对象类型接口

通过提前定义包含getter类型的接口，明确TypeScript的类型约束：

interface Store {
  value: string;
  // 明确getter的返回类型为string
  readonly simpleGetter: string;
  bark(): void;
}

const wrapperFunction = <T>(obj: T) => obj;

// 传入泛型参数指定类型
const store = wrapperFunction<Store>({
  value: 'Super max',
  get simpleGetter() {
    return this.value;
  },
  bark() {
    console.log('WUF');
  },
});

const val = store.simpleGetter; // 类型被正确推断为string

方案2：移除泛型函数包裹（业务允许时）

如果不需要通过泛型函数处理对象，直接定义对象即可让TypeScript正确推断getter类型：

const store = {
  value: 'Super max',
  get simpleGetter() {
    return this.value;
  },
  bark() {
    console.log('WUF');
  },
};

const val = store.simpleGetter; // 类型被正确推断为string

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