typescript 打字稿 2.0。tsconfig.json 中的“类型”字段

Typescript 2.0. "types" field in tsconfig.json

提问by Stalso

I do not understand the meaning of typesfield in tsconfig.json. In documentation I have read such text:

我不明白types字段中的含义tsconfig.json。在文档中，我读过这样的文字：

"types": {
  "description": "Type declaration files to be included in compilation. Requires TypeScript version 2.0 or later.",
  "type": "array",
  "items": {
    "type": "string"
  }
},

As far, as I understand if I install @types/expressI should add such string in tsconfig.json

就我所知，如果我安装，@types/express我应该添加这样的字符串tsconfig.json

{
  "compilerOptions": {
     ...
     "types": ["lodash"]
   }
} 

but everything works fine without it. And now I do not understand, why I need typesfield

但没有它一切正常。现在我不明白，为什么我需要types字段

回答by Vlad Jerca

As of TypeScript 2.* the 'tsconfig.json' has the following two properties available:

从 TypeScript 2.* 开始，“tsconfig.json”具有以下两个可用属性：

{
    'typeRoots': [],
    'types': [] 
}

I'll detail both in order.

我将按顺序详细说明。

---

---

1. 'typeRoots' specifies root folders in which the transpiler should look for type definitions (eg: 'node_modules').

   • If you've been using typescript, you know that for different libraries that have not been written using typescript, you need definitions in order for the compiler to recognize global variables and to have IntelliSense support.

   • This issue has been tackled by projects (repos) such as 'DefinatelyTyped' that use tools such as tsdor typingsmodule to download typings required for your project, but they also come with their own 'json' file that needs to be maintained separately.

   • With TS2.* you can now fetch definition dependencies using 'npm'. So instead of using a seperate cli library like tsdor typings, you can now just use: npm i @types/{LIB}this way, all dependencies are managed using package.jsonand you can easily eliminate the necessity of another 'json' file to maintain in your project.

1. 'typeRoots' 指定转译器应在其中查找类型定义的根文件夹（例如：'node_modules'）。

   • 如果您一直在使用 typescript，您就会知道对于未使用 typescript 编写的不同库，您需要定义以便编译器识别全局变量并获得 IntelliSense 支持。

   • 此问题已通过项目（回购）如“DefinatelyTyped”是使用的工具，如解决TSD或分型模块来为你的项目需要下载分型，但他们也带着自己的“JSON”文件，该文件需要单独维护。

   • 使用 TS2.*，您现在可以使用“npm”获取定义依赖项。因此，而不是使用像一个单独的CLI库的TSD或分型，现在你只需使用： npm i @types/{LIB}这样一来，所有依赖使用管理的package.json，你可以很容易地消除别人的JSON“文件的必要性，在您的项目维护。

---

---

1. 'types' are the actual library names that will be found in the typeRoot.

   • so let's say you have the default configuration for typeRoots which would look something like:

     "typeRoots": [
         "./node_modules/@types"
     ]
     

   • let's say you now want to use jasmine as a test framework for your project, so you have your typeRootfolder configured, all you have too do now is execute: npm i @types/jasmine --save-dev

   • after the definition package is installed you just need to configure your 'types' property in 'tsconfig.json' as follows:

     "types": [
          "core-js",
          "jasmine",
          "requirejs",
          "chance"
     ]
     

2. 'types' 是将在 typeRoot 中找到的实际库名称。

   • 所以假设你有 typeRoots 的默认配置，它看起来像：

     "typeRoots": [
         "./node_modules/@types"
     ]
     

   • 假设你现在想使用 jasmine 作为你项目的测试框架，所以你已经配置了typeRoot文件夹，你现在要做的就是执行：npm i @types/jasmine --save-dev

   • 安装定义包后，您只需要在 'tsconfig.json' 中配置您的 'types' 属性，如下所示：

     "types": [
          "core-js",
          "jasmine",
          "requirejs",
          "chance"
     ]
     

---

---

To conclude, basically you tell the TS compiler the following:

总而言之，您基本上告诉 TS 编译器以下内容：

typeRoots: You need to look for typings in these folders. types: In one of the folders provided above, you will find definitions for theses framworks (subfolders).

typeRoots：您需要在这些文件夹中查找类型。 types：在上面提供的文件夹之一中，您将找到这些框架（子文件夹）的定义。

So using the scenario above, and if we add another root:

所以使用上面的场景，如果我们添加另一个根：

"typeRoots": [
    "./node_modules/@types",
    "./custom_definitions"
],
"types": [
    "jasmine",
]

TS will now look for definition files in

TS 现在将在

./node_modules/@types/jasmine

./node_modules/@types/jasmine

or

或者

./custom_definitions/jasmine

./custom_definitions/jasmine

Hope this helps!

希望这可以帮助！

回答by Xcalibur

You don't need the types field necessarily. Here is the important part to note from the documentation:

您不一定需要 types 字段。这是文档中需要注意的重要部分：

By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible

默认情况下，所有可见的“@types”包都包含在您的编译中。任何封闭文件夹的 node_modules/@types 中的包都被认为是可见的

So, if you have followed convention or used a tooling set such as npm to download @types packages, you don't need to configure typeRootsor typesin your configuration as it will work out of the box with the default folder structure.

因此，如果您遵循约定或使用诸如 npm 之类的工具集来下载 @types 包，则无需在配置中配置typeRoots或类型，因为它将使用默认文件夹结构开箱即用。

回答by Vitaly

Small addition to other answers: @types property in tsconfig.json is used mostly for global declarations (logic which you can use without importing modules). So, it won't limit your types if you import. E.g. you have this package: node_modules/@types/foo. And your @typesprop equals to [bar]. You will discover that this is still working if foois a module based logic:

其他答案的小补充： tsconfig.json 中的 @types 属性主要用于全局声明（无需importing 模块即可使用的逻辑）。所以，它不会限制你的类型，如果你import. 例如，你有这样的包：node_modules/@types/foo。你的@types道具等于[bar]. 如果foo是基于模块的逻辑，您会发现这仍然有效：

import {A, B, C} from 'foo'

see TS docs:

请参阅 TS 文档：

Keep in mind that automatic inclusion is only important if you're using files with global declarations (as opposed to files declared as modules). If you use an import "foo" statement, for instance, TypeScript may still look through node_modules & node_modules/@types folders to find the foo package.

请记住，仅当您使用带有全局声明的文件（而不是声明为模块的文件）时，自动包含才重要。例如，如果您使用 import "foo" 语句，TypeScript 可能仍会通过 node_modules 和 node_modules/@types 文件夹来查找 foo 包。