打字稿 -> API 如何打字的动态响应

Question

我正在使用 returns 嵌套 json 的 api。它是动态的，因此键通常会不同，但只能是对象或字符串，不能是数组或数字等。

这是一个例子：

const response = {
  name: 'Pete',
  location: 'London',
  age: {
    year: '21'
  }
}

我试过这样输入：

type Response = {
    [key: string]: string
}

然后在 React 组件中我想这样使用它：

type Response = {
    [key: string]: string
}

const Foo = ({ data }: Response) => {
   return <pre>{JSON.stringify(data, null, 2)}</pre>
}

这给了我以下错误：

Property 'x' does not exist on type 'string'

谁能给我指出正确的方向？

Answer 1

问题是您的类型中的值是字符串。当您提取 data 键时，它的类型是一个字符串。您要么需要像这样输入：

type Response = {
  data: {
    [key: string]: string
  }
}

或者像

一样在组件中接受

const Foo = (data: Response) => {
  // ...
}

如果您希望值是字符串或嵌套对象，您可以这样做：

type Response = {
  [key: string]: string | Response
}

然后您示例中的 data 将是 string | Response.

类型

Answer 2

您正在做的是将类型 Response 分配给 Foo 功能组件的 props 参数。所以实际上，Foo 组件接受类型为 Response 的 props 对象，但是 data 变量被打字稿推断为字符串。你应该做的是;

interface IFooProps{
  data: Response;
}

const Foo = (props: IFooProps) => {
  return <pre>{JSON.stringify(props.data, null, 2)}</pre>;
};

Typescript -> a dynamic response from an API how to type