前言
一、类型声明的作用？
- 1.1 declare 关键字
- 1.2 示例
二、常见的几种类型声明
- 2.1 普通类型声明
- 2.2 外部枚举
- 2.3 命名空间
三、类型声明文件
- 3.1 模拟类型声明文件，以 jquery 为例
- 3.2 使用手动实现的jquery.d.ts声明文件
- 3.3 第三方声明文件（以jquery为例）
- 3.4 npm声明文件可能存在的位置
补充知识点
总结

前言

在日常开发中几乎所有的项目都会应用许多第三方库来完成任务需求。
这些第三方库不管是否是用 TS 编写的，最终都要编译成 JS 代码，才能发布给开发者使用。
我们知道是 TS 提供了类型，才有了代码提示和类型保护等机制。
但在项目开发中使用第三方库时，你会发现它们几乎都有相应的 TS 类型，这些类型都是通过类型声明文件完成的。

一、类型声明的作用？

用来为已存在的 JS 库提供类型信息。
声明文件可以让我们不需要将JS重构为TS，只需要加上声明文件就可以使用系统。
在 TS 项目中使用第三方库时，就像在用 TS 一样，都会有代码提示、类型保护等机制，极大的提高了开发效率，降低了心智负担。
类型声明在编译的时候都会被删除，不会影响真正的代码。

1.1 declare 关键字

关键字 declare 表示声明的意思，我们可以用它来做出各种声明
declare 是给编译器读取用的，可以暂时不调用

1.2 示例

declare var // 声明全局变量
declare function // 声明全局方法
declare class // 声明全局类
declare enum // 声明全局枚举类型
declare namespace // 声明（含有子属性的）全局对象
interface 和 type // 声明全局类型

二、常见的几种类型声明

2.1 普通类型声明

declare let age: number;
declare function getAge(): number | string;
declare class Person { };

使用普通类型声明

console.log(age);
getAge();
new Person()

2.2 外部枚举

declare enum Seasons {Spring,Summer,Autumn,Winter
}

使用枚举 Seasons

let seasons = [Seasons.Spring,Seasons.Summer,Seasons.Autumn,Seasons.Winter
]

2.3 命名空间

如果一个全局变量有很多子属性，就可以使用namespace
声明文件里的namespace表示一个全局变量，包含很多个子属性
在命名空间内部不需要再使用declare

// 模拟 jQuery 的 $
declare namespace $ {function ajax(url: string, method: string, data: object): void;let userName: string;namespace getName {function onClick(): void;}
}

使用 $

$.ajax('/login', 'post', {});
$.userName;
$.getName.onClick();

三、类型声明文件

一般来说会将类型声明文件放在单独的文件中，通过观察声明文件来进行库的使用
文件名一般约定以 xxx.d.ts 结尾

3.1 模拟类型声明文件，以 jquery 为例

新建一个 typings 文件夹
新建一个 jquery.d.ts 声明文件

// jquery.d.ts 中示例代码如下
declare const $:(selector: string) => {click(): void;dbClick(): void;width(length: number): void;height(length: number): void;
}

3.2 使用手动实现的jquery.d.ts声明文件

在tsconfig.json配置文件中增加include属性

"include": [
//   补充：此处采用glob模式，* 表示匹配任意字符，不包括路径分隔符；** 表示匹配任意字符，也包括路径分隔符
//   此处的 step1  step2  typings 表示自己需要使用此声明文件的目录"step1/**/*","step2/**/*","typings/**/*"
]

在自己的代码中就可以使用这个声明文件了

$('#button').click();
$('#button').dbClick();
$('#button').width(200);
$('#button').height(200);

3.3 第三方声明文件（以jquery为例）

安装jquery包

npm install jquery -s

下图就是jquery的声明文件所在位置
导入jquery

import * as jQuery from 'jquery'
// 注意：
// 此处需要采用上面这种导入方式
// 因为 typeScript\node_modules\@types\jquery\index.d.ts 这个文件下采用了export = jQuery的写法;
// export = jQuery; 这是一种TS的语法，表示要导出jQuery
// 支持es6导出，也支持 common.js导出// 如果要用es6的导入
// import jQuery from 'jquery'
// 那么需要在tsconfig.json文件中将 "esModuleInterop": true 开启// 注意此处会报错，找不到声明文件
// 需要执行下面这行命令，安装jquery的声明文件
npm i --save-dev @types/jquery

