如何使用作为`* as`导入的Typescript定义

【问题标题】：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。

在这种情况下，您可以使用keyof 和typeof 的组合来实现：

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
}

【讨论】：