时间戳

首页 > 解决方案 > 在打字稿中使用字符串作为对象值的问题

typescript - 在打字稿中使用字符串作为对象值的问题

问题描述

我有这样的代码在一个文件中我有

interface NominativeCaseType {
    corn: string;
    buckwheat: string;
    rice: string;
    barley: string;
    wheat: string;
}

export const nominativeCase: NominativeCaseType = { // this is Називний Відмінок in Ukrainian language
    corn: 'Кукурудза',
    buckwheat: 'Гречка',
    rice: 'Рис',
    barley: 'Ячмінь',
    wheat: 'Пшениця',
}

在我的另一个文件中

import { nominativeCase } from '../../linguistics/categoriesNames';

export const MainScreen: React.FunctionComponent = () => {
    const [category, setCategory] = useState('corn');
    return (
        <article>
            {nominativeCase[category]}
        </article>
    )
}

问题是打字稿不允许我使用{nominativeCase[category]}. VsCode 说

元素隐含地具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“NominativeCaseType”。
在“NominativeCaseType”类型上找不到带有“字符串”类型参数的索引签名。ts(7053)

我试着用谷歌搜索它，但仍然不明白它是什么意思以及如何修复它。我什至找到了这样的解决方案Typescript error: TS7053 Element implicitly have an 'any' type 我将代码更改为

interface NominativeCaseType {
    [key: string]: string;
    corn: string;
    buckwheat: string;
    rice: string;
    barley: string;
    wheat: string;
}

但我还是不明白这个错误是什么意思，什么[key: string]: string;意思请帮帮我

标签： typescriptreact-typescript

解决方案

我相信处理这个问题的最干净的方法是专门缩小 to 的category类型keyof NormativeCaseType。这样做是将值限制为作为属性名称的字符串。

const [category, setCategory] = useState<keyof NominativeCaseType>('corn');

那么问题是，当您调用setCategory.

const x: string = 'buckwheat';
setCategory(x as keyof NominativeCaseType);

编辑： [key: string]: string;用于为未明确定义的属性定义“包罗万象”。你真的不想在这里，除非对象真的是自由形式的并且基本上是“无类型的”，除了属性都是字符串值。

推荐阅读