TypeScript声明文件

更新日期: 2019-07-07阅读: 3.2k标签: 文件

声明文件简介

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


什么是声明语句

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

$('body')

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

$('body') //Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.

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

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

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


什么是声明文件

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

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 举例:

npm install @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 用来定义全局函数的类型。

declare function test(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'
}

链接: https://www.fly63.com/article/detial/4570

h5移动端实现图片文件上传

PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。

前端使用js读取文件操作

首先我们定义一个input标签type=file、然后我们定义一个jsReadFiles的方法将文件作为参数;当上传文件的时候读取这个文件。图片上传成功,只是图片路径变成了base64编码的形式。

HTML5实现文件读取、编辑、保存

HTML5读取文件主要利用的就是FileReader这个API,它的使用需要从一个构造函数开始,保存文件的关键是生成文件对象,可以使用URL.createObjectURL()方法实现,该方法能返回给定对象的URL,用在<a>标签的href属性上就可以创建可下载的文件链接。

血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息

在JavaScript文件中存储敏感数据,不仅是一种错误的实践方式,而且还是一种非常危险的行为,长期以来大家都知道这一点。

在js文件中引入另一个js文件的实现方法总汇

比如我写了一个JS文件,这个文件需要调用另外一个JS文件,该如何实现呢?这篇文章主要介绍:在js文件中引入另一个js文件的实现

使用HTML5来实现本地文件读取和写入

最近有这样一个需求,就是在HTML页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。

lock文件_我们为什么需要 lock 文件

从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件,以及它的一些成本与风险,当然其中一些观点对于后端也是适用的

什么是断点续传?前端如何实现文件的断点续传

什么是断点续传?就是下载文件时,不必重头开始下载,而是从指定的位置继续下载,这样的功能就叫做断点续传。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。

form表单文件上传_multipart/form-data文件上传

form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式.。application/x-www-form-urlencoded:默认编码方式,multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件,text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。

使用HttpClient发送文件流到服务器端

适用场景: 网络绝对路径的URL文件或图片,不存储到本地,转换成stream,直接使用HTTPClient传送到SpringBoot的服务端,将文件存储下来,并返回一个文件地址。目前分层架构的系统越来越多这种需求,所以记录下来以备不时之需。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!