blocks|key|2654349|text|从TypeScript+2.*开始，'tsconfig.json‘有以下两个可用的属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2654350|{
++++'typeRoots':+[],
++++'types':+[]+
}|code-block|syntax|javascript|2654351|我将按顺序详细说明这两个问题。|2654352|2654353|2654354|'typeRoots‘指定转译器应该在其中查找类型定义的根文件夹(例如：'node_modules')。|ordered-list-item|2654355|2654356|-+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+_**tsd**_+or+_**typings**_+module+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+_**tsd**_+or+_**typings**_,+you+can+now+just+use:+`npm+i+@types/{LIB}`+this+way,+all+dependencies+are+managed+using+_**package.json**_+and+you+can+easily+eliminate+the+necessity+of+another+'json'+file+to+maintain+in+your+project.|2654357|​|2654358|2654359|类型‘|2654360|’是将在typeRoot中找到的实际库名。|2654361|2654362|-+so+let's+say+you+have+the+default+configuration+for+typeRoots+which+would+look+something+like:|2654363|+"typeRoots"：“./节点模块/@types”|2654364|-假设您现在想要使用npm+i+@types/jasmine+--save-dev作为项目的测试框架，那么您已经配置了jasmine文件夹，现在要做的就是执行:jasmine|offset|length|style|CODE|2654365|-安装定义包后，您只需在'tsconfig.json‘中配置您的'types’属性，如下所示：|2654366|“type”："core-js"，"jasmine"，"requirejs"，"chance“|2654367|2654368|2654369|总而言之，基本上你要告诉TS编译器以下内容：|2654370|typeRoots:您需要在这些文件夹中查找类型。类型:在上面提供的一个文件夹中，您可以找到这些框架(子文件夹)的定义。|2654371|因此，使用上面的场景，如果我们添加另一个根：|2654372|"typeRoots":+[
++++"./node_modules/@types",
++++"./custom_definitions"
],
"types":+[
++++"jasmine",
]|2654373|TS现在将在以下位置查找定义文件|2654374|./node_modules/@types/jasmine|2654375|或|2654376|./custom_definitions/jasmine|2654377|希望这能有所帮助！|2654378|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|A|V|0|0|0|0|0|0|0|0|0|0|0|T|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|20|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|23|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|24|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|25|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|26|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|28|8|@]|9|@]|A|$]]|$1|V|3|W|5|M|7|29|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|2B|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|2C|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|2D|8|@$14|2E|15|2F|16|17]]|9|@]|A|$]]|$1|18|3|19|5|6|7|2G|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|2H|8|@]|9|@]|A|$]]|$1|1C|3|R|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2K|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|2L|8|@]|9|@]|A|$]]|$1|1I|3|1J|5|6|7|2M|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|D|7|2N|8|@]|9|@]|A|$E|F]]|$1|1M|3|1N|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|2P|8|@$14|2Q|15|2R|16|17]]|9|@]|A|$]]|$1|1Q|3|1R|5|6|7|2S|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|6|7|2T|8|@$14|2U|15|2V|16|17]]|9|@]|A|$]]|$1|1U|3|1V|5|6|7|2W|8|@]|9|@]|A|$]]|$1|1W|3|-4|5|6|7|2X|8|@]|9|@]|A|$]]]|1X|$]]

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

<pre><code>{
 'typeRoots': [],
 'types': [] 
}
</code></pre>

I'll detail both in order.

<hr>

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

<ul>
<li>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.</li>
<li>This issue has been tackled by projects (repos) such as 'DefinatelyTyped' that use tools such as tsd or typings module to download typings required for your project, but they also come with their own 'json' file that needs to be maintained separately. </li>
<li>With TS2.* you can now fetch definition dependencies using 'npm'. So instead of using a seperate cli library like tsd or typings, you can now just use:
<code>npm i @types/{LIB}</code>
this way, all dependencies are managed using package.json and you can easily eliminate the necessity of another 'json' file to maintain in your project.</li>
</ul></li>
</ol>

<hr>

<ol start="2">
<li>'types' are the actual library names that will be found in the typeRoot.

<ul>
<li>so let's say you have the default configuration for typeRoots which would look something like:

<pre><code>"typeRoots": [
 "./node_modules/@types"
]
</code></pre></li>
<li>let's say you now want to use jasmine as a test framework for your project, so you have your typeRoot folder configured, all you have too do now is execute: <code>npm i @types/jasmine --save-dev</code> </li>
<li>after the definition package is installed you just need to configure your 'types' property in 'tsconfig.json' as follows: 

<pre><code>"types": [
 "core-js",
 "jasmine",
 "requirejs",
 "chance"
]
</code></pre></li>
</ul></li>
</ol>

<hr>

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

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).

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

<pre><code>"typeRoots": [
 "./node_modules/@types",
 "./custom_definitions"
],
"types": [
 "jasmine",
]
</code></pre>

TS will now look for definition files in 

<code>./node_modules/@types/jasmine</code>

or

<code>./custom_definitions/jasmine</code>

Hope this helps!

blocks|key|109599|text|您不一定需要types字段。下面是documentation中需要注意的重要部分|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|109600|109601|默认情况下，所有可见的“@types”包都包含在编译中。任何封闭文件夹的node_modules/@type中的包都被认为是可见的|blockquote|109602|109603|109604|因此，如果你遵循了约定或者使用了一个工具集，比如npm来下载@types包，你不需要在你的配置中配置typeRoots或者types，因为它将使用默认的文件夹结构工作。|style|BOLD|109605|entityMap|0|LINK|mutability|MUTABLE|url|https://www.typescriptlang.org/tsconfig#types^0|H|D|0|0|0|0|0|0|1E|9|1P|5|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|10|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|12|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|13|8|@$A|14|B|15|L|M]|$A|16|B|17|L|M]]|9|@]|C|$]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

You don't need the types field necessarily. Here is the important part to note from the <a href="https://www.typescriptlang.org/tsconfig#types" rel="noreferrer">documentation</a>:

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

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

blocks|key|2654466|text|对其他答案的一点补充:+tsconfig.json中的@types属性主要用于全局声明(无需importing模块即可使用的逻辑)。所以，如果你使用import，它不会限制你的类型。例如，你有这个包：node_modules/@types/foo。你的@types属性等于[bar]。你会发现，如果foo是一个基于模块的逻辑，它仍然可以工作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2654467|import+{A,+B,+C}+from+'foo'|code-block|syntax|javascript|2654468|请参阅TS文档：|2654469|2654470|请记住，只有在使用带有全局声明的文件(而不是声明为模块的文件)时，自动包含才是重要的。例如，如果使用导入"+foo“语句，TypeScript可能仍然会在node_modules+&+node_modules/@types文件夹中查找foo包。|blockquote|2654471|2654472|entityMap^0|1A|6|22|6|2S|N|3I|6|3S|5|45|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|19|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|S|$]]

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

<pre><code>import {A, B, C} from 'foo'
</code></pre>

see TS docs:

<blockquote>
 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 &amp; node_modules/@types folders to find the foo package.
</blockquote>

I do not understand the meaning of <code>types</code> field in <code>tsconfig.json</code>. In documentation I have read such text: 

<pre class="lang-js prettyprint-override"><code>"types": {
 "description": "Type declaration files to be included in compilation. Requires TypeScript version 2.0 or later.",
 "type": "array",
 "items": {
 "type": "string"
 }
},
</code></pre>

As far, as I understand if I install <code>@types/express</code> I should add such string in <code>tsconfig.json</code>

<pre><code>{
 "compilerOptions": {
 ...
 "types": ["lodash"]
 }
} 
</code></pre>

but everything works fine without it. And now I do not understand, why I need <code>types</code> field

Typescript 2.0. "types" field in tsconfig.json

TypeScript

编译器

我不明白tsconfig.json中types字段的含义。在文档中，我读到过这样的文本："types": {  "description": "Type declaration files to be included in compilation. Requires TypeScript version 2.0 or...

问Typescript 2.0。tsconfig.json中的"types“字段
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Typescript 2.0。tsconfig.json中的"types“字段EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Typescript 2.0。tsconfig.json中的"types“字段
EN