且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

WebStorm+Typescript:如何在没有参考路径的情况下使用?

更新时间:2022-11-02 22:51:50

对于内部模块,使用模块加载器,例如

tl;博士

如果可以,***(恕我直言)执行以下操作:

  • 使用模块加载器(RequireJS/SystemJS/Browserify/Webpack).
  • 使用 typings 模块管理 d.ts 文件(typings).
  • 将其全部包装在 tsconfig.json 文件中(配置 webstorm 以使用它).

之后,您可以删除所有 /// 行.

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.

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.