Typescript 基于参数的变量的动态返回

所以我有n个进口

import icon1 from './icons/icon1.svg';
import icon2 from './icons/icon2.svg';
// 100+ more imports

我想写一个函数，根据图标名返回相应的图标

export const getIcon: GetIcon = (iconName) => {
    switch (iconName) {
        case 'icon1': return icon1;
        case 'icon2': return icon2;
        // more returns
    }
 }

如果不使用开关盒，我该如何操作

在javascript中，我曾经

export icon1 from './icons/icon1.svg';
export icon2 from './icons/icon2.svg';
// More icons

在第二个文件中

import * as icons from './icons';
export const getIcon = (iconName) => icons[iconName]

import icons from './icons';

export const getIcon = (icon: number) => icons[icon];   // type of getIcon is (icon: number): string

---

因此，我不必编写bigswitch语句来将导入映射到值。如何在typescript中简化？

在TS中，您可以执行与JS非常类似的操作

在图标文件中

import icon1 from "./icon1";
import icon2 from "./icon2";

const icons = [icon1, icon2];  // type is string[]
export = icons;

在第二个文件中

import * as icons from './icons';
export const getIcon = (iconName) => icons[iconName]

import icons from './icons';

export const getIcon = (icon: number) => icons[icon];   // type of getIcon is (icon: number): string

---

您还可以查看一些附加的细节和想法。

给定ES命名空间导入，您可以获得

图标

命名空间的键入键

“icon1”|“icon1”

：

import * as icons from './icons';

type IconKeys = keyof typeof icons;

只需将函数

getIcon

的

iconName

参数类型限制为图标键之一。现在，

iconName

可以用作计算属性名，以获取所需的图标

export const getIcon = (iconName: IconKeys) => icons[iconName];

// or without explicit type
export const getIcon = (iconName: keyof typeof icons) => icons[iconName];

---

这与我所做的一模一样，因为

图标

是我需要放入映射并导出它的字符串，但这个问题与js中的大量导入一样，需要在JSON对象中复制粘贴相同的变量，而我在js world中不必这样做。感谢我添加了验证检查，一切都按照我的预期进行了

constisValidIconName=（iconName:string）：iconName是IconKeys=>icons.hasOwnProperty（iconName）