打字稿将一组类型的语法添加到JavaScript。当我们声明变量时,我们可以将类型信息添加到变量中,以便可以正确使用该变量,即类型检查。
将类型添加到变量中,很自然地想到何时考虑陈述:
例如:
例如,函数:
这样,当使用它们(例如可变分配和功能调用)时,您可以查看类型信息的正确使用:
打字稿设计语法没有问题,但这还不够。
我们编写的代码可以以这种方式声明,但不是我们写的?
例如,由JS发动机提供的数字,字符串,日期,REGEXP,HTMLELEMENT,事件和浏览器环境的其他API。
这些API是引擎的实现,但是我们将在代码中使用它们,还需要检查正确的用途,即键入检查。如何添加这些API?
打字稿设计声明的语法,可以单独声明变量的类型:
例如:
例如,函数:
这样,可以单独声明该类型,并且在使用这些API时可以进行类型检查。
就像JS引擎的API和浏览器提供的API一样,这些基本上是必要的并且具有标准。
TypeScript软件包下面有一个LIB目录,其中包含一堆lib.xx.d.ts type声明文件。这是某些类型的TS构建-in。
由于这些只是声明,没有特定的JS实施,因此TS已分别设计了文件类型,即d.ts,d被声明。
例如,lib.d.ts中的类型声明:
因为它是在TS中构建的,所以可以使用配置:
在tsconfig.json中配置CompiloPtions.lib,以引入相应的D.TS类型语句文件。
一些学生可能会说,建造的类型不多,只有DOM和ES。
确实,由于JS API和浏览器的API是标准的,因此它可以自然地根据标准定义类型。其余环境可能没有标准,并且经常变化,因此自然无法构建,例如Node。LIB中只有DOM和ES类型。
那么节点环境和其他环境API如何配置类型声明?
节点和其他环境的API尚未在TS中构建,因为没有标准,但TS还支持这些环境的类型声明的配置。
该方法是通过 @type/xxx的软件包:
TS将首先加载构建的LIB类型语句,然后在@Types软件包下找到类型声明。
这样,可以以这种方式扩展其他环境的类型。
@Types软件包在肯定的项目下均匀管理。如果要创建@Types软件包,则需要查看其文档。
一般而言,它可以很快发送到NPM:
我们知道可以配置那些构建的lib,并且可以自然配置 @type/xx的数据包:
您可以在@Types目录中指定哪些软件包,还可以修改@Types软件包的目录(默认为node_modules/ @types):
除了将类型声明添加到API(例如Node)外,@类型软件包还具有有用性,即在类型语句中添加一些JS袋:
如果代码本身用TS编写,则可以打开compiloptions.declaration编译以生成d.ts文件:
然后配置类型以指定package.json中DTS的位置:
这样,您不需要单独的@Types软件包。
但是,如果未用TS编写代码,则可能需要单独编写一个 @types/xxx以声明TS类型,然后将其加载到TSCONFIG.JSON的配置中。
例如,公共VUE3不需要 @type/vue软件包,因为它是用TS编写的,并且NPM软件包还包含DTS文件。
但是React不是由TS写的。这是Facebook自己的流程。自然,您需要 @类型/React数据包来添加TS类型语句。
在这一点上,TS构建的-DOM和ES类型声明中,其他类型的环境声明具有某些类型的软件包,我们知道如何加载它。
我自己写的TS代码呢?
实际上,我们经常配置在配置下编译的入口文件,指定一堆未通过Incluction的信息,然后删除排除的一部分。您还可以通过文件分别包含一些:
当TSC编译时,它将加载lib,@type,并包含文件和文件以进行键入检查。
这是TS类型声明的三个来源。
现在仍然有问题。一些API是全球性的。一些API是模块。TS如何声明全局API的类型以及如何声明模块中的API类型?
我们编写的JS代码是某些API是全局的,并且有些API在模块中,因此TS支持它是正常的。
但是,JS的模块规范不在开始。首先,它是在全球情况下悬挂一个对象,然后将某些API悬挂在该对象上的方法,即名称空间名称空间。
因此,TS支持的最早的模块化计划自然是名称空间:
如果您了解名称空间,可以查看编译的代码:
它是整体对象,然后将更多暴露的属性悬挂在对象上。
阅读了汇编代码后,是否立即学习了名称空间?
后来,出现了commonjs规范,而这种规范不能称为名称空间,因此TS支持模块,
很容易想到@类型/节点的API定义是一堆模块:
这个模块和名称空间有什么区别?
实际上,确实没有区别,但是该路径通常是在模块后连接的,而名称空间的一半是命名空间名称。其他语法是相同的。
这个结论是基于:
用astexplorer.net查看AST AST。两种AST类型都是相同的。换句话说,编译器的后续处理处理是相同的,这不是一回事。
后来,每个人都知道JS具有ES模块规格,因此现在建议使用导入导出方法声明模块并导入导出。
不仅可以单独介绍导入类型语法:类型:
因此,现在不建议使用模块使用名称空间和模块,因此请尝试尽可能多地使用ES模块。
那全局类型语句呢?
使用ES模块,TS具有单独的设计:
在DTS中,如果没有导入和导出语法,则所有语句类型均为全局,否则它将在模块内。
让我们测试:
包括在SRC下配置TS文件,然后使用文件介绍global.d.ts文件:
在global.d.ts中删除func功能:
SRC/index.ts中有提醒:
汇编不是错误的:
添加导入语句:
汇编报告了一个错误,说您找不到功能:
这表明FUNC不再是全球类型。
目前,您可以手动声明全球:
再试一次,编译并通过:
不仅ES模块模块可以使用全局来声明全局类型。模块方法的COMONJS模块也可以:
例如, @type/node中有许多这样的全局类型:
这是要声明模块的三种类型的打字稿的语法以及声明全局类型的方式。
因此,如果您需要引入模块,但还需要全局语句类型。有没有更好的办法?
是的,通过编译器引用。这样,它可以引入类型声明,并且不会将所有类型的语句导致模块:
您可以看到许多DT引入了这样的其他DT,只是为了确保引入类型声明仍然是全局的:
Typescript将类型信息添加到JavaScript,并在编译过程中确实输入检查。
除了在变量声明期间定义类型外,TS还通过声明支持单独的声明类型。只有类型声明的文件后缀为d.ts.
Typescript有三种类型的存储类型语句:
其中,NPM软件包还可以同时存储TS类型,并且可以指定包装字段的路径。
VUE的类型存储在NPM软件包下,React的类型在 @types/react中。由于源代码是由TS编写的,因此不是。
巧合的是,TS声明模块方法也是三个:
DTS类型声明的类型是全局默认值,除非目前有必要手动声明Global。为了避免这种情况,可以使用参考编译器指令。
在-Depth的typeScript中,除了学习类型定义和类型编程外,这三种类型的来源(lib,@stype,用户目录)以及三个模块声明的方法(命名空间,Module,ES模块)的方法,以及全局类型和参考也是掌握的。
原始:https://juejin.cn/post/7111112135903543332