TypeScript类初始化中自引用泛型的类型推断问题求解

问题场景 #

以下代码中，当内联定义methodOne和methodTwo时，TypeScript可以自动推断methodTwo的data参数类型（继承自methodOne的返回值）：

class MyClass<T extends Record<string, unknown> = any> {
  constructor(
    public params: {
      methodOne: (data: Record<string, unknown>) => T;
      methodTwo: (data: T) => void;
    }
  ) {
    // ...
  }
}

// 正常工作：类型推断完全正确
const myClassInstance = new MyClass({
  methodOne: (data) => {
    return {
      name: "foo",
      lastName: "bar",
    };
  },
  methodTwo: (data) => {
    console.log(data.lastName); // 类型推断正常
    console.log(data.name); // 类型推断正常
  },
});

但如果将methodTwo替换为外部定义的methodTwoExternal，会触发两个TypeScript错误：

// 报错代码
// 7022错误：'myClassInstanceTwo'隐式为any类型，因在自身初始化中被间接引用
const myClassInstanceTwo = new MyClass({
  methodOne: (data) => {
    return {
      name: "foo",
      lastName: "bar",
    };
  },
  methodTwo: methodTwoExternal,
});

type MethodOneReturn<T extends MyClass> = ReturnType<T["params"]["methodOne"]>;
// 2502错误：'data'的类型注解存在自引用，导致类型推断循环
function methodTwoExternal(data: MethodOneReturn<typeof myClassInstanceTwo>) {
  console.log(data.lastName); 
  console.log(data.name); 
}

解决方案 #

方案1：提前显式定义返回类型 #

直接明确methodOne的返回类型，用该类型约束外部方法的参数，从根源避免循环引用：

// 提前定义methodOne的返回类型
type UserInfo = {
  name: string;
  lastName: string;
};

class MyClass<T extends Record<string, unknown> = any> {
  constructor(
    public params: {
      methodOne: (data: Record<string, unknown>) => T;
      methodTwo: (data: T) => void;
    }
  ) {
    // ...
  }
}

// 用提前定义的类型作为参数类型
function methodTwoExternal(data: UserInfo) {
  console.log(data.lastName);
  console.log(data.name);
}

// 实例化时指定泛型参数，让TypeScript匹配类型
const myClassInstanceTwo = new MyClass<UserInfo>({
  methodOne: (data) => {
    return {
      name: "foo",
      lastName: "bar",
    };
  },
  methodTwo: methodTwoExternal,
});

方案2：使用工厂函数拆分推断流程 #

通过工厂函数先固定methodOne的返回类型，再传入外部方法，打破类型推断的循环：

class MyClass<T extends Record<string, unknown> = any> {
  constructor(
    public params: {
      methodOne: (data: Record<string, unknown>) => T;
      methodTwo: (data: T) => void;
    }
  ) {
    // ...
  }
}

// 工厂函数：分两步传入方法，先确定methodOne的返回类型
function createMyClass<T>(methodOne: (data: Record<string, unknown>) => T) {
  return {
    // 传入methodTwo并创建实例
    build: (methodTwo: (data: T) => void) => new MyClass({ methodOne, methodTwo }),
    // 导出类型辅助，方便外部方法定义参数类型
    ResultType: null as unknown as T
  };
}

// 第一步：传入methodOne，自动推断出返回类型T
const classBuilder = createMyClass((data) => ({
  name: "foo",
  lastName: "bar",
}));

// 利用builder导出的类型定义外部方法
function methodTwoExternal(data: typeof classBuilder.ResultType) {
  console.log(data.lastName);
  console.log(data.name);
}

// 第二步：传入外部方法创建实例，类型完全匹配
const myClassInstanceTwo = classBuilder.build(methodTwoExternal);

方案3：将外部方法改为泛型函数 #

让外部方法接受泛型参数，在实例化时由TypeScript自动推断泛型类型，避免自引用：

class MyClass<T extends Record<string, unknown> = any> {
  constructor(
    public params: {
      methodOne: (data: Record<string, unknown>) => T;
      methodTwo: (data: T) => void;
    }
  ) {
    // ...
  }
}

// 泛型外部方法，可添加类型约束增强安全性
function methodTwoExternal<T extends { name: string; lastName: string }>(data: T) {
  console.log(data.lastName);
  console.log(data.name);
}

// 实例化时TypeScript会自动将T推断为methodOne的返回类型
const myClassInstanceTwo = new MyClass({
  methodOne: (data) => ({ name: "foo", lastName: "bar" }),
  methodTwo: methodTwoExternal,
});

内容的提问来源于stack exchange，提问作者Ivan V.