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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

问题情景

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

<!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开发人员方便使用。

<!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开发人员使用。