元素隐式具有 'any' 类型，因为 'string' 类型的表达式不能用于索引类型 'typeof

Question

我有一个问题，我不明白为什么会这样说。

问题：

TS7053：元素隐式具有 'any' 类型，因为类型 'string' 的表达式不能用于索引类型 'typeof

我有一个变量作为字符串。我们可以称它为 componentName。我导入了一些这样的组件：“import * as _icons from "./icons";”我想邀请这样的组件“_icons[this.props.name!]”。但是我的ide警告我的是错误句

import {SvgIconNamespace} from "../namespaces";
import * as _icons from "./icons";
import {AbstractIconComponent} from "./icons";
import React from "react";
import {View} from "react-native";

export class Icon extends AbstractIconComponent<SvgIconNamespace.SvgIconPropsInterface, SvgIconNamespace.SvgIconStateInterface> {

        render(): React.ReactNode {

            let iconElement = React.createElement(
                _icons[this.props.name!],  // Error sentence in this line!
                { size: this.props.size!, fill: this.props.fill!},
            )

            return(
                <View>
                    { iconElement }
                </View>
            );
        }

        constructor(props: SvgIconNamespace.SvgIconPropsInterface) {
            super(props)
        }

    }

props.name: 字符串='PlusSquareIcon'

Answer 1

Typescript 期待您为图标导出指定的特定名称（例如“PlusSquareIcon”），而不仅仅是任何 string（Icon name 道具的类型）-这就是您收到此错误的原因。

如果您想像输入任何字符串一样继续输入 props.name，解决此问题的一种方法是将 _icons 强制转换为索引签名接口，如下所示：

import {SvgIconNamespace} from "../namespaces";
import * as _icons from "./icons";
import {AbstractIconComponent} from "./icons";
import React from "react";
import {View} from "react-native";

interface ImportedIcons {
   [key: string]: React.FC<{size: number, fill: string}>
}

export class Icon extends AbstractIconComponent<SvgIconNamespace.SvgIconPropsInterface, SvgIconNamespace.SvgIconStateInterface> {

        render(): React.ReactNode {

            let iconElement = React.createElement(
                (_icons as ImportedIcons)[this.props.name!],  // Error sentence in this line!
                { size: this.props.size!, fill: this.props.fill!},
            )

            return(
                <View>
                    { iconElement }
                </View>
            );
        }

        constructor(props: SvgIconNamespace.SvgIconPropsInterface) {
            super(props)
        }

    }

元素隐式具有 'any' 类型，因为 'string' 类型的表达式不能用于索引类型 'typeof

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof

reactjs

typescript

types

native