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

WebStorm+Typescript: How to use without reference path?

提问by Hao

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?

在 Visual Studio 中，可以使用内部模块而不必包含/// <reference path="..." />标签。
如何在 WebStorm 10 中完成相同的任务？

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

另一个问题，如何让 WebStorm 将类型导入到项目中？WebStorm 10 将类型放入缓存文件夹中。

回答by Alon Amir

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

对于内部模块，使用模块加载器，例如RequireJS/ SystemJS/ Webpack/ Browserify，它将使您不必/// <reference path="..." />为内部模块编写代码，并且您将不再需要使用modulenamespaces。
如果您使用 RequireJS，则需要tsc使用参数运行-m amd，因为 Browserify -m commonjs、SystemJS 和 Webpack 支持amd和commonjs样式（以及其他样式），但是使用tsconfig.json文件（继续阅读）有一个更简单的解决方案，您没有添加这个论点。

For externalTypeScriptmodules; usually d.tsfiles (Type Definitions for external JS libs, aka Typings), install the typingsmodule via Node's package manager - NPM.
typingshelps you manage the Typingsin your project, and combine all the /// <reference path="..." />lines into a single d.tsfile.

对于外部TypeScript模块；通常d.ts文件（类型定义为外部JS库，又名分型），安装分型模块通过节点的包管理器- NPM。
分型可帮助您管理的分型在您的项目，所有集约/// <reference path="..." />线到一个单一d.ts的文件。

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

对于内部和外部模块，您可以使用tsconfig.json文件来消除对任何/// <reference path="..." />行的需要。

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.

Webstorm 11（目前处于开发阶段，在早期访问程序 EAP 下分发）具有对 tsconfig.json 文件的内置支持。
对于 Webstorm 10，您可以使用此解决方案。

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

如果您选择不使用tsconfig.json同时仍然使用typings管理您的分型和模块加载，如RequireJS，你就必须添加-m [...]命令行选项，并包括一个单一的线路/// <reference path="path/typings/something.d.ts" />上的内部顶部的.ts文件，这个 .d.ts 文件将包含您的项目所依赖的所有外部类型。

---

---

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"
  ]
}

Notethat you do not have to list out all of your .tsfiles under the files:key, tscautomatically knows it should include the dependencies (recursively) of any file mentioned under files:.

请注意，您不必列出密钥.ts下的所有文件files:，tsc自动知道它应该包含files:.

---

---

Webstorm 11

网络风暴 11

Config webstormto use tsconfig.json:

配置webstorm使用tsconfig.json：

---

---

tl;dr

tl;博士

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 typingsmodule.
• Wrap it all in a tsconfig.jsonfile (configure webstormto use it).

• 使用模块加载器（RequireJS/SystemJS/Browserify/Webpack）。
• 管理你的d.ts文件（分型与）typings模块。
• 将其全部包装在tsconfig.json文件中（配置webstorm以使用它）。

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

之后，您可以删除所有/// <reference path="..." />行。