Typescript can't import files without extension

typescript record
typescript interface
typescript keyof
typescript casting
typescript type guard
typescript types
typescript playground
typescript tutorial

I am trying to import files in my new Angular2 project. The entry file "main.ts" is able to import an other typescript file using:

import { AppModule }              from './module/app.module';

"app.module.ts" on the other hand is not able to import a ts file without a file extension:

import { AppComponent }             from '../component/app.component';

If I add ".ts" to the file name everything works as expected...

What is my mistake? I assume I am doing everything as per angular guide (https://angular.io/docs/ts/latest/guide/webpack.html)

I have node 6.9.4, npm 4.2.0, typescript 2.3.2, Angular 4.1.0 and Webpack 2.5.1 installed

My tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    }
}

My webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.(html|htm|php)$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader?sourceMap'
                })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: '../../template/base/app.php'
        })

        // new webpack.optimize.UglifyJsPlugin()
    ],
    output: {
        filename: '[name].js'
    }
};

TypeScript (at the time of writing in the default classic resolution setting) will automatically detect files that end in .ts or .tsx and not require an extension in those cases. All other files require an extension as per TypeScript module resolution conventions: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Tl;DR: If you include A without an extension TypeScript will look for A.ts or A.tsx.

Handbook - Basic Types, You can also use template strings, which can span multiple lines and have embedded expressions. These strings are surrounded by the backtick/backquote​  The TypeScript compiler, named tsc, is written in TypeScript. As a result, it can be compiled into regular JavaScript and can then be executed in any JavaScript engine (e.g. a browser). The compiler package comes bundled with a script host that can execute the compiler. It is also available as a Node.js package that uses Node.js as a host.

I realized I have two files with the same name but different extensions. notes.js and notes.ts. When you have filename collisions, it may require extensions

Handbook - TypeScript for JavaScript Programmers, TypeScript knows the JavaScript language and will generate types for you in By understanding how JavaScript works, TypeScript can build a type-system  TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components. The TypeScript language specification has full details about the language. Install the TypeScript compiler

Our First Interface, If you do not want to specify types at all, TypeScript's contextual typing can infer the argument types since the function value is assigned directly to a variable of  TypeScript is an object-oriented programming language developed and maintained by the Microsoft Corporation. It is a superset of JavaScript and contains all of its elements. TypeScript totally

TypeScript 3.7 · TypeScript, At its core, optional chaining lets us write code where TypeScript can immediately stop running some expressions if we run into a null or undefined . The star of  This is where Typescript can help us! 4. Add Typescript Plugin. Since the project already uses Typescript, we can utilize it to help declare the types of our styles object. You could do this yourself by creating a declaration file for each of our *.module.css files, but that’s a lot of extra work just to check for spelling errors.

Do's and Don'ts · TypeScript, Do use the types number , string , boolean , and symbol . /* OK */ function reverse​(s: Do use the return type void for callbacks whose value will be ignored: With TypeScript, an enhanced version of JavaScript, you can specify types and type annotations so your code is easier to read and far less likely to fail at runtime. And because the core of TypeScript is standard JavaScript, it runs on all major browsers and can be used with frameworks like Angular, Vue, and React.

TypeScript: Typed JavaScript at Any Scale., Writing types can be optional in TypeScript, because type inference allows you to get a lot of power without writing additional code. A Result You Can Trust. All  An interface can be extended by other interfaces. In other words, an interface can inherit from other interface. Typescript allows an interface to inherit from multiple interfaces. Use the extends keyword to implement inheritance among interfaces.

Comments
  • Typescript files have .ts extension. Why you don't want to create a file with .ts extension in the first place?
  • my files have the .ts extension, the problem is they are not being loaded without putting the extension into the import state
  • please, could you share you tsconfig ?
  • @JoséQuintoZamora tsconfig added
  • are you using webpack and ts-loader? if so, please could you share your config too ?
  • that's the problem, I was assuming the same, but unfortunately it's not the case. The .ts files are not being loaded, even with the correct extension. In the tsconfig i tried both, classic and node, not working.
  • This has nothing to do with classic resolution. It is simply invalid to import a TypeScript file with an explicit .ts extension in TypeScript.
  • @donnikitos apologies it appears I misunderstood your question. That is indeed weird behavior that I can't explain (why did you mark me as answer haha)
  • @KevinPei it's for google searchers. Otherwise it was my mistake.... one of the files had a double *.ts extension (probably happened while duplicating one file)
  • This article links to a repo that shows how TypeScript does import files without an extension. No configuration necessary.
  • The module loader isn't guessing, it's looking for the string (path) specified (or failing if not a string..) in each of the array of possible locations. It's only dumb because the language is interpreted, which means that each possible resolution has to be dynamically generated until the interpreter finds one that matches. Were the require statement precompiled, it wouldn't really have any impact on performance. TS being selective in terms of file extension is exclusively obnoxious.