zoukankan      html  css  js  c++  java
  • [TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)

    [TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)

    问题情景

    开发人员使用Visual Studio来开发TypeScript,可以很方便快速的将项目里的所有TypeScript档案(.ts),一口气全部编译成为JavaScript档案(.js),用以提供html网页使用。但是当软件项目越来越庞大的时候,过多的.js档引用,会增加开发.html档案时的负担;并且每个.js档之间的相依关系,也很容易因为引用顺序的错误,而造成不可预期的问题。

    问题情景01

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
    
        <!--Validation-->
        <script type="text/javascript" src="Validation/Validation.js"></script>
        <script type="text/javascript" src="Validation/LettersOnlyValidator.js"></script>
        <script type="text/javascript" src="Validation/ZipCodeValidator.js"></script>
    
    </head>
    <body>
    </body>
    </html>
    

    解决方案:建置输出单一JavaScript档案(.js)

    为了解决多个.js档引用所造成的问题,Visual Studio在TypeScript建置设定页面,提供了「Combine JavaScript output into file」 这个建置输出设定。开发人员只要勾选这个设定,后续在项目通过编译时,Visual Studio就会自动将项目里生成的所有.js内容,合并成为单一.js档来输出,让其他HTML开发人员方便使用。

    解决方01

    解决方02

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <link rel="stylesheet" href="app.css" type="text/css" />
    
        <!--Validation-->
        <script type="text/javascript" src="validationLibrary.js"></script>
    
    </head>
    <body>
    </body>
    </html>
    

    解决方案:建置输出单一Declaration档案(.d.ts)

    勾选了「Combine JavaScript output into file」 这个建置输出设定后,开发人员就可以将项目里的.ts输出成为单一.js档,提供给其他开发人员使用。这时如果其他开发人员期望能用TypeScript语法来进行后续开发,我们除了直接提供.ts源文件这个选项之外,也可以选择提供项目输出的单一.js档、加上对应的Declaration档案(.d.ts)这样的方式,来提供给其他开发人员使用。

    在Visual Studio里要建立项目输出的.d.ts档,开发人员可以在TypeScript建置设定页面中,勾选「Generate declaration files」这个建置输出设定。后续在项目通过编译时,Visual Studio就会自动为项目里输出的.js档、建立对应的.d.ts档,方便开发人员提供给其他TypeScript开发人员使用。

    解决方03

    解决方04

  • 相关阅读:
    查询
    常用代码块模板,get,load区别,session.get(,)参数解释,session方法总结
    hibernate.cfg.xml配置文件
    request,session,application,三者比较
    maven 环境搭建
    selenium环境搭建
    makedown使用语法
    selenium浏览器操作
    selenium元素操作
    Selenium 元素定位
  • 原文地址:https://www.cnblogs.com/clark159/p/4568866.html
Copyright © 2011-2022 走看看