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

  • 相关阅读:
    ES6 Syntax and Feature Overview
    Javescript——数据类型
    Javescript——变量声明的区别
    React之概述(待续)
    React之简介
    Vue.js学习之简介(待续)
    Build Telemetry for Distributed Services之OpenCensus:Tracing2(待续)
    docker之redis使用
    Build Telemetry for Distributed Services之OpenCensus:C#
    Build Telemetry for Distributed Services之Open Telemetry简介
  • 原文地址:https://www.cnblogs.com/clark159/p/4568866.html
Copyright © 2011-2022 走看看