TypeScript 带来的最大年夜好处就是静态类型检查，所以在大年夜 JavaScript 转向 TypeScript 之前，必定要熟悉到添加类型定义会带来额外的工作量，这是须要的价值。不过，相对于静态类型检查带来的好处，这些价值是值得的。当然，TypeScript 许可不定义类型或者将所有类型定义为 any，但如不雅如许做，TypeScript 带来的大年夜部分静态检成功能都邑掉去感化，换言之，也就没须要应用 TypeScript 了。
模块化
在转换之前还要留意的一个问题就是模块化。早期的 JavaScript 代码根本上是每个 HTML 页面对应一个或几个 JavaScript 脚本，那时刻的 JavaScript 代码中很少有模块化的概念。不过跟着 Web 2.0 的鼓起，大年夜量的工作大年夜后端移到前端，JavaScript 法度榜样变得越来越复杂，模块化成为刚需，大年夜量的模块化框架随之而来，个中比较有名的有 RequestJS 及其带来的 AMD 标准，还有 SeaJS 带来的 CMD 标准。而跟着 Node.js 的鼓起以及 JavaScript 的全栈化，又有了 CommonJS 标准。之后又出现了广为应用的 SystemJS。当然少不了 ES6 的模块化标准，固然到今朝为止 Node.js 和大年夜部分浏览器都还不支撑它。
TypeScript 本身支撑两种模块化方法，一种是对 ES6 的模块的渺小扩大，另一种是在 ES6 宣布之前本身模仿 C# 的定名空间。大年夜部分应用敕令空间的场景都可以应用 ES6 模块化标准来代替。我们先来看一看两种模块化方法差别。
定名空间
【编辑推荐】
- JavaScript缺点处理和客栈追踪浅析
- JavaScript深刻之大年夜原型到原型链
- 实用于仪表盘项目标7个优良JavaScript库
- JavaScript即将来：介绍14个JavaScript的框架和库
- 在Node.js中看JavaScript的引用
应用敕令空间写的 TS 脚本在转译成 JS 后，可以不应用任何模块加载框架，直接在页面中加载即可应用。不过很遗憾，这种方法转义出来的 JS 法度榜样不克不及直接在 Node.js 中应用。因为 tsc 不为会定名空间情势的模块生成 modules.exports 对象以及 require 语句。
有一种情况例外。将所有 .ts 文件转译成一个 .js，假设叫 all.js，那么它可以经由过程 node all 来运行。这种情况下不须要任何模块的导入导出。
不过在浏览器情况中，严格的按照依附次序惹人生成的 .js 文件是可行的。早期没有应用模块化的 JS 文件就可以应用“定名空间”情势的模块化写法，甚至可以将本来成百上千行的大年夜型 JS 源文件，拆分成若干小的 TS 文件，再经由过程 tsc --outfile 输出单一 JS 文件来应用，如许既能实现模块化重构，又能不改变原有的 HTML(或其它动态页面文件)的代码。
还有一点须要留意的是，在指定生成单一输出文件的情况下，TypeScript 不会经由过程代码逻辑去检查模块间的依附关系。默认情况下它会按文件名的字母序逐个转译 .ts 文件，除非源文件中经由过程 /// <reference path="..." /> 明白指定了依附项。
在 TypeScript 应用 ES6 模块语法来实现模块化的情况下，tsc 许可经由过程 module 参数来指定生成的 .js 会应用于何种模块化框架，默认的是 commonjs，其它比较常用的还有 amd、system 等。
显然，如不雅本来的 JS 法度榜样应用了 AMD 框架，在转换成 TS 的时刻，就可以应用 ES6 模块写法，并经由过程 tsc --module amd 来输出对应的 JS 文件，同样不须要修改本来的页面文件。
然则，如不雅本来的 JS 文件没有应用任何模块框架的情况下，转换为采取 ES6 模块写法的 TS 代码，在构建的时刻就会麻烦一点。这种情况下即使构建成单一输出文件，仍然会须要模块化框架的支撑，比如须要 AMD 的 define 和 require，或者须要 System 的 API 支撑。
为了避免惹人模块化框架，可以推敲以 commonjs 标准输出 JS，然后经由过程 Webpack 来把所有生成的 JS 打包成单一文件。这里既然用到了 Webpack，构建设备就可以更灵活了，因为 Webpack 可以指定多个 entry，可以有多个输出，它会经由过程 import ... 转译成的 require(...) 主动检查依附项。并且 Webpack 还可以应用 ts-loader 直接处理 .ts 文件而不须要先应用 tsc 来进行转译。如不雅在 TS 顶用到了高版本 ECMAScript 语法，比如 async/await，还可以经由过程 babel-loader 来增长一层处理……异常灵活。
但这里往往会有一个问题，生成的 .js 中所有定义都不在全局范围，那么脚本惹人网页之后，若何应用个中定义的内容?这须要借助全局对象 window——这里不须要推敲 Node.js 的全局对象 global，因为在 Node.js 下一般是采取模块化的方法惹人，不须要向全局对象注入什么器械。
向 window 注入对象(或函数、值等)的办法也很简单，分两步：申明、赋值，比如：
- import MyApi from "./myapi";
- declare global {
- interface Window {
- mime: MyApi;
- }
- }
- window.mime = new MyApi();
常用的构建设备
我们早期项目中应用 TypeScript 的定名空间，不过比来几乎都重构成 ES6 模块方法了。因为会用到 async 函数，所以一般会设备 TypeScript 输出 ES2017 代码，再经由过程 Babel 转译成 ES5 代码，最后由 Webpack 打包输出。
推荐阅读
Gradle for Android第一篇( 从Gradle和AS开始 )
正如大年夜家所见，这是本英文书，而因为国内的gradle翻译材料不全，所以特次开辟专栏，翻译gradle for android这本书，同时添加本身的心得领会以及在实际工作上的拭魅战，欲望大年夜家可>>>详细阅读
本文标题：从JavaScript到TypeScript - 模块化和构建
地址：http://www.17bianji.com/lsqh/34688.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示