Can't import TypeScript modules without providing the file extension

Question

I am very new to TypeScript and I expect I should be able to import my TS files without needing to specify that they are TS files.

I have to do

import {sealed} from "./decorators/decorators.ts";

instead of what i want think is the right way which is

import {sealed} from "./decorators/decorators";

which results in errors indicating that it is only looking for files ending .js or .jsx

my tsconfig.json looks like this

{
"compileOnSave": true,
"compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "allowJs": true,
    "target": "es6",
    "removeComments": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
},
"exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
]

}

Realize

I see your compiling your modules into commonjs modules. What are you using to load them? Webpack? Or is this a node application? – Kelso

I am using Webpack – Realize

Answer 1

If you are using webpack try adding this to your webpack.config.js file:

resolve: {
  extensions: ['', '.js', '.jsx', '.ts', '.tsx']
},

Kelso

D'oh, that is definitely it. Thanks! – Realize

Answer 2

Answer from thitemple worked for me, but I had to remove '' from the array because it stopped webpack from starting.

resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx']
},

Chadburn