typescript(ts) 声明文件

简介: 在typescript中存在两种文件后缀名,一种是 .ts,另一种是.d.ts结尾的文件,我们主要的代码都是写在以.ts文件结尾的文件中。而.d.ts结尾的文件就是声明文件。

什么是声明文件


在typescript中存在两种文件后缀名,一种是 .ts,另一种是.d.ts结尾的文件,我们主要的代码都是写在以.ts文件结尾的文件中。而.d.ts结尾的文件就是声明文件。


声明文件的作用


我们都知道,ts 是 js 的超集,ts 是一个静态的类型检查系统,ts 比 js 多的就是类型检查,而实现类型检查的关键就是 ts 中的声明文件。所以声明文件的作用是为js 提供类型检查而存在的。


声明文件存放的位置


  • 放置到tsconfig.json配置中include:[]中包含的目录中


20210204101327995.png


  • 放置到node_modules/@types文件夹中


我们在node 中搭建ts的环境中,就需要安装 @types/node 这个声明文件。


20210204101459402.png


  • 手动配置


在 tsconfig.json中使用配置 typeRoots:[]里面配置,这里手动配置了就会失效 node_modules 和 include里面配置的。


20210204101928483.png


  • 与JS代码所在目录相同,并且文件名也相同的文件。用ts代码书写的工程发布之后的格式。


编写的ts 代码可以自动生成三个文件,js 文件 , .d.ts 文件, 和 .js.map 文件 ,但是后面两者都需要手动在 tsconfig.json中进行手动配置,生成编译生成js文件不需要配置的话会在当前ts 的目录下面生成js 文件,如果想向vue 打包生成outdir:'目录名称',生成.d.ts配置:"declaration": true,生成js.map需要配置:"sourceMap": true,


20210204102131935.png

20210204103513391.png


编写声明文件


声明文件的编写有两种方式,手动编写 自动生成,

所有的声明文件都是给ts 认识的,改文件不参与函数的运行


自动生成


对于我们写的代码是ts 的代码,可以自动生成。

方法

工程是使用ts开发的,发布(编译)之后,是js文件,发布的是js文件。


如果发布的文件,需要其他开发者使用,可以使用声明文件,来描述发布结果中的类型。


配置tsconfig.json中的declaration:true即可


手动编写


全局声明:声明的文件放入的名字叫做gloab.d.ts上,不然会报错


配置如下


20210204145944486.png


declare var 声明全局变量


2021020414581249.png

20210204145841154.png

20210204150245628.png


declare function 声明全局方法


20210204151826548.png

20210204151909573.png


declare class 声明全局类


20210204152256581.png

20210204152355796.png


declare enum 声明全局枚举类型


20210204152524530.png

20210204152546547.png


declare namespace 声明全局对象(含有子属性)


namespace表示命名空间,可以将其认为是一个对象,命名空间中的内容,必须通过命名空间.成员名访问


20210204160617984.png

20210204160653879.png


interface 和 type 声明全局类型


这里不能使用 declare来进行声明,和 ts 里面的是一样的,


所有声明文件都是给ts 来约束的,不会参与实际的代码运行。


发布包


还是两种包,一种是ts 开发的,另一种是给js开发声明文件


当前工程使用ts开发


编译完成后,将编译结果所在文件夹直接发布到npm上即可,手动开启那两个配置就好


为其他第三方库开发的声明文件


发布到@types/**中。


1) 进入github的开源项目:https://github.com/DefinitelyTyped/DefinitelyTyped

2) fork到自己的开源库中


3) 从自己的开源库中克隆到本地


4) 本地新建分支,在新分支中进行声明文件的开发


在types目录中新建文件夹,在新的文件夹中开发声明文件


5) push分支到你的开源库


6) 到官方的开源库中,提交pull request


7) 等待官方管理员审核(1天)


审核通过之后,会将你的分支代码合并到主分支,然后发布到npm。


之后,就可以通过命令npm install @types/你发布的库名

相关文章
|
6月前
|
存储 JavaScript 前端开发
TS中 说说数组在TypeScript中是如何工作的?
TS中 说说数组在TypeScript中是如何工作的?
|
6月前
|
JavaScript
【typeScript】搭建TS环境
【typeScript】搭建TS环境
|
6月前
|
JavaScript 前端开发 程序员
总结TypeScript 的一些知识点:TypeScript 声明文件
程序来输出 "Hello World" :当然,很多流行的第三方库的声明文件不需要我们定义了,比如 jQuery 已经有人帮我们定义好
总结TypeScript 的一些知识点:TypeScript 声明文件
|
6月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
124 0
|
2月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
135 2
|
6月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
310 0
|
21天前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
48 0
|
21天前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
24 0
|
2月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
32 1
|
3月前
|
JavaScript IDE 开发工具