将原生JS迁移至TypeScript：resource函数返回类型丢失问题求解

看起来你遇到的核心问题是：当在Demo类构造函数中初始化resource的返回值时，TypeScript无法自动识别其完整的类型签名，而手动定义接口又不想重复参数和返回值的定义。下面给你两种简洁的解决方案，完全避免重复代码，同时保留完整的类型校验：

方案一：利用ReturnType自动推导类型（推荐） #

这种方式不需要手动编写接口，直接让TypeScript根据resource函数的实现自动推导其返回类型，完美避免重复定义：

// 先实现resource函数，明确内部方法的参数和返回类型
export function resource() {
  return {
    // 给每个方法明确参数和返回类型
    fetch: (id: number): Promise<{ id: number; name: string }> => {
      // 你的业务实现
      return Promise.resolve({ id, name: "test" });
    },
    update: (data: { id: number; name: string }): Promise<void> => {
      return Promise.resolve();
    },
    delete: (id: number): Promise<void> => {
      return Promise.resolve();
    }
  };
}

// 自动获取resource函数的返回类型，无需手动写接口
type ResourceInstance = ReturnType<typeof resource>;

class Demo {
  // 明确指定resource的类型为推导出来的ResourceInstance
  resource: ResourceInstance;

  constructor() {
    this.resource = resource();
    // 现在TS会自动提示this.resource的所有方法，并且校验参数和返回值
    this.resource.fetch(1).then(item => console.log(item.name));
  }
}

这个方案的优势在于：你只需要在resource函数的方法中写一次类型定义，ReturnType<typeof resource>会自动提取整个返回对象的类型结构，完全没有重复代码。

方案二：先定义接口，让函数实现接口 #

如果你更倾向于显式定义接口（比如需要在多个地方复用这个类型），可以先写接口，然后让resource函数返回该接口类型，TS会自动校验函数返回值是否符合接口，同样不需要重复参数定义：

// 先定义resource返回对象的接口，只写一次类型签名
interface ResourceInstance {
  fetch(id: number): Promise<{ id: number; name: string }>;
  update(data: { id: number; name: string }): Promise<void>;
  delete(id: number): Promise<void>;
}

// 让resource函数明确返回ResourceInstance类型
export function resource(): ResourceInstance {
  return {
    // TS会自动校验这里的参数和返回值是否匹配接口，无需重复写类型
    fetch: (id) => {
      return Promise.resolve({ id, name: "test" });
    },
    update: (data) => {
      return Promise.resolve();
    },
    delete: (id) => {
      return Promise.resolve();
    }
  };
}

class Demo {
  resource: ResourceInstance;

  constructor() {
    this.resource = resource();
    // 同样能获得完整的类型提示和校验
  }
}

为什么原来的代码会丢失类型？ #

在原生JavaScript迁移到TypeScript时，如果不给resource函数指定返回类型，也不给Demo类中的resource属性指定类型，TypeScript可能会将其推断为any或者非常宽泛的object类型，导致内部方法的类型信息被隐藏。通过上面两种方式明确类型后，TypeScript就能完整识别所有方法的签名了。

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