利用TypeScript泛型与接口实现HTTP服务模拟数据精确类型推断教程

interface HttpServiceMockData<T> {
  status: number;
  data: T;
  url: string;
}

export function createHttpServiceMock<T>(data: HttpServiceMockData<T>[]) {
  return {
    get: async (url: string): Promise<{ data: T }> => {
      const res = data.find((d) => d.url === url);
      if (!res) {
        throw new Error(`No data found for url ${url}`);
      }
      return {
        data: res.data,
      };
    },
  };
}

// 使用示例
const service = createHttpServiceMock([
  {
    url: '/users/1',
    data: {
      id: 1,
      username: 'test',
    },
    status: 200,
  },
  {
    url: 'test',
    data: {
      id: 1,
      username: 'test',
      lastname: 'test',
    },
    status: 200,
  },
]);

service.get('test').then((res) => {
  // 此时，res.data 的类型是 { id: number; username: string; lastname?: string; }
  // TypeScript 将 lastname 推断为可选属性，因为并非所有模拟数据都包含它。
  // 我们希望当 url 为 'test' 时，res.data 能够精确推断出 { id: number; username: string; lastname: string; }
  console.log(res.data.lastname); // 可能提示 lastname 是可选的
});

interface HttpServiceMockData<T, U extends string> {
  status: number;
  data: T;
  url: U; // 将 url 类型参数化
}

export function createHttpServiceMock<Services extends HttpServiceMockData<any, string>>(
  data: ReadonlyArray<Services>
) {
  return {
    get: async <TargetUrl extends Services['url']>(url: TargetUrl)
        : Promise<{ data: (Services & { url : TargetUrl })['data'] }> => {
      // 运行时实现保持不变，类型推断在编译时完成
      const res = (data as Services[]).find((d) => d.url === url);
      if (!res) {
        throw new Error(`No data found for url ${url}`);
      }
      return {
        data: res.data as (Services & { url : TargetUrl })['data'], // 进行类型断言以匹配返回类型
      };
    },
  };
}

const service = createHttpServiceMock([
  {
    url: '/users/1' as const, // 明确将 url 声明为字面量类型
    data: {
      id: 1,
      username: 'test',
    },
    status: 200,
  },
  {
    url: 'test' as const, // 或者直接将整个对象声明为 as const
    data: {
      id: 1,
      username: 'test',
      lastname: 'test',
    },
    status: 200,
  },
]);

service.get('test').then((res) => {
  // 此时，res.data 的类型将精确推断为 { id: number; username: string; lastname: string; }
  console.log(res.data.lastname); // 不再提示可选，类型安全
});

service.get('/users/1').then((res) => {
  // 此时，res.data 的类型将精确推断为 { id: number; username: string; }
  // console.log(res.data.lastname); // 报错：Property 'lastname' does not exist on type '{ id: number; username: string; }'
});

type ServiceTable = { [K: string]: HttpServiceMockData<any, string> };

export function createHttpServiceMockTable<Services extends ServiceTable>(
  data: Services
) {
  return {
    get: async <TargetUrl extends keyof Services>(url: TargetUrl)
        : Promise<{ data: Services[TargetUrl]['data'] }> => {
      // 运行时实现
      const res = data[url];
      if (!res) {
        throw new Error(`No data found for url ${url}`);
      }
      return {
        data: res.data as Services[TargetUrl]['data'], // 类型断言
      };
    },
  };
}

// 使用示例
const service2 = createHttpServiceMockTable({
  '/users/1': {
    url: '/users/1',
    data: {
      id: 1,
      username: 'test',
    },
    status: 200,
  },
  'test': {
    url: 'test',
    data: {
      id: 1,
      username: 'test',
      lastname: 'test',
    },
    status: 200,
  },
} as const); // 同样需要 as const 来确保键是字面量类型

service2.get('test').then((res) => {
  // 此时，res.data 的类型将精确推断为 { id: number; username: string; lastname: string; }
  console.log(res.data.lastname);
});

service2.get('/users/1').then((res) => {
  // 此时，res.data 的类型将精确推断为 { id: number; username: string; }
  // console.log(res.data.lastname); // 报错
});