TS学习 TS 模块-ts6

最新推荐文章于 2024-08-08 19:36:20 发布

思-路

最新推荐文章于 2024-08-08 19:36:20 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： TS TypeScript

本文链接：https://blog.youkuaiyun.com/jinlong59421/article/details/96338457

TypeScript 同时被 2 个专栏收录

6 篇文章

订阅专栏

5 篇文章

订阅专栏

本文深入讲解了TypeScript模块的设计理念及其实现方式。模块提供了一种组织代码的方法，通过使用import和export，可以将不同模块间的数据进行隔离或共享。文章还介绍了如何使用这些关键字在多个文件中导入和导出接口、类等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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）：