Angular |嵌套对象的 typescript 问题

bq3bfh9z 于 2023-05-19 发布在 TypeScript

关注(0)|答案(2)|浏览(119)

我有一个Angular 15应用程序，可以为用户显示游戏信息。
我有一个全局对象，看起来像这样：

GAMES_INFO: {
    skyroads: {
        name: 'Sky Roads',
        genre: GAMES_GENRES.action,
        year: 1993,
        wiki: 'https://en.wikipedia.org/wiki/SkyRoads_(video_game)',
    },
    prehistorik2: {
        name: 'Prehistorik 2',
        genre: GAMES_GENRES.arcade,
        year: 1993,
        wiki: 'https://en.wikipedia.org/wiki/Prehistorik_2',
    },
}

我想在用户选择一个游戏后向他显示数据：
做好以下工作this.gameInfo = dic.GAMES_INFO['skyroads'];
但是，我希望游戏名称是这样的用户输入：this.gameInfo = dic.GAMES_INFO[gameName];（gameName是一个字符串）这将导致以下错误TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type。
我该怎么弥补？

typescript

来源：https://stackoverflow.com/questions/76256424/angular-typescript-issue-for-a-nested-object

2条答案

按热度按时间

ccgok5k51#

这是因为GAMES_INFO对象键仅限于skyroads和prehistorik2，但gameName可以有任何字符串值，这比这更通用。
您可以尝试其中一个：
1.键入带有GAMES_INFO选项的gameName

let gameName!: keyof typeof GAMES_INFO; // let gameName: "skyroads" | 
"prehistorik2"

gameName = 'any string'; // Type '"any string"' is not assignable to type 
'"skyroads" | "prehistorik2"'
gameName = 'prehistorik2'; // will work

1.将GAMES_INFO类型强制转换为任意

gameInfo = (GAMES_INFO as any)[gameName];

1.将gameName类型强制转换为GAMES_INFO的键

gameInfo = GAMES_INFO[gameName as keyof typeof GAMES_INFO];

当你想从用户那里获取gameName时，重要的是你要将可用的选项限制在GAMES_INFO键上，并且还要验证用户的选择：

if(gameName in GAMES_INFO){
    console.log('ok')
}else{
    console.log('error');
}

在简历中，（1）你必须输入正确，（2）限制用户输入，（3）验证用户输入

赞(0）回复(0）举报 2023-05-19

ecbunoof2#

这是因为您试图访问对象的属性，Typescript不知道如何迭代该对象的键。
一种解决方案是键入带有接口的通用对象，然后执行
this.gameInfo = dic.GAMES_INFO[gameName as keyof ObjectType];其中ObjectType是接口的名称。
如果你将不得不频繁地添加和删除你的键/值。我建议使用Map（）。
在我个人看来，Map也更容易使用。
为了更多的解释，我添加了mdn web文档：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

赞(0）回复(0）举报 2023-05-19

我来回答

Angular |嵌套对象的 typescript 问题

2条答案

相关问题

热门标签

最新问答