使用TypeScript React为状态中使用的对象定义对象结构

9udxz4iz 于 2023-03-04 发布在 TypeScript

关注(0)|答案(1)|浏览(140)

我想定义一个对象的结构，我在react状态下使用。对象看起来像这样

{
    1: [{foo: 'whatever', bar: 'another string'}],
    2: [{foo: 'yet another string', bar: '...'}],
    ...
}

我现在是这样试的

interface ObjectStructure {
    number: [{
        foo: string,
        bar: string
    }]
}
const [data, setData] = useState<ObjectStructure>({} as ObjectStructure );

但那不管用当我试着

data[dynamicKey]...

我得到
元素隐式具有"any"类型，因为"number"类型的表达式不能用于索引类型"{}"|{编号：[{foo：字符串;条形：字符串;}];}'
我想问题是

number: [{...}]
^
|
|

如何在带有React的TypeScript中定义这个对象结构？

typescript

来源：https://stackoverflow.com/questions/75603589/define-object-structure-for-an-object-used-in-state-with-typescript-react

1条答案

按热度按时间

7kjnsjlb1#

您正在查找索引签名：

import { useState } from 'react'
interface ObjectStructure {
    [index: number]: [{
        foo: string,
        bar: string
    }]
}
const [data, setData] = useState<ObjectStructure>({} as ObjectStructure );
data[0] = [{
    foo: "",
    bar: ""
}]

Playground链接
您还可以使用Record预定义类型type来创建索引签名：

interface ObjectStructure extends Record<number, [{
        foo: string,
        bar: string
    }]>{}

Playground链接
或使用类型别名：

type ObjectStructure = Record<number, [{ foo: string, bar: string}]>

Playground链接
如果你希望属性是数组，你应该使用Array<foo: string,bar: string }>，你使用的语法意味着一个数组有一个单一的元素的类型。

赞(0）回复(0）举报 2023-03-04

我来回答

使用TypeScript React为状态中使用的对象定义对象结构

1条答案

相关问题

热门标签

最新问答