• 关于TypeScript模块的基本使用方法

Ts的模块化语法与ES6的语法基本是一致(关于一些细节特性没有测试,请各自自行测试),然后再由tsconfig.json的module字段来描述转码类型,具体转码类型:

 "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */

Tsc就会根据module设置的模块转码类型自动转码,我们知道模块在浏览器的支持并不时很好,如果需要用到网页中还需要进一步根据模块类型降级,之前我已经有Nodejs的Commonjs规范的模块降级和ES6模块降级的相关博客:

js模块化入门与commonjs解析与应用

ES6入门十二:Module(模块化)

当然还有一些打包工具集成的相关降级工具的应用,这些已经与Ts无关,可以参考我的一些相关博客。

这里我们就来看看Ts转码Commonjs和ES6模块的一个示例代码:

 //a.ts
export const PI = 3.14;
export namespace MyMathA{ //使用多重命名空间
export const strA = "This is namespace a.";
}
//inde.ts
import {PI,MyMathA} from './a';
console.log(PI);
console.log(MyMathA.strA);

先来看Commonjs模块模式转码后的代码:("module":"commonjs")

 //a.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//a.ts
exports.PI = 3.14;
var MyMathA;
(function (MyMathA) {
MyMathA.strA = "This is namespace a.";
})(MyMathA = exports.MyMathA || (exports.MyMathA = {})); //inde.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var a_1 = require("./a");
console.log(a_1.PI);
console.log(a_1.MyMathA.strA);

然后再来看看ES6模块模式转码后的代码:("module":"es2015")

 //a.js
export var PI = 3.14;
export var MyMathA;
(function (MyMathA) {
MyMathA.strA = "This is namespace a.";
})(MyMathA || (MyMathA = {})); //inde.js
import {PI,MyMathA} from './a';
console.log(PI);
console.log(MyMathA.strA);

TypeScript入门九:TypeScript的模块的更多相关文章

  1. TypeScript入门指南(JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

  2. TypeScript入门实例

    前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...

  3. TypeScript入门一:配置TS工作环境

    配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...

  4. [译] TypeScript入门指南(JavaScript的超集)

    你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父 ...

  5. TypeScript入门(三)面向对象特性

    一.类(Class) 类是ts的核心,使用ts开发时,大部分代码都是写在类里面. 1.类的声明 多个对象有相同的属性和方法,但是状态不同. 声明类的属性和方法时可以加 访问控制符,作用是:类的属性和方 ...

  6. [转载]TypeScript 入门指南

    之前有听过,但未使用过,而最近在用nodejs,angularjs做一些前端项目,想到了这个来,正是学习TypeScript的时候,看介绍貌似和coffeescript相似,也JavaScript的转 ...

  7. typescript 入门

    为什么要使用typescript? 出现拼写错误,可以立即指出错误. 出现模块引入错误,立即指出错误. 出现函数.变量类型错误,立即指出错误. 在react组件中制定好了基本的props和state之 ...

  8. TypeScript 入门指南

    你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...

  9. 写给自己的TypeScript 入门小纲

    前几日,在知乎上写了一些技术类的文章,有人私信问我,是不是要找一份工作,有没有想过要跳槽,然后我回到,你们公司都是用的什么框架什么技术,他罗列了一堆,其中就包含了TypeScript,我甚至不知道有这 ...

随机推荐

  1. Windows 操作系统 端口转发

    在Windows 下可以使用netsh interface portproxy 命令实现端口转发功能. 例:netsh interface portproxy add v4tov4 listenpor ...

  2. nginx conf 文件

    server { listen ; server_name local.light.com; index index.html index.htm index.php; root /home/wwwr ...

  3. Mac 高效 软件

    彻底卸载软件: cleanmymac 软件转移: AppDelete,选择一个软件归档,换台电脑从归档安装 finder类chrme标签页: XtraFinder

  4. CentOS 7中安装和配置Promethues

    Prometheus 是什么? Prometheus是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prome ...

  5. ES6-类(Class)

    ES6躬行记(20)——类 ES6正式将类(Class)的概念在语法层面标准化,今后不必再用构造函数模拟类的行为.而ES6引入的类本质上只是个语法糖(即代码更为简洁.语义更为清晰),其大部分功能(例如 ...

  6. 最新 二三四五java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.二三四五等10家互联网公司的校招Offer,因为某些自身原因最终选择了二三四五.6.7月主要是做系统复习.项目复盘.Leet ...

  7. 最新 阿里java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.阿里等10家互联网公司的校招Offer,因为某些自身原因最终选择了阿里.6.7月主要是做系统复习.项目复盘.LeetCode ...

  8. Spring 商品分类

    实体商品示例代码 package cn.maxhou.entity; import java.io.Serializable; import java.math.BigDecimal; import ...

  9. win7下exe文件设置为开机启动

    如何将自己的exe程序设置为开机自启动 如何将自己的exe程序设置为开机自启动 将自己的exe程序设置为开机自启动话不多说,直接看 首先1:cmd—>regedit 其次找到下面的路径就可以:( ...

  10. 详解MySQL 内连接、外连接、左连接、右连接

    建表语句: CREATE TABLE `a_table` ( `a_id` ) DEFAULT NULL, `a_name` ) DEFAULT NULL, `a_part` ) DEFAULT NU ...