如何为webpack导入的音频文件生成TypeScript常量文件名类型？

要实现需求，可按以下步骤操作：

1. 提取文件名并转为常量数组 #

直接从require.context返回的上下文对象中提取文件名，处理后标记为常量：

// 创建音频文件上下文
const audioContext = require.context('../assets/audio', false, /\.(mp3)$/);
// 提取文件名（去掉路径前缀和.mp3后缀）
const fileNames = audioContext.keys().map(path => {
  const fileNameMatch = path.match(/\.\/(.*)\.mp3$/);
  return fileNameMatch ? fileNameMatch[1] : '';
}) as const;

此时fileNames的结构就和你要的['sound1', 'sound2'] as const完全一致。

2. 推导对应的文件名类型 #

如果需要单独的类型定义，可直接从常量数组推导：

type AudioFileName = typeof fileNames[number];
// 最终AudioFileName会是 'sound1' | 'sound2' 这类具体的文件名联合类型

补充说明 #

• 如果你仍需保留audioFiles变量，可结合原有代码：

const audioContext = require.context('../assets/audio', false, /\.(mp3)$/);
const audioFiles = webpackImportAll(audioContext);
const fileNames = audioContext.keys().map(path => {
  const fileNameMatch = path.match(/\.\/(.*)\.mp3$/);
  return fileNameMatch ? fileNameMatch[1] : '';
}) as const;

• 确保webpackImportAll返回的对象是以带后缀的文件名为键的结构，这样后续如果需要通过文件名匹配音频文件时能直接对应。

内容的提问来源于stack exchange，提问作者RomanPolansky