How to configure `baseUrl` for typescript compiler?

Question

I have a website built with modules using requireJS. I want to start using TypeScript (1.8, Visual Studio 2015) on this project, and trying to rewrite one of the modules.

Presently my module looks as follows:

// file: ProjectFoo/app/dashboard/viewProfile.js
define(["services/datasvc"], function (datasvc) {
    datasvc.getData(...).then(...);
});

File datasvc.js is located at a following path: ProjectFoo/services/datasvc.js

To make datasvc.js accessible to requireJS, I have configured a following path (requireJS configuration):

services -> ./services

After rewriting my module, I use following construct to import datasvc (note: TypeScript compiler is configured to use amd module structure).

import * as datasvc from "services/datasvc";

However that does not work, since TypeScript treats services/datasvc as a path relative to the current file. However if I rewrite that import statement as follows, then TypeScript [compiler] succeeds:

import * as datasvc from "../../services/datasvc";

However this results in datasvc being imported using relative path, i.e. generate code looks something like:

define(["require", "exports", "../../services/datasvc"]...

The problem here is that I will have to change number of ../ to include in the module path, depending on the depth of nesting of the file I am in.

Question: Is there a way to use import * as datasvc from "services/datasvc" and somehow configure TypeScript to handle that same way requireJS does?

Answer 1

You'll need typescript 2.0 or above in order to configure a base url.

As outlined in the release notes you can then create a tsconfig.json file with the following contents:

{
  "compilerOptions": {
    "baseUrl": "./modules"
  }
}

Now imports to "moduleA" would be looked up in ./modules/moduleA

import A from "moduleA";

Side note: Many developers rely on gulp or similar tools to compile typescript and are not using the typescript compiler directly. If you rely on one of these tools you have to make sure that your tool is picking up these new options like baseUrl from tsconfig.json and pass it to the typescript compiler.