TS声明文件

最新推荐文章于 2024-05-10 23:17:23 发布

Cao_Mary

最新推荐文章于 2024-05-10 23:17:23 发布

阅读量4.2k

点赞数

分类专栏： TypeScript 文章标签： typescript 前端

本文链接：https://blog.csdn.net/Cao_Mary/article/details/122492087

版权

TypeScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

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());

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

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>

外部的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}`);
    }
}

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;
}

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. 全局库：

所有功能绑定到全局变量或全局对象上，参照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中的方法不会有自动提示
```

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

Cao_Mary

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
TS声明文件

TS声明文件一、声明文件的使用一）、声明的定义与使用在同一文件中二声明的定义与使用不放在同一文件二、声明文件的安装：使用ts进行开发的时候，不可避免的需要引用第三方的 JS 的库，但是默认情况下TS是不认识我们引入的这些JS库的。所以在使用这些JS库的时候, 我们就要通过声明文件告诉TS它是什么, 怎么用。一、声明文件的使用一）、声明的定义与使用在同一文件中html文件中<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