Import module from root path in TypeScript

(Re-posting my answer to avoid puppy-socket.)

Using the compilerOptions.baseUrl property I was able to do the below import. This allowed me to have a complete root-to-expected-path, which helps my code maintainance, and works in any file, independently of the current folder. The below examples will have the src folder of my project as the modules root.

Important advice: this baseUrl property doesn't affect the entry webpack file (at least for me?), so separate a main file inside the src folder with this example, and run it from the entry (i.e., import { Main } from './src/Main'; new Main;), only once.

// browser: directory inside src;//   * net: A TS file.import { URLRequest } from 'browser/net';

tsconfig.json example:

{    "compilerOptions": {        "baseUrl": "./src",        "module": "commonjs",        "noImplicitReturns": true,        "noImplicitThis": true,        "noUnusedLocals": true,        "preserveConstEnums": true,        "removeComments": true,        "sourceMap": true,        "strictNullChecks": true,        "target": "ES6"    },    "include": [        "./src/**/*.ts",        "./src/**/*.d.ts"    ]}

However, it won't directly work with webpack. The same thing must be done at the webpack options. This is how it worked in webpack 2:

module.exports = {  ...  , resolve: {      ...      , modules: [ path.join(__dirname, './src') ]    }}

I needed to set both baseUrl and rootDir to point to my src folder in tsconfig.json

{  "compilerOptions": {    "baseUrl": "./src",    "rootDir": "./src",  ...}

I could then import .tsx files without needing a prefixed '/' or a relative path.

e.g.import BreadCrumb from 'components/BreadCrumb'

TypeScript imports use / at the start of a path to denote the root directory. To import a file relative to your current file either leave off the initial slash or use ./.

// Current script: C:\product\src\com\name\product\blah.tsimport { thing } from './com/name/product/thing';

By default the TypeScript compiler assumes the root of the project is the same as the location of your tsconfig.json.

You can specify a new root by specifying the rootDir property of the compilerOptions property in the tsconfig.

For a list of all available property settings consult the tsconfig definition found here.