首页 > 其他分享 >TypeScript 模块

TypeScript 模块

时间:2023-02-27 15:12:23浏览次数:30  
标签:function exports TypeScript Triangle require 模块 Circle

TypeScript 模块

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 文件代码:

/// <reference path = "IShape.ts" /> export interface IShape { draw(); }

Circle.ts 文件代码:

import shape = require("./IShape"); export class Circle implements shape.IShape { public draw() { console.log("Cirlce is drawn (external module)"); } }

Triangle.ts 文件代码:

import shape = require("./IShape"); export class Triangle implements shape.IShape { public draw() { console.log("Triangle is drawn (external module)"); } }

TestShape.ts 文件代码:

import shape = require("./IShape"); import circle = require("./Circle"); import triangle = require("./Triangle"); function drawAllShapes(shapeToDraw: shape.IShape) { shapeToDraw.draw(); } drawAllShapes(new circle.Circle()); drawAllShapes(new triangle.Triangle());

使用 tsc 命令编译以上代码(AMD):

tsc --module amd TestShape.ts 

得到以下 JavaScript 代码:

IShape.js 文件代码:

define(["require", "exports"], function (require, exports) { });

Circle.js 文件代码:

define(["require", "exports"], function (require, exports) { var Circle = (function () { function Circle() { } Circle.prototype.draw = function () { console.log("Cirlce is drawn (external module)"); }; return Circle; })(); exports.Circle = Circle; });

Triangle.js 文件代码:

define(["require", "exports"], function (require, exports) { var Triangle = (function () { function Triangle() { } Triangle.prototype.draw = function () { console.log("Triangle is drawn (external module)"); }; return Triangle; })(); exports.Triangle = Triangle; });

TestShape.js 文件代码:

define(["require", "exports", "./Circle", "./Triangle"], function (require, exports, circle, triangle) { function drawAllShapes(shapeToDraw) { shapeToDraw.draw(); } drawAllShapes(new circle.Circle()); drawAllShapes(new triangle.Triangle()); });

使用 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)

标签:function,exports,TypeScript,Triangle,require,模块,Circle
From: https://www.cnblogs.com/chenchuang/p/17159756.html

相关文章

  • TypeScript 命名空间
    TypeScript命名空间命名空间一个最明确的目的就是解决重名问题。假设这样一种情况,当一个班上有两个名叫小明的学生时,为了明确区分它们,我们在使用名字之外,不得不使用一些......
  • TypeScript 声明文件
    TypeScript声明文件TypeScript作为JavaScript的超集,在开发过程中不可避免要引用其他第三方的JavaScript的库。虽然通过直接引用可以调用库的类和方法,但是却无法使用......
  • Python安装zlib模块
    去http://www.zlib.net/下载最新版本的zlib源码文件安装zlib:tarxzvfzlib-1.2.13.tar.gzcdzlib-1.2.13./configuremake&&makeinstallzlib安装完后,libz.a在/usr......
  • webpack模块化的原理
    commonjs在webpack中既可以书写commonjs模块也可以书写es模块,而且不用考虑浏览器的兼容性问题,我们来分析一下原理。首先搞清楚commonjs模块化的处理方式,简单配置一下webp......
  • ansible模块说明
    file模块文件的相关操作,新增,删除https://www.cnblogs.com/keerya/p/8040071.htmlping模块检测联通行https://www.cnblogs.com/keerya/p/8040071.htmlcommand模块......
  • loguru日志模块使用
    loguru日志模块使用  相比于logging模块,loguru模块使用起来更方便,并且可以根据不同日志级别,进行不同颜色输出一、安装pipinstallloguru二、基本使用代码......
  • 模块化规范
    一、参考资料:1、介绍模块化发展的历程(opensnewwindow)2、各模块化规范思维导图相关问题1、模块化的作用抽取公共代码、隔离作用域、依赖管理2、模块化历史无模块......
  • 推荐 7 个学习 TypeScript 的宝库,2021 学 TS 看这篇就够了!
    前言猫哥是一个常年混迹在GitHub上的猫星人,所以发现了不少好的前端开源项目、常用技巧,在此分享给大家。公众号:前端GitHub,专注于挖掘GitHub上优秀的前端开源项目,并以......
  • TypeScript 基础语法
    TypeScript基础语法TypeScript程序由以下几个部分组成:模块函数变量语句和表达式注释第一个TypeScript程序我们可以使用以下TypeScript程序来输出"HelloW......
  • TypeScript 基础类型
    TypeScript基础类型TypeScript包含的数据类型如下表:数据类型关键字描述任意类型any声明为any的变量可以赋予任意类型的值。数字类型number双精度64位......