TypeScript泛型与接口：在Mock服务中实现数据对象精确类型推断-js教程-PHP中文网

TypeScript泛型与接口：在Mock服务中实现数据对象精确类型推断

本文探讨如何利用TypeScript的泛型、接口和高级类型特性，在一个模拟HTTP服务（HttpServiceMock）中实现对不同URL返回数据形状的精确类型推断。通过结合判别联合类型、交叉类型或服务表结构，并辅以as const断言，我们能够确保TypeScript在编译时准确识别每个请求对应的响应数据结构，从而大幅提升开发效率和代码健壮性，避免不必要的类型断言或可选属性问题。

在前端开发和测试中，我们经常需要模拟后端api的响应。一个通用的httpservicemock能够极大地简化这一过程。然而，当我们的模拟数据包含不同url对应不同数据结构时，如何让typescript精确地推断出每个url请求后返回的数据类型，而不是一个宽泛的联合类型或带有可选属性的类型，是一个常见的挑战。本文将深入探讨如何利用typescript的泛型、接口以及高级类型操作来解决这一问题。

挑战：泛型Mock服务中的类型丢失

考虑以下一个基础的HttpServiceMock实现：

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,
      };
    },
  };
}

登录后复制

当我们使用这个Mock服务并定义不同URL对应不同数据结构时：

const service = createHttpServiceMock([
  {
    url: '/users/1',
    data: {
      id: 1,
      username: 'test',
    },
    status: 200,
  },
  {
    url: '/products/2',
    data: {
      id: 2,
      name: 'laptop',
      price: 1200,
    },
    status: 200,
  },
]);

service.get('/users/1').then((res) => {
  // 此时 res.data 的类型是 { id: number; username: string; } | { id: number; name: string; price: number; }
  // 或者更宽泛的类型，如果T没有被精确推断
  console.log(res.data);
});

service.get('/products/2').then((res) => {
  // 同样，res.data 的类型是一个联合类型，而不是精确的 { id: number; name: string; price: number; }
  console.log(res.data.name); // 'name' 属性可能会被认为是可选的或不存在于所有联合成员中
});

登录后复制

问题在于，createHttpServiceMock函数中的泛型T被推断为所有HttpServiceMockData中data属性的联合类型，或者一个更通用的类型。这意味着当我们通过特定URL调用get方法时，TypeScript无法知道返回的data具体是哪个形状，导致我们无法直接访问特定于该URL的属性，或者需要进行额外的类型断言。

解决方案一：基于判别联合的精确类型推断

为了实现精确的类型推断，我们需要为TypeScript提供更多的“指引”。核心思想是利用判别联合类型（Discriminated Unions）和交叉类型（Intersection Types）。

定义服务数据接口：HttpServiceMockData<T>接口保持不变。
增强createHttpServiceMock函数： 我们将createHttpServiceMock的泛型参数T替换为一个更具描述性的Services，它将是所有模拟数据对象的联合类型。
```
interface HttpServiceMockData<T> {
  status: number;
  data: T;
  url: string;
}

export function createHttpServiceMock<Services extends HttpServiceMockData<any>>(
  data: ReadonlyArray<Services>
) {
  return {
    get: async <TargetUrl extends Services['url']>(url: TargetUrl)
        : Promise<{ data: (Services & { url : TargetUrl })['data'] }> => {
      const res = data.find((d) => d.url === url);
      if (!res) {
        throw new Error(`No data found for url ${url}`);
      }
      // 这里的类型断言是必要的，因为运行时我们知道res.data的形状，
      // 但TypeScript在编译时无法完全追踪find的结果与TargetUrl的关联
      return {
        data: res.data as (Services & { url : TargetUrl })['data'],
      };
    },
  };
}
```
登录后复制
解释：
- Services extends HttpServiceMockData<any>：Services是一个泛型，它代表了我们传入的所有HttpServiceMockData对象的联合类型。例如，如果传入两个对象，Services可能就是HttpServiceMockData<{ id: number; username: string; }> | HttpServiceMockData<{ id: number; name: string; price: number; }>。
- data: ReadonlyArray<Services>：输入的data数组现在被精确地类型化为包含Services联合类型的只读数组。
- get: async <TargetUrl extends Services['url']>(url: TargetUrl)：get方法本身也变成了泛型。TargetUrl被约束为Services联合类型中所有url属性的字面量联合类型（例如，'/users/1' | '/products/2'）。这意味着当我们调用get('/users/1')时，TargetUrl的具体类型就是'/users/1'。
- Promise<{ data: (Services & { url : TargetUrl })['data'] }>：这是关键所在。
  - Services & { url : TargetUrl }：这是一个交叉类型。它会从Services这个联合类型中，筛选出那些url属性与TargetUrl字面量类型相匹配的成员。例如，如果Services是A | B且TargetUrl是'urlA'，那么Services & { url: 'urlA' }的结果就是A（假设只有A的url是'urlA'）。
  - [...] ['data']：通过索引访问类型，我们从筛选出的服务类型中提取出其data属性的类型。

