TypeScript入门九:TypeScript的模块
- 关于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模块降级的相关博客:
当然还有一些打包工具集成的相关降级工具的应用,这些已经与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的模块的更多相关文章
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
- TypeScript入门实例
前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...
- TypeScript入门一:配置TS工作环境
配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...
- [译] TypeScript入门指南(JavaScript的超集)
你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父 ...
- TypeScript入门(三)面向对象特性
一.类(Class) 类是ts的核心,使用ts开发时,大部分代码都是写在类里面. 1.类的声明 多个对象有相同的属性和方法,但是状态不同. 声明类的属性和方法时可以加 访问控制符,作用是:类的属性和方 ...
- [转载]TypeScript 入门指南
之前有听过,但未使用过,而最近在用nodejs,angularjs做一些前端项目,想到了这个来,正是学习TypeScript的时候,看介绍貌似和coffeescript相似,也JavaScript的转 ...
- typescript 入门
为什么要使用typescript? 出现拼写错误,可以立即指出错误. 出现模块引入错误,立即指出错误. 出现函数.变量类型错误,立即指出错误. 在react组件中制定好了基本的props和state之 ...
- TypeScript 入门指南
你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...
- 写给自己的TypeScript 入门小纲
前几日,在知乎上写了一些技术类的文章,有人私信问我,是不是要找一份工作,有没有想过要跳槽,然后我回到,你们公司都是用的什么框架什么技术,他罗列了一堆,其中就包含了TypeScript,我甚至不知道有这 ...
随机推荐
- PorterDuffXfermode之Mode.SRC_IN
package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...
- ISO/IEC 9899:2011 条款6.3.1——算术操作数
6.3.1 算术操作数 6.3.1.1 布尔.字符以及整数 1.每个整数类型具有一个整数转换等级,如下定义: ——两个带符号的整数类型都不应该具有相同等级,即使它们具有相同的表示. ——一个带符号整数 ...
- 002-创建型-04-建造者模式(Builder)、JDK1.7源码中的建造者模式、Spring中的建造者模式
一.概述 建造者模式的定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 工厂类模式提供的是创建单个类的模式,而建造者模式则是将各种产品集中起来进行管理,用来创建复合对象 ...
- 【Leetcode_easy】784. Letter Case Permutation
problem 784. Letter Case Permutation 参考 1. Leetcode_easy_784. Letter Case Permutation; 2. Grandyang; ...
- eNSP——配置NAT
原理: 实验案例: 拓扑图: 实验编址: 1.基本配置 根据实验编址进行基本配置,并测试连通性. 2.配置静态NAT 公司在网关路由器R1上配置访问外网的默认路由. 需要在网关路由器R1上配置NAT地 ...
- Python: 对于DataFrame.loc传入列表和传入元组输出区别的理解
def test(): import pandas as pd tuples = [ ('cobra', 'mark i'), ('cobra', 'mark ii'), ('sidewinder', ...
- BS
- vim入门一 常用指令
以下为自己常用的vim指令总结 一.插入命令 a 在光标所在字符后进入插入模式 A 调到光标所在行行尾进入插入模式 i 在光标所在字符前插入模式 I 调到光标所在行行首进入插入模式 o 调到光标所在上 ...
- VS2010 MFC的按钮风格改变
改变VS2010 MFC的按钮风格 VS2010建的MFC工程按钮默认的风格类似VC6.0(直角矩形),如想美观按钮改为WIN7的按钮风格(圆角矩形),只需在代码中找到头文件"stdafx. ...
- Python 【文件的读写】
文件读写 A 读取文件 读文件三步:开——读——关.file1 = open('/Users/Ted/Desktop/test/abc.txt','r',encoding='utf-8')第一个参数是 ...