types的，types 和 @types 是什么？

老铁们，大家好，相信还有很多朋友对于types的和types 和 @types 是什么？的相关问题不太懂，没关系，今天就由我来为大家分享分享types的以及types 和 @types 是什么？的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

TypeScript的学习资料非常多，其中也不乏很多优秀的文章和教程。但是目前为止没有一个我特别满意的。原因有：

因此我的想法是做一套不同市面上大多数的TypeScript学习教程。以人类认知的角度思考问题，学习TypeScript，通过通俗易懂的例子和图片来帮助大家建立TypeScript世界观。

注意，我的系列文章基本不会讲API，因此需要你有一定的TypeScript使用基础，推荐两个学习资料。

结合这两个资料和我的系列教程，掌握TypeScript指日可待。

接下来，我们通过几个方面来从宏观的角度来看一下TypeScript。

TypeScript中有几个概念和名字很像，会让初学者傻傻分不清楚。比如配置文件中的「types和typeRoots」，并且还有一个@types。接触过TypeScript的人一定接触过它们，这几个有什么区别和联系呢？今天就带你来重新认识下它们。

这里我通过一个例子来说明一下什么是@types，这样大家理解起来更深刻一点。

当我们用npm等包管理工具安装第三方包的时候，有些包并不是TypeScript编写的，自然也不会导出TypeScript声明文件。这种情况下，如果我们在TypeScript项目中引入了这种包，则会编译报错(没有设置allowJS)。举个例子，当我们通过npminstalljquery--save安装jquery包并引用的时候，TypeScript会报错。

allowJS是TypeScript1.8引进的一个编译项。

Couldnotfindadeclarationfileformodule‘jquery’.Trynpminstall@types/jqueryifitexistsoraddanewdeclaration(.d.ts)filecontainingdeclaremodule'jquery';

这里的意思是TypeScript没有找到jquery这个包的定义，你可以通过npminstall@types/jquery安装相关声明，或者自己定义一份.d.ts文件，并将jquery声明为module。

全世界不是TypeScript编写的包多了去了。即使你的包是TypeScript编写的，如果你没有导出声明文件，也是没用的。（TypeScript默认不会导出声明文件，只会编译输出JavaScript文件）。因此TypeScript必须对这种情况提供解决方案，而上面的两种方案（安装@types和自己declaremodule）就是TypeScript官方提出的，你可以选择适合你的方案。我的推荐是尽量使用@types下的声明，实在没有，再使用第二种方法。

值得一提的是，并不是所有的包都可以通过这种方式解决的，能解决的是DefinitelyTyped组织已经写好定义的包，好消息是比较流行的包基本都有。如果你想查一个包是否在@type下，可以访问https://microsoft.github.io/TypeSearch/

那么TypeScript是怎么找定义的，什么情况会找不到定义而报类似上面举的例子的错误，这里简单介绍下原理。

就好像node的包查找是先在当前文件夹找node_modules，在它下找递归找，如果找不到则往上层目录继续找，直到顶部一样，TypeScript类型查找也是类似的方式。

@types/*模块声明文件由社区维护，通过发布到@types空间下。GitHub-DefinitelyTyped/DefinitelyTyped:TherepositoryforhighqualityTypeScripttypedefinitions.

和包查找类似，默认情况下变量类型定义的查找也会去@types下去寻找。只不过并不是直接去@types找，而是有一定的优先级，这个过程类似原型链或者作用域链。

constuser:User={name:"lucifer"};\nTypescript则会先在本模块查找User的定义。如果找到，则直接返回。如果找不到，则会到全局作用域找，而这个全局默认就是指的就是@types下的所有类型定义。（注意目录页是可以配的）

?

也就是说@types下的定义都是全局的。当然你可以导入@types下导出的定义，使得它们的作用域变成你的模块内部。

前面说了TypeScript会默认引入node_modules下的所有@types声明，但是开发者也可以通过修改tsconfig.json的配置来修改默认的行为.

tsconfig.json中有两个配置和类型引入有关。

{\n"compilerOptions":{\n"typeRoots":["./typings"]\n}\n}\ntypes:TypeScript编译器会默认引入typeRoot下所有的声明文件，但是有时候我们并**不希望全局引入所有定义**，而是仅引入部分模块。这种情景下可以通过types指定模块名只引入我们想要的模块，比如以下只会引入jquery的声明文件

{\n"compilerOptions":{\n"types":["jquery"]\n}\n}\n总结typeRoots是tsconfig中compilerOptions的一个配置项，typeRoots下面的包会被ts编译器自动包含进来，typeRoots默认指向node_modules/@types。@types是npm的scope命名空间，和@babel类似，@types下的所有包会默认被引入，你可以通过修改compilerOptions来修改默认策略。types和typeRoots一样也是compilerOptions的配置，指定types后，typeRoots下只有被指定的包才会被引入。参考GitHub-DefinitelyTyped/DefinitelyTyped:TherepositoryforhighqualityTypeScripttypedefinitions.@types|深入理解TypeScripttsconfig.json·TypeScript中文网·TypeScript——JavaScript的超集理解Typescript配置文件-个人文章-SegmentFault思否关注我

大家也可以关注我的公众号《脑洞前端》获取更多更新鲜的前端硬核文章，带你认识你不知道的前端。

公众号【力扣加加】知乎专栏【Lucifer-知乎】

关于types的到此分享完毕，希望能帮助到您。