【问题标题】:How to use Typescript definitions imported as `* as`如何使用作为`* as`导入的Typescript定义
【发布时间】:2020-02-06 13:36:16
【问题描述】:

我正在使用react-icons 并尝试将所有图标定义导入为import * as Icons from 'react-icons/fi' 问题是如何创建一个应该是从 Icons 导出的类型之一的类型

例如我正在尝试制作这样的道具界面:

interface Props {
   icon: Icons // don't know what to do here
}

react-icons/fi/index.d.ts 文件如下所示:

export declare const FiActivity: IconType;
export declare const FiAirplay: IconType;
export declare const FiAlertCircle: IconType;
export declare const FiAlertOctagon: IconType;
export declare const FiAlertTriangle: IconType;
export declare const FiAlignCenter: IconType;
.....

【问题讨论】:

    标签: reactjs typescript


    【解决方案1】:

    我假设您想要 Icons 命名空间中所有图标常量的名称,因为所有图标的类型似乎都相同 IconType

    在这种情况下,您可以使用keyoftypeof 的组合来实现:

    import * as Icons from 'react-icons/fi'
    
    interface Props {
       icon: keyof typeof Icons
    }
    

    typeof 会告诉你图标的类型。 keyof 然后将该类型的键的名称作为联合类型返回。所以你得到的类型最终会是'FiActivity' | 'FiAirplay' | 'FiAlertCircle' | ...

    如果您想将这些 const 中的任何一个作为整体接受,而不仅仅是名称,那么您可以直接使用 IconType

    import * as Icons from 'react-icons/fi';
    import {IconType} from 'react-icons';
    
    interface Props {
       icon: IconType
    }
    

    【讨论】:

      猜你喜欢
      • 2019-10-11
      • 2016-08-17
      • 2018-05-30
      • 2016-12-17
      • 1970-01-01
      • 1970-01-01
      • 2021-02-10
      • 2015-08-07
      • 2019-04-30
      相关资源
      最近更新 更多