Typescript/ES6: import src files with absolute path

Question

in one of my files I import another commonjs module with

import * as at from '../../../at-angular'

I would much rather do

import * as at from 'fv/at-angular'

with fv being my src directory. So my app folder structure looks like this:

- src
  - at-angular.ts
  - core
    - services
  ....

Can I somehow enable typescript to have fv point to src?

Answer 1

TypeScript 1.8 (not released yet) will have path mapping feature:

Path mappings

Sometimes modules are not directly located under baseUrl. It is possible to control how locations are computed in such cases using path mappings. Path mappings are specified using the following JSON structure:

{
    "paths": {
        "pattern-1": "substitution" | ["list of substitutions"],
        "pattern-2": "substitution" | ["list of substitutions"],
        ...
        "pattern-N": "substitution" | ["list of substitutions"]
    }
}

Patterns and substitutions are strings that can have zero or one asteriks ('*'). Interpretation of both patterns and substitutions will be described in Resolution process section.

https://github.com/Microsoft/TypeScript/issues/5039

It may be what you are looking for.

Answer 2

I was able to get absolute path import working on my webpack2 setup. Here is that I did You have to set up the tsconfig.json to support that as well. Here is an example: https://medium.com/@timwong/typescript-with-webpack2-how-to-do-import-with-absolute-path-f33b1826d330

Here is the example in my post.

Webpack2 Resolve

/** 
* Assuming the following project structure
*   /src
*     /app
*       /services
*       /models
*     /node_modules
*     .webpack.config.js
*     tsconfig.json
*/
var path = require('path');
module.exports = {
  module: { ... },
  devtool: '...',
  resolve: {
    modules: [
      path.resolve('./node_modules'),
      path.resolve('./app')
    ]
  }

By defining the resolve.modules, we instruct Webpack to search (a.k.a resolve) the components using these paths as root folder. TypeScript Configuration

Ok, now that Webpack is good to go; what about TypeScript. If you are using an editor such as Atom or VSCode, you will likely be seeing an highlighted error saying that TypeScript can’t find the modules. It is because TypeScript is not aware of this root module setting. We have to provide this information in the tsconfig.json as well.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "app/*"
      ]
    }
}

By defining the paths object and the baseUrl, we instruct TypeScript compiler to look into the app folder when resolving import statements. Hope this simple example helps to unblock anyone who faces this configuration problem when first getting started with TypeScript and Webpack2.