客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
TypeScript 模块的设计理念是可以更换的组织代码。 模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。 类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。 两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。 模块使用模块加载器去导入其它的模块。 在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。 此外还有有 SystemJs 和 Webpack。 一、模块的导入导出模块导出使用关键字 export 关键字，语法格式如下： // 文件名 : SomeInterface.ts export interface SomeInterface { // 代码部分 } 要在另外一个文件使用该模块就需要使用 import 关键字来导入: import someInterfaceRef = require("./SomeInterface"); 实例IShape.ts 文件代码： export namespace shape {
export interface IShape {
draw(): any;
}
}Circle.ts 文件代码： import { shape } from './IShape';
export class Circle implements shape.IShape {
public draw() {
console.log("Cirlce is drawn (external module)");
}
}TestShape.ts 文件代码： import { shape } from './IShape';
import { Circle as circle } from './Circle';
export function drawAllShapes(shapeToDraw: shape.IShape) {
shapeToDraw.draw();
}
drawAllShapes(new circle());使用 tsc 命令编译以上代码（Commonjs）： tsc --module commonjs TestShape.ts 得到以下 JavaScript 代码： Circle.js 文件代码： var Circle = (function () { function Circle() { } Circle.prototype.draw = function () { console.log("Cirlce is drawn"); }; return Circle; })(); exports.Circle = Circle; Triangle.js 文件代码： var Triangle = (function () { function Triangle() { } Triangle.prototype.draw = function () { console.log("Triangle is drawn (external module)"); }; return Triangle; })(); exports.Triangle = Triangle; TestShape.js 文件代码： var circle = require("./Circle"); var triangle = require("./Triangle"); function drawAllShapes(shapeToDraw) { shapeToDraw.draw(); } drawAllShapes(new circle.Circle()); drawAllShapes(new triangle.Triangle()); 输出结果为： Cirlce is drawn (external module) Triangle is drawn (external module) 二、默认导出每个模块都可以有一个
JQuery.d.ts declare let $: JQuery; export default $; App.ts import $ from "JQuery";
$("button.continue").html( "Next Step..." );1、类和函数声明可以直接被标记为默认导出。 标记为默认导出的类和函数的名字是可以省略的。ZipCodeValidator.ts export default class ZipCodeValidator { static numberRegexp = /^[0-9]+$/; isAcceptable(s: string) { return s.length === 5 && ZipCodeValidator.numberRegexp.test(s); } } Test.ts import validator from "./ZipCodeValidator"; let myValidator = new validator(); 或者 StaticZipCodeValidator.ts const numberRegexp = /^[0-9]+$/; export default function (s: string) { return s.length === 5 && numberRegexp.test(s); } Test.ts import validate from "./StaticZipCodeValidator"; let strings = ["Hello", "98052", "101"]; // Use function validate strings.forEach(s => { console.log(`"${s}" ${validate(s) ? " matches" : " does not match"}`); });
|
请发表评论