TS声明文件
- 一、声明文件的使用
- 一）、声明的定义与使用在同一文件中
- 二）、声明的定义与使用不放在同一文件
- 二、声明文件的安装：
- 1. 全局库：
- 2. cmd md【可以通过require、import导入】：
- 3. 常用的第三方库，
- 4. 注意点：对于3中的常用库，他人写了声明文件的可以安装声明文件进行调用，对于没有写的需要使用1、2中的声明模板自己编写。
- 使用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中的声明模板自己编写。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
