软件开发入门教程网之TypeScript 声明文件

简介: 软件开发入门教程网之TypeScript 声明文件

TypeScript 声明文件

TypeScript 作为 JavaScript 的超集,在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件,就可以借用 TypeScript 的各种特性来使用库文件了。

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

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

但是在 TypeScript 中,我们并不知道 $ 或 jQuery 是什么东西:

jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.

这时,我们需要使用 declare 关键字来定义它的类型,帮助 TypeScript 判断我们传入的参数类型对不对:

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

declare 定义的类型只会用于编译时的检查,编译结果中会被删除。

上例的编译结果是:

jQuery('#foo');

声明文件

声明文件以 .d.ts 为后缀,例如:

kxdang.d.ts

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

declare module Module_Name {
}

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

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

当然,很多流行的第三方库的声明文件不需要我们定义了,比如 jQuery 已经有人帮我们定义好了:jQuery in DefinitelyTyped

实例

以下定义一个第三方库来演示:

CalcThirdPartyJsLib.js 文件代码:

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

如果我们想在 TypeScript 中引用上面的代码,则需要设置声明文件 Calc.d.ts,代码如下:

Calc.d.ts 文件代码:

declare module Runoob { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

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

CalcTest.ts 文件代码:

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

下面这行导致编译错误,因为我们需要传入数字参数:

obj.doSum("Hello");

使用 tsc 命令来编译以上代码文件:

tsc CalcTest.ts

生成的 JavaScript 代码如下:

CalcTest.js 文件代码:

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

最后我们编写一个 kxdang.html 文件,引入 CalcTest.js 文件及第三方库 CalcThirdPartyJsLib.js:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(kxdang.com)</title>
<script src = "CalcThirdPartyJsLib.js"></script> 
<script src = "CalcTest.js"></script> 
</head>
<body>
    <h1>声明文件测试</h1>
    <p>菜鸟测试一下。</p>
</body>
</html>

浏览器打开该文件输出结果如下:

相关文章
|
JavaScript 前端开发 程序员
总结TypeScript 的一些知识点:TypeScript 声明文件
程序来输出 "Hello World" :当然,很多流行的第三方库的声明文件不需要我们定义了,比如 jQuery 已经有人帮我们定义好
总结TypeScript 的一些知识点:TypeScript 声明文件
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
435 0
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
1009 10
|
JavaScript 开发者
在软件开发中,代码规范至关重要,TypeScript 和 ESLint 是提升代码质量和团队协作效率的两大利器
在软件开发中,代码规范至关重要,TypeScript 和 ESLint 是提升代码质量和团队协作效率的两大利器。TypeScript 通过类型检查、接口定义和模块系统增强代码规范;ESLint 则专注于语法检查、风格统一和最佳实践。二者结合使用,能有效提高代码的可读性、可维护性,促进团队协作。制定合理的代码规范策略,注重团队共识、灵活性和持续优化,是确保项目成功的基石。
374 5
|
JavaScript 前端开发 IDE
TypeScript中的声明文件(.d.ts):扩展类型系统
TypeScript的`.d.ts`声明文件为JS库提供类型信息,增强IDE支持,如自动完成和类型检查。通过声明合并,可在全局作用域定义类型。示例包括为`my-library`创建声明模块,导出函数和接口。声明文件通常存于`@types`或指定`typeRoots`。用于旧JS代码的类型注解,如`myGlobalObject`。学习更多,参阅TypeScript官方文档。分享你的TS声明文件经验!
722 1
|
JavaScript 前端开发 编译器
如何编译Typescript文件?
如何编译Typescript文件?
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
278 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
|
传感器 JavaScript 前端开发
【TypeScript技术专栏】TypeScript入门教程:从JavaScript到TypeScript
【4月更文挑战第30天】TypeScript是JavaScript超集,引入类型系统和面向对象特性,助力大型应用开发。本教程引导JS开发者过渡到TS,涵盖基础类型、接口、类、函数、模块、编译运行及工具生态。TS提升开发体验,便于维护大型项目,支持最新语言特性,并有丰富工具如VS Code插件。学习TS能增强代码质量和可维护性,适应前端技术趋势。
381 0
|
JavaScript
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(上)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
254 0