TS声明文件

作者：Gausst松鼠会 | 2024-04-17 05:56:18

踩

ts声明文件

TS声明文件

使用ts进行开发的时候，不可避免的需要引用第三方的 JS 的库，但是默认情况下TS是不认识我们引入的这些JS库的。所以在使用这些JS库的时候, 我们就要通过声明文件告诉TS它是什么, 怎么用。

一、声明文件的使用

一）、声明的定义与使用在同一文件中

html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript核心</title>
</head>
<body>
	<div class="main"></div>
	<script src="lib/jquery-1.12.4.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

ts文件中

declare const $:(selector:string) => {
    width():number;
    height():number;
    ajax(url:string, config:{}):void
}
console.log($);
// $.ajax();
console.log($('.main').width());
console.log($('.main').height());
1
2
3
4
5
6
7
8
9

二）、声明的定义与使用不放在同一文件

ts不推荐将声明的定义和使用放在一个文件中。推荐将定义写在一个单独的文件中。

注意：默认情况下ts会查找当前项目中的所有ts文件和所有.d.ts文件【也就是说找到了声明文件】。此配置可以在tsconfig.json文件中配置include属性

案例：在ts文件中，使用外部的.js文件，需要先写.js文件的声明文件。案例如下：

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TypeScript核心</title>
</head>
<body>
<div class="main"></div>
	<script src="./lib/declareTest.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

外部的js文件：declareTest.js

// 变量
let myName = 'gege'
// 函数
function say(name, age) {
    console.log(`name is ${name}, age is ${age}`);
}
// 类
class Person {
    name = '123';
    age = 12
    constructor(name, age) {
        this.name = name;
        this.age = age
    }
    say(){
        console.log(`name is ${name}, age is ${age}`);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

ts声明文件：declareTest.d.ts【declareTest的声明文件】

declare let myName:string // 说明myName是个类型为string的变量
declare function say(name:string, age:number):void; // 声明中不能有实现
// 注意点：声明中不能出现实现，只能有声明
declare class Person {
    name: string;
    age: number;
    constructor(name:string, age:number) {};
    say():void;
}
1
2
3
4
5
6
7
8
9

ts文件：13.2、TypeScript-声明文件.ts【通过d.ts文件，使用外部的js】

import say = Validation.say;
console.log(myName);
say('gege', 18);
let p = new Person('zz', 3)
p.say()
1
2
3
4
5

二、声明文件的安装：

声明文件有很多种。

1. 全局库：

所有功能绑定到全局变量或全局对象上，参照https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html中的模板(见下方列表)，自行编写声明文件

Global .d.ts
Global-plugin .d.ts
Global: Modifying Module .d.ts

2. cmd md【可以通过require、import导入】：

参照https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html中的模板(见下方列表)，自行编写声明文件

Modules .d.ts
Module: Plugin
Module: Class
Module: Function

3. 常用的第三方库，

对于常用的第三方库，其实已经有大神帮我们编写好了对应的声明文件，所以在企业开发中，如果我们需要使用一些第三方JS库的时候，我们只需要安装别人写好的声明文件即可。

TS声明文件安装规范：@types/xxx
例如：想要安装jQuery的声明文件，那么只需要:
a. 【cmd中安装需要调用的库】：npm install jquery
b. 【引用文件（13.3、TypeScript-声明安装）中导入】import jQuery = require(‘jquery’)
c. 【cmd中安装声明文件】：install @types/jquery
d. TS文件中使用jQuery文件
```
		import jQuery = require('jquery')
		jQuery().width() // 未安装声明文件的话，jQuery中的方法不会有自动提示
1
2
```

4. 注意点：对于3中的常用库，他人写了声明文件的可以安装声明文件进行调用，对于没有写的需要使用1、2中的声明模板自己编写。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/438534