带扩展名的 TypeScript 导入

Posted 2023-03-13

【中文标题】带扩展名的 TypeScript 导入

【英文标题】：TypeScript import with extension

【发布时间】：2019-10-05 13:18:00

【问题描述】：

你可能听说过 Deno，它是一个新的 TypeScript 运行时。

Deno 和普通 TypeScript 的一个主要区别是您必须在导入语句中包含文件扩展名。例如：

import foo from './bar.ts'
                       ^^

我想编写与 Deno 和 Webpack 兼容的代码。

如何配置 Webpack 以允许使用上述 .ts 扩展名导入？

另外，如何防止出现以下 VSCode 错误？

【参考方案1】：

Webpack 可以配置为使用 resolve 属性解析所有导入的扩展。如果扩展列表中有一个空字符串，webpack 也将接受带有完整扩展的导入。空字符串应该是列表中的第一个条目。

module.exports = 
 // ...
 resolve: 
   extensions: ['', '.ts', '.tsx' /*etc ...*/],
 

如果使用 webpack 的扩展列表中没有空字符串，将尝试导入类似 ./bar.ts.ts 的内容，而不是 ./bar.ts。

您可以使用类似的注释从 ts-compiler 禁用 VSCode 中的警告

// @ts-ignore TS6133
import foo from './bar.ts'