介绍
什么是描述文件?在回答这个问题之前,我们先思考这样一个问题,typescript和javascript原则上并不相通,那么在typescript出来之前所有的javascript是不是都不能使用了,比如jQuery,如果不能用,那是否是在可惜,因此,为了解决这个问题,typescript出了一个描述文件,也就是我们常看到的.d.ts文件,其作用就是为了打通javascript和typescript,为javascript文件描述其缺失的类型;
下文就以jQuery为例,描述如何在typescript中使用jQuery,如果看完还不懂,请看我这锤子!!!它可不认人!!!
初始化
为了更好更直观的学习,先初始化一个项目,我们的目的是为了将jQuery和typescript混在一起
简单的话,初始化命令如下
// 初始化npm
npm init
// 初始化typescript
tsc --init
之后新建一个html文件并且在同目录下新建一个.ts文件,在html中引入jQuery的cdn,比如:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./demo.ts"></script>
</head>
<body></body>
<html></html>
</html>
或者使用Vue的脚手架新创建一个Vue3+typescript的项目,在其public下的index.html引入上方的jquery的cdn
描述文件
我们将以.d.ts为结尾的文件称作为描述文件,至于前面的文字是什么无所谓,不管是a.d.ts还是jQuery.d.ts都可以,它的作用就是为js文件描述类型;
这个涉及到第一个知识点,关键字:declare,它代表是一个声明,声明后面为定义类型的代码的类型,下面看具体分析
定义全局变量
比如,我们现在在.ts文件中编写jquery代码
;$(function() {})();
这个一个jquery时代常见的立即执行函数的方法,如果我们直接在.ts中写,它会报错,它会提示你必须去@types中安装jq的类型,错误如下:
Cannot find name ‘$’. Do you need to install type definitions for jQuery? Try
npm i @types/jquery
and then addjquery
to the types field in your tsconfig
实际上我们在types中没有jquery的类型,因此,为了使它能在.ts中正常运行,我们需要在.d.ts这个描述文件中为其做声明:
declare const $: (param: () => void) => void;
分析一下这个声明,做一个拆分,外层如下
$() // 这是一个jquery函数
对应的声明
$:()=>void
仔细看看,这个应该能理解,声明 这 是 一 个 函 数 , 并 且 它 没 有 返 回 值 , 之 后 再 看 参 数 , 这是一个函数,并且它没有返回值,之后再看参数, 这是一个函数,并且它没有返回值,之后再看参数,()里面嵌套了一个function() {},对应的声明里也要嵌套一个函数类型,很明显,function() {}是$()的参数,这个参数是一个函数,并且它也没有返回值,
// 因此在外层的声明里,添加一个参数,并为其设置函数类型且没有返回值
param: () => void
定义全局函数
就拿上面的例子
;$(function() {})();
这明显也是一个函数,我们也可以使用函数的方式做声明
declare function $(params: () => void): void;
经过上面的分析,这个应该能明白点了吧,声明了一个函数$,它没有返回值,因此是void,但它有一个参数,参数是一个函数,并且也没有返回值;
到这里,可能有熟悉jQuery的小伙伴会问,jQuery还有别的用法,比如,它可以选择某个节点,为其添加内容,代码如下
$(function() {
$("body").append("<div>oliver</div>")
});
如果是这种写法,还是会报错的,没错,这种写法还是会继续报错,原因是这种写法我们没有在.d.ts中定义,因此,为这种用法,我们要写一个类型描述
// 类型
declare function $(
params: string
): {
append: (params: string) => {};
};
这次$()的函数是一个字符串,然后它的返回值虽然不知道具体是什么,但是既然能用.append这种方式,那么至少代表它是一个对象,在js中只有对象才有.这个操作符,之后立马有一个append的方法,它有一个参数,是一个字符串;
到这里可以差不多能简单理解了吧,再来一个练习
$(function() {
$(".tc-demo-container").css("background-color", "yellow");
});
这个如何编写它的类型文件,解答如下
interface jQueryIntance {
css: (paramA: string, paramB: string) => jQueryIntance;
}
declare function $(params: string): jQueryIntance;
这次,我们把类型单独抽离出来定义成了一个接口,并且接口上有一个名为css的属性,它的值是一个函数,它有两个参数,参数的类型都是字符串,并且实际上这个函数是有返回值的,我们知道它的返回值是一个jquery对象;
Interface改写
看到上面那个练习,是不是发现了另外一种写法,描述文件是可以使用接口来定义的,
// interface改写
interface jQueryIntance {
css: (paramA: string, paramB: string) => jQueryIntance;
append: (paramA: string) => jQueryIntance;
}
declare const $: jQueryIntance;
定义全局对象
上面两种其实都是在介绍定义函数,那么对象怎么定义,还是拿jQuey举例,我们都知道,我们在使用$的时候,其实在jQuery内部会执行new $.fn.init这个方法,那么针对这个该怎么定义
// 待定义
new $.fn.init;
// 为了保证不冲突,可以使用namespace来框住
declare namespace $ {
namespace fn {
class init {}
}
}
再举一个实际项目中的例子,比如,我们写了一个类似于loadsh的工具函数util,我们挂载将其挂载到了window对象上,使用的时候会用以下的方式
util.add()
// 或者
window.util.add()
这个时候typescript就会报错,它会报window上不存在util这个东西,因此,我们需要在描述文件中对其做类型定义,我们可以这么写
declare interface Window {
util: {
add: () => void;
};
}
定义了一个Window(注意,Window是首字母大写的),它上面存在一个util的对象,这个对象上有一个add方法,这个方法没有参数,并且没有返回值;
模块化文件声明
实际上到了现代前端开发,尤其是Vue和React兴起之后,大型项目几乎都是模块化开发了,使用的语法也都是ES6的module语法,还是拿jquery举例
// 在现代框架中使用jquery
import $ from "jquery"
我想现在更多的是这种写法,如果是这种写法,然后也没有types的安装,那么在.d.ts中该如何描述,定义类型;
直接看个例子吧,代码还是上面的代码,整合一下
// 代码
import $ from "jquery"
$("body").append("<div>oliver</div>")
new $.fn.init()
对应的,在.d.ts中就应该这么写:
declare module "jquery" {
function $(params: string): {
append: (params: string) => {};
};
namespace $ {
namespace fn {
class init {}
}
}
export = $;
}
、
我们使用关键字:declare描述了一个类型,类型是modle,变量名是jquery,注意:module后面的jquery和使用时import后面的jquery是一致的,之后里面的内容和之前的基本是一样的,区别在于两点:
- 内部不需要declare这个关键字了,因为在外面描述了,里面就不需要了;
- 里面定义的东西,如果要对外使用,必须要暴露出去,暴露的方式就是export就可以了;
小结
本文主要讲述了如何使用.d.ts描述文件,它的主要作用就是弥补一些缺失的类型,使得Javascript文件也可以在Typescript中继续使用;
其主要方式就是通过关键词declare来描述各种类型,比如变量,对象,函数等等,描述完成后,Typescript可以自动的去识别.ts文件里对应的变量、函数、对象;