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

问题情景

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

[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)的更多相关文章

  1. 【JavaScript】JS从入门到深入(复习查漏向

    [JavaScript]JS从入门到深入(复习查漏向 pre 精细得学过一遍JS后才发现,原来之前CTF中有些nodejs的题目以及一些游戏题的payload就变得很好理解了. 基础知识 ECMASc ...

  2. 建置 POSTFIX 服务器

    建置 POSTFIX 服务器 postfix 是除了 sendmail 以外 ,最被广泛采用的 Linux 邮件服务器,一般使用的观感不外乎两点: 一.安全:垃圾信过滤机制较聪明,就算什么都没设定,也 ...

  3. JavaScript(JS)简介

    历史背景介绍 (Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript ...

  4. (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  5. 响应式的账号登录界面模板完整代码,内置form表单和js控件

    响应式的账号登录界面模板,内置form表单和js控件 <!DOCTYPE html> <html lang="en"><head><met ...

  6. [ASP.NET Core] 建置x86版本 (workaround)

    前言 本篇文章介绍如何建置ASP.NET Core项目的x86版本输出(workaround),为自己留个纪录也希望能帮助到有需要的开发人员. ASP.NET Core官网 步骤 首先到微软官网的「. ...

  7. javascript – Node.js请求CERT_HAS_EXPIRED

    javascript – Node.js请求CERT_HAS_EXPIRED 转  http://www.voidcn.com/article/p-ssctwovd-bsy.html 原文   htt ...

  8. JavaScript(js)概述

    一.特点: JavaScript和java并没有直接关系,就像雷锋与雷峰塔似的没有联系: js是面向对象的,是运行在浏览器端的编程语言: 主要解决的是前端与用户的交互问题,包括交互数据. 二.js引入 ...

  9. 第十二篇 JavaScript(简称JS) 实现显示与隐藏

    JavaScript   JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...

随机推荐

  1. Android源码网站

    https://mirrors.tuna.tsinghua.edu.cn/ https://mirrors.tuna.tsinghua.edu.cn/help/AOSP/ https://mirror ...

  2. 谷歌面经 Tree Serialization

    http://www.careercup.com/question?id=4868040812396544 You should transform an structure of multiple ...

  3. Ubuntu 配置AP总结

    1.这个是使用别人写的一个GUI来配置,:http://hi.baidu.com/lexiangtaotao/item/5d4e87f22db132c70cd1c86f 2.使用hostapd配置:h ...

  4. 解决linux crontab PHP fgetcsv 读取中文数据为空问题

    公司一台服务器每天定时拉取媒体报告数据,发现每次获取的中文数据为空,发现下载下来的csv文件中文是正常的,手动再次执行一次发现是正常的 现在发现linux的默认地区是 "en_US.UTF- ...

  5. TWaver家族新成员 — Legolas工业自动化设计平台

    对于TWaver可视化家族的成员,大家比较熟悉的是我们的网络拓扑图组件和MONO Design三维建模工具.作为开发工具,这两款产品面向广大的程序猿同志,在界面可视化上为大家省时省力.但是,当项目交付 ...

  6. Java --计算百分比

    Learn From: http://blog.csdn.net/maggiehexu/article/details/6387636 方法一: public String getPercent(in ...

  7. iOS-UIScrollView-图片缩放

    一. 实现功能 两个手指捏合,可以放大或者缩小图片. 二.原理说明 1. 实现缩放功能的四个步骤 (1) 让控制器遵守代理协议 (2) 让scrollView设置代理 self (3) 调用代理方法, ...

  8. LeetCode-304. Range Sum Query 2D - Immutable

    Description: Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by ...

  9. .Net魔法堂:发个带附件的邮件

    一.前言   由于工作需要最近把邮件发送封装成WebService,现在把代码记录在此,以便日后查阅. 二.二话不说写代码 private void _SendMail(string form, st ...

  10. 使用Spark分析拉勾网招聘信息(一):准备工作

    本系列专属github地址:https://github.com/ios122/spark_lagou 前言 我觉得如果动笔,就应该努力地把要说的东西表达清楚.今后一段时间,尝试下系列博客文章.简单说 ...