使用jquery

jQuery.ajax(); // 此处可以调用

3.4 npm声明文件可能存在的位置

node_modules/jquery/package.json
- “types”: “types/xxx.d.ts”
node_modules/jquery/index.d.ts
node_modules/@types/jquery/index.d.ts
typings/jquery/index.d.ts

补充知识点

三斜杠语法：来源于C#写法，表示引用的意思，引用其他文件。更多可搜索ts三斜杠语法

/// <reference types="sizzle" />
/// <reference path="JQueryStatic.d.ts" />
/// <reference path="JQuery.d.ts" />
/// <reference path="misc.d.ts" />
/// <reference path="legacy.d.ts" />

总结

本文主要介绍了ts中的类型声明，下次再见。

TypeScript详解十六：类型声明（declare）相关推荐

element布局容器大小_Flutter完整开发实战详解(十六、详解自定义布局实战)
本篇将解析 Flutter 中自定义布局的原理,并带你深入实战自定义布局的流程,利用两种自定义布局的实现方式,完成如下图所示的界面效果,看完这一篇你将可以更轻松的对 Flutter 为所欲为. 文章汇 ...
linux 命令详解十六
十七. xargs命令: 该命令的主要功能是从输入中构建和执行shell命令. 在使用find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给e ...
数字音频总线A2B开发详解十六（A2B-一主一从：ADAU1701作为全新Slave板的DSP）
作者的话继续A2B的开发,我做了一块以ADAU1701为DSP的Slave板,这颗DSP可以做2进4出,也就是说,输入这块,这个Slave不仅能播Master过来的音乐,还可以自己进2路输入,输出则 ...
IgH详解十六、双主站
IgH支持双主站,只需要在配置文件中,配置双主站的MAC地址即可. 启动主站后,可以看到两个主站. IgH分别创建了EtherCAT0和EtherCAT1两个设备,分别对应双主站. 根据主站个数初始化 ...
元宇宙技术普及读本重磅问世详解十大技术把脉数字经济前瞻产业布局
转自元宇宙共识圈王恩东.倪光南.沈昌祥.郑纬民--四位中国工程院院士联袂力荐倪健中.姚前.李正茂.朱嘉明.肖风.敖然等权威专家一致推荐汇聚元宇宙技术专家及产业一线佼佼者倾力撰写元宇宙技术普及 ...
shell脚本详解（六）——数组简介和排序算法
shell脚本详解(六)--数组简介和排序算法一.数组 1.数组的定义方法 ①.方式一: ②.方式二: ③.方式三: ④.方式四: 2.数组包括的数据类型 3.获取数组长度 4.获取数据列表 5.读 ...
mybatis 鉴别其_MyBatis之Mapper XML 文件详解(四)-JDBC 类型和嵌套查询
MyBatis之Mapper XML 文件详解(四)-JDBC 类型和嵌套查询白玉 IT哈哈支持的 JDBC 类型为了未来的参考,MyBatis 通过包含的 jdbcType 枚举型,支持下面的 ...
ts类型声明declare
类型声明declare 1.概览 1.1 declare是什么前提:假如现在有一门用Typescript写的库,想供其他开发人员使用,有两种方式方式1 打包ts源文件(供ts用户使用)和编译后的j ...
python中byte类型_详解python string类型 bytes类型 bytearray类型
搜索热词一.python3对文本和二进制数据做了区分.文本是Unicode编码,str类型,用于显示.二进制类型是bytes类型,用于存储和传输.bytes是byte的序列,而str是unicode ...

TypeScript详解十六：类型声明（declare）

目录

前言

一、类型声明的作用？

1.1 declare 关键字

1.2 示例

二、常见的几种类型声明

2.1 普通类型声明

2.2 外部枚举

2.3 命名空间

三、类型声明文件

3.1 模拟类型声明文件，以 jquery 为例

3.2 使用手动实现的jquery.d.ts声明文件

3.3 第三方声明文件（以jquery为例）

3.4 npm声明文件可能存在的位置

补充知识点

总结

TypeScript详解十六：类型声明（declare）相关推荐

最新文章

热门文章