必威betway-手机版唯一官网
做最好的网站

betway必威手机版

当前位置:必威betway > betway必威手机版 > 声明文件简介

声明文件简介

来源:http://www.jdxzx.net 作者:必威betway 时间:2020-01-05 00:56

声明文件简介

当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。

什么是声明语句

假如我们想使用第三方库 jQuery,一种常见的方式是在 html 中通过script标签引入 jQuery,然后就可以使用全局变量$或jQuery了。如:

$('body')

但是在 ts 中,编译器并不知道$或jQuery是什么东西:

$('body') //Cannot find name '$'.Doyou needtoinstalltypedefinitionsforjQuery? Try`npm i @types/jquery`.

这时,我们需要使用declare var来定义它的类型:

declare var $: (selector: string) = any;$('body')

declare var并没有真的定义一个变量,只是定义了全局变量$的类型,仅仅会用于编译时的检查,在编译结果中会被删除。

什么是声明文件

通常我们会把声明语句放到一个单独的文件中,这就是声明文件:

interface myInfoType { name?: string; age?: number; [params:string]: any;}declare const myInfo: myInfoType;declare const $: (selector: string) = any;

声明文件必须以.d.ts为后缀。

ts 会解析项目中所有的*.ts文件,当然也包含以.d.ts结尾的文件。所以当我们将jQuery.d.ts放到项目中时,其他所有*.ts文件就都可以获得$的类型定义了。

├── src # 业务资源文件目录│ ├── category //项目分类│ │ ├── demo1│ │ ├── demo2│ │ └── ...│ ├── components //公共组件│ ├── util //公共资源│ └── custom.d.ts //项目全局变量声明文件├── index.html //项目启动入口├── .gitignore //git忽略文件├── .eslintrc.js //eslint校验配置├── package.json //依赖包├── tsconfig.json //ts配置├── webpack.config.build.js //webpack打包├── webpack.config.base.js //webpack基础配置└── webpack.config.js //项目启动配置

假如仍然无法解析,那么可以检查下tsconfig.json中的files、include和exclude配置,确保其包含了index.d.ts文件。

也是就是说声明文件要代码使用的顶级目录下。

第三方声明文件

我们可以直接下载下来使用,但是更推荐的是使用@types统一管理第三方库的声明文件。

@types的使用方式很简单,直接用 npm 安装对应的声明模块即可,以 jQuery 举例:

npminstall@types/jquery--save-dev

书写声明文件

在不同的场景下,声明文件的内容和使用方式会有所区别。

库的使用场景主要有以下几种:

[全局变量]():通过script标签引入第三方库,注入全局变量[npm 包]():通过import foo from 'foo'导入,符合 ES6 模块规范[UMD 库]():既可以通过script标签引入,又可以通过import导入[直接扩展全局变量]():通过script标签引入后,改变一个全局变量的结构[在 npm 包或 UMD 库中扩展全局变量]():引用 npm 包或 UMD 库后,改变一个全局变量的结构[模块插件]():通过script或import导入后,改变另一个模块的结构全局变量

使用全局变量的声明文件时,如果是以npm install @types/xxx --save-dev安装的,则不需要任何配置。否则就需要在声明文件中声明全局变量。

全局变量的声明文件主要有以下几种语法:

[declare var/const/let]() 声明全局变量[declare function]() 声明全局方法[declare class]() 声明全局类[declare enum]() 声明全局枚举类型[declare namespace]() 声明全局对象[interface 和 type]() 声明全局类型declare var/const/let

用来定义一个全局变量的类型;

interface myInfoType { name?: string; age?: number; [params:string]: any;}declare var myInfo:myInfoType;declare let myInfo:myInfoType;declare const myInfo:myInfoType; //此时全局变量是一个常量不允许修改

一般来说,全局变量都是禁止修改的常量,所以大部分情况都应该使用const而不是var或let。

需要注意的是,声明语句中只能定义类型,切勿在声明语句中定义具体的实现

declare const test = function(para) { return para;}//An implementation cannot be declared in ambient contexts.

declare function

declare function用来定义全局函数的类型。

declarefunctiontest(para:string):any;

统一也是只能定义类型 不能定义具体实现;

declare function test(para: string):any{ return para;}//An implementation cannot be declared in ambient contexts.ts(1183)

declare class

当全局变量是一个类的时候,我们用declare class来定义它的类型

declare class student { name: string; constructor(name: string); hello(): string;}

同样的,declare class语句也只能用来定义类型,不能用来定义具体的实现,比如定义 hello` 方法的具体实现则会报错:

declare class student { name: string; constructor(name: string); hello(){ return this.name; };}//An implementation cannot be declared in ambient contexts.ts(1183)

declare namespace

namespace是 ts 早期时为了解决模块化而创造的关键字,中文称为命名空间。

随着 ES6 的广泛应用,现在已经不建议再使用 ts 中的namespace,而推荐使用 ES6 的模块化方案了,故我们不再需要学习namespace的使用了。

namespace被淘汰了,但是在声明文件中,declare namespace还是比较常用的,它用来表示全局变量是一个对象,包含很多子属性。

declare namespace jQuery { function ajax(url: string, settings?: any): void;}

interface 和 type

除了全局变量之外,可能有一些类型我们也希望能暴露出来。在类型声明文件中,我们可以直接使用interface或type来声明一个全局的接口或类型

interface fetchOptions { method?: 'GET' | 'POST'; credentials?: string; headers?: any; [params: string]: any;}let options: fetchOptions = { method: 'GET', credentials: 'include'}

防止命名冲突

暴露在最外层的interface或type会作为全局类型作用于整个项目中,我们应该尽可能的减少全局变量或全局类型的数量。故最好将他们放到namespace下

declare namespace fetchSetting { interface fetchOptions { method?: 'GET' | 'POST'; credentials?: string; headers?: any; [params: string]: any; }}let options: fetchSetting.fetchOptions = { method: 'GET', credentials: 'include'}

本文由必威betway发布于betway必威手机版,转载请注明出处:声明文件简介

关键词: