Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WebStorm+Typescript: How to use without reference path?

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.

like image 387
Hao Avatar asked Aug 22 '15 00:08

Hao


1 Answers

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:

enter image description here


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.

like image 81
Alon Amir Avatar answered Oct 07 '22 16:10

Alon Amir