时间戳

首页 > 解决方案 > 如何在 TypeScript 中将两种类型绑定在一起？

typescript - 如何在 TypeScript 中将两种类型绑定在一起？

问题描述

我想让 TypeScript 知道，当 getData 函数'myString'作为参数接收时，它会返回 a Promise<string>，而当它接收到 时'myNumber'，它会返回 a Promise<number>。我认为这种方法可行，但它给了我如下所示的错误。它不绑定endpoint: 'myString'到returnType: string. 我需要改变什么？

type MyStringType = { endpoint: 'myString'; returnType: string };
type MyNumberType = { endpoint: 'myNumber'; returnType: number };

function getData<T extends MyStringType | MyNumberType>(endpoint: T['endpoint']) {
  return axios.get<T['returnType']>(`https://my.url/${endpoint}`);
}

getData('myString').then(response => {
  const newString: string = response.data; // Type 'string | number' is not assignable to type 'string'.
});

getData('myNumber').then(response => {
  const newNumber: number = response.data; // Type 'string | number' is not assignable to type 'number'.
});

标签： typescript

解决方案

该类型MyStringType | MyNumberType似乎是默认推断的。你可能不想要这个。

除了函数重载或使用某种XOR 类型之外，您还可以定义如下类型：

type EndpointReturnTypes = {
  'myString': string,
  'myNumber': number,
}

然后这行得通

async function getData<T extends keyof EndpointReturnTypes>(endpoint: T) {
  return axios.get<EndpointReturnTypes[T]>(endpoint)
}

getData('myString').then(response => {
  const newString: string = response.data;
});

getData('myNumber').then(response => {
  const newNumber: number = response.data;
});

推荐阅读