带扩展名的TypeScript导入

Question

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

Deno与普通TypeScript之间的主要区别是必须在import语句中包括文件扩展名。例如：

internal

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

如何配置Webpack以允许使用上述扩展名import foo from './bar.ts' ^^ 导入？

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

Answer 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'