让 typescript 知道来自 webpack 的 `require.context` 的所有键答案

【问题标题】：make typescript know all keys from `require.context` of webpack让 typescript 知道来自 webpack 的 `require.context` 的所有键
【发布时间】：2019-08-29 11:23:03
【问题描述】：

一个相对的问题是https://stackoverflow.com/a/53015011/2326199

当所有键都被硬编码时，@jcalz 的答案效果很好。但我想知道是否可以不用像使用 webpack 的 require.context 这样的硬代码。

这里是repo 展示我想要的：

components/icon.tsx 需要所有 svg 图标
所有 svg 名称都从 components/icon.tsx 导出为 ICONS
当在index.tsx 输入ICONS. 时，我应该能够收到自动完成提示，对于这个repo，它应该提供Bluetoothon 和Close

【问题讨论】：

如果您想要一个有用的答案，我鼓励您在问题中提供minimal reproducible example。乍一看，我会说如果不手动注释icons，就无法满足您的要求。也许其他人知道类型系统可以做到这一点？可能是一些构建步骤，它读取目录中的文件名并从中生成类型？
是的，在构建步骤做脏活可能是一个解决方案。如果它可以直接工作将是很棒的。 :-) 将尝试对此进行更多研究

标签： typescript typescript-typings

【解决方案1】：

你可以试试这个... /locales 目录下有许多 json 文件。根据用户的选择加载来自特定语言环境的所有消息。

function loadLocaleMessages() {
  const locales = require.context(
    "./locales",
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  );

  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

【讨论】：

你可以试试这个... /locales 目录下有许多 json 文件。 根据用户的选择加载来自特定语言环境的所有消息。

你可以试试这个... /locales 目录下有许多 json 文件。根据用户的选择加载来自特定语言环境的所有消息。