打字稿 - >来自 API 的动态响应 如何键入

Question

我正在使用一个返回嵌套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>
}

这会给我以下错误:

属性'x'在类型'string'上不存在

谁能给我指个正确的方向?这里是stackblitz的链接- https://stackblitz.com/edit/react-ts-4n7vcy?file=App.tsx

Answer 1

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

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

Answer 2

问题是类型中的值是字符串。当您提取data键时，它的类型是字符串。你可以这样输入:

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

或者在组件中接受它，比如

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

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

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

然后你的例子中的data将是string | Response的类型。