TS声明文件--TS中使用原JS代码
声明文件
在开发中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。
为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了
- 类似C语言的头文件
- 类似C#语言的dll文件 等等
- 声明文档 语法需满足TypeScript
声明文件参考文档：
https://www.tslang.cn/docs/handbook/declaration-files/introduction.html
TS中引入 声明文件 格式
// TS 2.0 之前通过此方式
/// <reference path = " runoob.d.ts" />
//TS 2.0 之后采用import引入声明文件
import {} from ''
案例
1、原来JS使用方式
Calcu.js
//计算器 JS代码逻辑，HTML页面会调用
function Calculae() {
this.result=0;
this.And=function (p1,p2) {
this.result=p1+p2;
console.log('计算'+p1+'+'+p2+'='+this.result);
}
this.Multi=function (p1,p2) {
this.result=p1*p2;
console.log('计算'+p1+'*'+p2+'='+this.result);
}
}
在HTML中使用
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>TypeScript Test</title>
</head>
<body>
<div id="box">
<button onclick="addFunc()">计算</button>
</div>
<script src="js/Calcu.js" type="text/javascript"></script>
<script type="text/javascript">
function addFunc() {
var cal=new Calculae();
cal.And(2,3);
alert(cal.result);
}
</script>
</body>
</html>
2、没有声明文件时，在TS中使用
没有声明文件时，TS报错，编译时，类型检查错误
页面上其实可以正常调用，TS特性就体现不了了
index.ts
// 使用TypeScript完成统计计算服务
class Stastic {
constructor(){
}
//统计结果保存
save():void{
let num1=10;
let num2=5;
//统计完成后，需要用到原来旧JS模块的方法，如何在TypeScript中调用？
//由于Calculae TypeScript不认这个对象，在TS编译时，无法使用TypeScript 诸如类型检查等特性功能
let calcu=new Calculae();
calcu.And(num1,num2);
console.log(`TS 统计结果为：${calcu.result}`);
}
}
//绑定按钮事件，事件中调用原来JS逻辑
document.getElementById('btnCalcu').onclick=function () {
let s=new Stastic();
s.save();
};
index.html 中使用
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>TypeScript Test</title>
</head>
<body>
<div id="box">
<button id="btnCalcu">计算</button>
</div>
<script src="js/Calcu.js" type="text/javascript"></script>
<script src="disc/index.js" type="text/javascript" > </script>
</body>
</html>
3、在TypeScript里面添加声明
声明信息只会在TS编译时，做类型检查
声明信息或引用的声明信息，在TS编译后会被删除
如下使用声明信息时，TS编译不会提示错误，并且页面正常运行
//定义Calcu.js函数的声明，TS编译时会进行类型检查；TS编译后，声明的信息都会被删除
declare class Calculae {
result:number;
And(p1:number,p2:number):void;
}
class Stastic {
constructor(){
}
//统计结果保存
save():void{
let num1=10;
let num2=5;
let calcu=new Calculae();
calcu.And(num1,num2);
console.log(`TS 统计结果为：${calcu.result}`);
}
}
//绑定按钮事件，事件中调用原来JS逻辑
document.getElementById('btnCalcu').onclick=function () {
let s=new Stastic();
s.save();
};
关于声明文件更多高质量声明查看链接
https://www.tslang.cn/docs/handbook/declaration-files/by-example.html