美文网首页
学习TypeScript 声明文件

学习TypeScript 声明文件

作者: 薥劃 | 来源:发表于2021-06-15 08:20 被阅读0次

    无法使用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>
    

    相关文章

      网友评论

          本文标题:学习TypeScript 声明文件

          本文链接:https://www.haomeiwen.com/subject/jroiqltx.html