使用时添加as const断言： 为了让TypeScript能够将URL字符串识别为字面量类型（而不是普通的string），我们必须在定义模拟数据时使用as const断言。

const service = createHttpServiceMock([
  {
    url: '/users/1' as const, // 关键：使用 as const
    data: {
      id: 1,
      username: 'test',
    },
    status: 200,
  },
  {
    url: '/products/2' as const, // 关键：使用 as const
    data: {
      id: 2,
      name: 'laptop',
      price: 1200,
    },
    status: 200,
  },
  // 也可以对整个对象使用 as const
  {
    url: 'test',
    data: {
      id: 1,
      username: 'test',
      lastname: 'test',
    },
    status: 200,
  } as const,
]);

service.get('/users/1').then((res) => {
  // TypeScript 现在知道 res.data 的精确类型是 { id: number; username: string; }
  console.log(res.data.username); // 正确推断，无错误
  // console.log(res.data.lastname); // 报错：Property 'lastname' does not exist on type '{ id: number; username: string; }'.
});

service.get('/products/2').then((res) => {
  // TypeScript 知道 res.data 的精确类型是 { id: number; name: string; price: number; }
  console.log(res.data.name); // 正确推断，无错误
  console.log(res.data.price); // 正确推断，无错误
});

登录后复制

as const断言告诉TypeScript将对象中的所有可推断属性（包括字符串字面量）都视为字面量类型，而不是更宽泛的类型（如string或number）。这对于构建判别联合至关重要。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情

解决方案二：基于服务表的精确类型推断

另一种更简洁的方式是，不将模拟数据定义为数组，而是定义为一个以URL作为键的对象（服务表）。这种结构天然地将URL与数据类型关联起来，简化了类型推断。

定义服务表类型：

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

登录后复制

增强createHttpServiceMockTable函数：
```
interface HttpServiceMockData<T> {
  status: number;
  data: T;
  url: string; // url 属性在这里仍然保留，但其值将由对象的键来决定
}

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,
      };
    },
  };
}
```
登录后复制
解释：
- Services extends ServiceTable：Services现在是传入的整个服务表对象的类型。
- get: async <TargetUrl extends keyof Services>(url: TargetUrl)：TargetUrl被约束为Services对象的所有键的字面量联合类型（例如，'/users/1' | '/products/2'）。
- Promise<{ data: Services[TargetUrl]['data'] }>：这里直接使用索引访问类型。Services[TargetUrl]会直接获取到对应URL键的服务数据对象类型，然后我们再从中提取data属性的类型。这种方式比判别联合的交叉类型更直观。

使用服务表： 这种方式下，URL作为对象的键，TypeScript会自动将其推断为字面量类型，因此无需as const。

const service2 = createHttpServiceMockTable({
  '/users/1': {
    status: 200,
    data: {
      id: 1,
      username: 'test',
    },
    url: '/users/1', // url 属性可以保留，但其值应与键匹配
  },
  '/products/2': {
    status: 200,
    data: {
      id: 2,
      name: 'laptop',
      price: 1200,
    },
    url: '/products/2',
  },
});

service2.get('/users/1').then((res) => {
  // TypeScript 知道 res.data 的精确类型是 { id: number; username: string; }
  console.log(res.data.username); // 正确推断
});

service2.get('/products/2').then((res) => {
  // TypeScript 知道 res.data 的精确类型是 { id: number; name: string; price: number; }
  console.log(res.data.name); // 正确推断
});

登录后复制

注意事项与选择

运行时实现： 上述代码示例中的get方法内部逻辑是简化的，实际应用中可能需要更复杂的匹配逻辑。但核心的类型推断机制不受影响。
as const的重要性： 在使用基于判别联合的方案时，as const是不可或缺的，它确保了TypeScript能将字符串字面量视为独立的类型而非宽泛的string。
数据结构选择：
- 数组（判别联合方案）：当你的模拟数据来源本身就是数组形式（例如从JSON文件读取），或者你希望保持数据的顺序时，此方案更合适。
- 对象（服务表方案）：当URL本身就是唯一的标识符，且你更倾向于通过键直接访问数据时，此方案更为简洁直观，且无需as const。
错误处理： 在实际的HttpServiceMock中，你可能还需要考虑不同status码对应的不同响应数据结构，这会使类型定义更加复杂，但基本原理（判别联合、索引访问）依然适用。

总结

通过巧妙地运用TypeScript的泛型、接口、判别联合类型、交叉类型以及索引访问类型，我们能够构建出高度类型安全的HttpServiceMock服务。无论是选择基于数组的判别联合方案，还是基于对象的服务表方案，其核心目标都是让TypeScript在编译时就能精确地推断出与特定URL关联的数据形状。这不仅提升了开发效率，减少了运行时错误，也使得代码更加健壮和易于维护。深入理解这些高级类型特性，将极大地增强你使用TypeScript构建复杂应用的能力。

以上就是TypeScript泛型与接口：在Mock服务中实现数据对象精确类型推断的详细内容，更多请关注php中文网其它相关文章！