学习TypeScript 声明文件

无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件,就可以借用 TypeScript 的各种特性来使用库文件了。

想使用第三方库,比如 jQuery,我们通常这样获取一个 id 是 foo 的元素:

$('#foo');
// 或
jQuery('#foo');

但是在 TypeScript 中,并不知道 $ 或 jQuery :

declare var jQuery: (selector: string) => any;
jQuery('#foo');

声明文件

声明文件以 .d.ts 为后缀

xxxx.ts

声明文件或模块的语法格式:

declare module Module_Name {
}

TypeScript 引入声明文件语法格式:

/// <reference path = " lunoob.d.ts" />

var Runoob;  
(function(Runoob) {
    var Calc = (function () { 
        function Calc() { 
        } 
    })
    Calc.prototype.doSum = function (limit) {
        var sum = 0; 
 
        for (var i = 0; i <= limit; i++) { 
            sum = sum + i; 
        }
        return sum; 
    }
    Runoob.Calc = Calc; 
    return Calc; 
})(Runoob || (Runoob = {})); 
var test = new Runoob.Calc();
declare module Runoob { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

声明文件不包含实现,它只是类型声明,把声明文件加入到 TypeScript 中

/// <reference path = "Calc.d.ts" /> 
var obj = new Runoob.Calc(); 
// obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));

生成的 JavaScript 代码如下:

/// <reference path = "Calc.d.ts" /> 
var obj = new Runoob.Calc();
//obj.doSum("Hello"); // 编译错误
console.log(obj.doSum(10));

引入 CalcTest.js 文件及第三方库 CalcThirdPartyJsLib.js:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>声明文件测试(runoob.com)</title>
<script src = "CalcThirdPartyJsLib.js"></script> 
<script src = "CalcTest.js"></script> 
</head>
<body>
    <h1>声明文件测试</h1>
    <p>测试一下。</p>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。这是因为前端第三方库大多都是非...
    CondorHero阅读 10,409评论 1 5
  • 声明文件: 出现背景: TS是js的超集也是一门强类型的语言,在开发过程中难描要用到其他第三方的库。我们虽然可以通...
    机智的老刘明同志阅读 4,902评论 0 0
  • 本文摘自 https://ts.xcatliu.com/basics/declaration-files 声明文件...
    Lia代码猪崽阅读 4,655评论 0 1
  • 配置项 allowJs 是否编译 .js 文件. 如果你的项目中有自定义的 .js 文件, 并且在 .ts 文件内...
    shuaiutopia阅读 4,490评论 0 0
  • 点击原文 now我们来看一看TS怎么声明文件, 在JS里面我们经常会使用各种第三方类库,引入方式也不太相同,常见的...
    videring阅读 8,316评论 0 4

友情链接更多精彩内容