typescript(ts) 声明文件

什么是声明文件

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

声明文件的作用

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

声明文件存放的位置

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

在这里插入图片描述

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

我们在node 中搭建ts的环境中,就需要安装 @types/node 这个声明文件。
typescript(ts) 声明文件_第1张图片

  • 手动配置

tsconfig.json中使用配置 typeRoots:[]里面配置,这里手动配置了就会失效 node_modulesinclude里面配置的。
在这里插入图片描述

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

编写的ts 代码可以自动生成三个文件,js 文件 , .d.ts 文件, 和 .js.map 文件 ,但是后面两者都需要手动在 tsconfig.json中进行手动配置,生成编译生成js文件不需要配置的话会在当前ts 的目录下面生成js 文件,如果想向vue 打包生成outdir:'目录名称',生成.d.ts配置:"declaration": true,生成js.map需要配置:"sourceMap": true,
typescript(ts) 声明文件_第2张图片
在这里插入图片描述

编写声明文件

声明文件的编写有两种方式,手动编写 自动生成,
所有的声明文件都是给ts 认识的,改文件不参与函数的运行

自动生成

对于我们写的代码是ts 的代码,可以自动生成。
方法
工程是使用ts开发的,发布(编译)之后,是js文件,发布的是js文件。

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

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

手动编写

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

配置如下
typescript(ts) 声明文件_第3张图片

declare var 声明全局变量

typescript(ts) 声明文件_第4张图片
typescript(ts) 声明文件_第5张图片
typescript(ts) 声明文件_第6张图片

declare function 声明全局方法

typescript(ts) 声明文件_第7张图片
在这里插入图片描述

declare class 声明全局类

typescript(ts) 声明文件_第8张图片
在这里插入图片描述

declare enum 声明全局枚举类型

typescript(ts) 声明文件_第9张图片
typescript(ts) 声明文件_第10张图片

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

namespace表示命名空间,可以将其认为是一个对象,命名空间中的内容,必须通过命名空间.成员名访问
typescript(ts) 声明文件_第11张图片
typescript(ts) 声明文件_第12张图片

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/你发布的库名

你可能感兴趣的:(typescript)