WebStorm+Typescript: How to use without reference path?

Question

In Visual Studio, it's possible to use internal modules without having to include /// <reference path="..." /> tags.
How can one accomplish the same in WebStorm 10?

Another question, how can I get WebStorm to import the typings to a project? WebStorm 10 puts typings in the cache folder.

Answer 1

For internal modules, use a module loader such as RequireJS / SystemJS / Webpack / Browserify, it will save you from having to write /// <reference path="..." /> for internal modules and you will no longer need to use module namespaces.
If you use RequireJS, you need to run tsc with the argument -m amd, for Browserify -m commonjs, SystemJS & Webpack support both amd and commonjs styles (and others as well), however there's a simpler solution using tsconfig.json files (keep reading) where you don't have to add this argument.

For external TypeScript modules; usually d.ts files (Type Definitions for external JS libs, aka Typings), install the typings module via Node's package manager - NPM.
typings helps you manage the Typings in your project, and combine all the /// <reference path="..." /> lines into a single d.ts file.

For both internal and external modules, you can use a tsconfig.json file to eliminate the need for any /// <reference path="..." /> lines.

Webstorm 11 (currently during development phase, distributed under an early-access-program, EAP) has built-in support for tsconfig.json files.
For Webstorm 10 you can use this solution.

If you choose not to use tsconfig.json while still using typings to manage your typings, and a module loader such as RequireJS, you would have to add the -m [...] command line option, and include a single line of /// <reference path="path/typings/something.d.ts" /> on top of your internal .ts files, this .d.ts file will include all external Typings your project depends on.

---

tsconfig.json

Put it in your project's root.
It's content might look something like this:

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "target": "es5",
    "experimentalDecorators": true
  },
  "files": [
    "typings/something.d.ts",
    "main.ts"
  ]
}

Note that you do not have to list out all of your .ts files under the files: key, tsc automatically knows it should include the dependencies (recursively) of any file mentioned under files:.

---

Webstorm 11

Config webstorm to use tsconfig.json:

---

tl;dr

If you can, it's best (IMHO) to do the following:

• Use a module loader (RequireJS/SystemJS/Browserify/Webpack).
• Manage your d.ts files (typings) with the typings module.
• Wrap it all in a tsconfig.json file (configure webstorm to use it).

After that, you can delete all of your /// <reference path="..." /> lines.