TypeScript import with extension

Question

You may have heard of Deno which is a new TypeScript runtime.

One major difference between Deno and normal TypeScript is that you must include the file extension in the import statement. e.g:

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

I would like to write code that is compatible with both Deno and Webpack.

How can I configure Webpack to allow importing with .ts extension like above?

Also, how can I prevent the following VSCode error?

Answer 1

Webpack can be configured to resolve the extensions of all imports with the resolve property. If there is an empty string within the list of extensions webpack will accept imports with full extension as well. The empty string should be the first entry in the list.

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

If there is no empty string in the list of extensions to use webpack will try to import something like ./bar.ts.ts instead of ./bar.ts.

You can disable warnings in VSCode from the ts-compiler using a comment like

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