TypeScript中的模块是什么?

news/2024/9/25 15:25:40/

TypeScript中的模块是什么?

    • 1. 模块的基本概念
      • 1.1 使用模块
    • 2. 默认导出 vs 命名导出
      • 2.1 默认导出
      • 2.2 命名导出
    • 3. 模块的作用域
    • 4. 模块的声明与引用

  在现代软件开发中,模块化是构建大型、可维护应用程序的关键概念。TypeScript,作为JavaScript的一个超集,引入了静态类型系统和对ES6模块的原生支持,使得在大型项目中管理复杂性变得更加容易。在

1. 模块的基本概念

  在TypeScript中,模块是一种封装代码的方式,允许你将功能分割成独立、可重用的单元。每个模块可以包含变量、函数、类等,并且可以控制对这些实体的访问权限。

javascript">// myModule.ts
export function greet(name: string): string {return `Hello, ${name}!`;
}export const pi: number = 3.14;

  在这个例子中,我们创建了一个名为myModule.ts的模块,它导出了greet函数和pi常量。

1.1 使用模块

javascript">// app.ts
import { greet, pi } from './myModule';console.log(greet('TypeScript')); // 输出: Hello, TypeScript!
console.log(pi); // 输出: 3.14

  在app.ts中,我们通过import语句从myModule中导入了greet函数和pi常量,并使用它们。

2. 默认导出 vs 命名导出

  TypeScript支持两种导出方式:默认导出和命名导出。

2.1 默认导出

  默认导出允许你从一个模块中导出一个单一的主要实体。

javascript">// defaultExport.ts
export default class Calculator {add(x: number, y: number): number {return x + y;}
}

  使用默认导出时,导入时不需要使用大括号:

javascript">// app.ts
import calculator from './defaultExport';const result = calculator.add(1, 2);
console.log(result); // 输出: 3

2.2 命名导出

  命名导出允许你从模块中导出多个实体,并且每个实体都有一个唯一的名称。

javascript">// namedExport.ts
export function square(x: number): number {return x * x;
}export class Circle {constructor(public radius: number) {}getArea(): number {return Math.PI * this.radius * this.radius;}
}

  使用命名导出时,导入时需要使用大括号:

javascript">// app.ts
import { square, Circle } from './namedExport';const area = square(5);
const circle = new Circle(10);
console.log(area); // 输出: 25
console.log(circle.getArea()); // 输出: 314 (approximately)

3. 模块的作用域

  模块内部定义的变量和函数默认是局部的,对其他模块是不可见的。这有助于避免命名冲突,并提高代码的封装性。

javascript">// utils.ts
let counter = 0;export function increment(): number {return ++counter;
}

  在这个模块中,counter变量是局部的,只能在utils.ts内部访问和修改。

4. 模块的声明与引用

  在TypeScript中,你可以通过声明模块来引用其他模块。这允许TypeScript编译器检查类型错误。

javascript">// myModule.ts
export class Animal {name: string;constructor(theName: string) {this.name = theName;}greet() {return `Hello, my name is ${this.name}!`;}
}// app.ts
import { Animal } from './myModule';let animal = new Animal('Goat');
console.log(animal.greet()); // 输出: Hello, my name is Goat!

  在这个例子中,我们声明了对myModule的引用,并导入了Animal类。


http://www.ppmy.cn/news/1427342.html

相关文章

Matlab|【复现】主动配电网故障定位方法研究

目录 1 主要内容 算例模型 期望故障电流状态函数 评价函数(膨胀率函数) 算例验证方法 详实的文档说明 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序方法复现了《基于改进多元宇宙算法的主动配电网故障定位方法研究》_郑聪,建…

【GitBlit】Windows搭建Git服务器详细教程

前言 如果公司或个人想在 Windows 环境下搭建私有的 Git 服务器,那么这个开源的 GitBlit 是一个不错的选择。 Gitblit 是一个开源纯 Java 的用于管理、查看和服务 Git 存储库。它是一个小型的托管集中式存储库工具。支持 SSH、HTTP 和 GIT 协议,开箱即…

【Redis】Hash数据类型

文章目录 常用命令hset & hgethexists & hdelhkeys & hvals & hgetallhlen & hmgethsetnxhincrby & hincrbyfloat 内部编码 Hash 相比于 string 而言可以节省很多个 key ,一个 key 里面又可以包含了多个 key-value 常用命令 hset & hg…

设计模式:状态模式示例

状态模式可以应用于多种场景,下面是一些示例及其代码实现: 1. 交通信号灯 交通信号灯(红灯、绿灯、黄灯)根据当前状态切换到下一个状态。 // 状态接口 interface TrafficLightState {void change(TrafficLight trafficLight); …

20240417,友元 FRIEND

本来要学习的吃瓜吃了一下午 目录 3.1 全局函数做友元 3.2 友元类 3.3 成员函数做友元 三&#xff0c;友元 3.1 全局函数做友元 #include<iostream> using namespace std; class Building {friend void goodGay(Building* building);//好朋友&#xff0c;可以访问…

将本地项目推送至gitlab仓库

1. gitlab上新建一个空白项目 gitlab上点击new project按钮&#xff0c;新建一个项目 新建空白项目 项目名称与本地新建项目名称相同&#xff0c;其余根据具体需要选择 2. 初始化本地仓库并commit项目 进入本地项目根目录下&#xff0c;右击 git bash here打开命令窗口 初始化…

C语言第六章之内存分布,内存管理

内存分布 C代码编译过程 预处理 宏定义展开、头文件展开、条件编译&#xff0c;这里并不会检查语法 编译 检查语法&#xff0c;将预处理后文件编译生成汇编文件 汇编 将汇编文件生成目标文件(二进制文件) 链接 将目标文件链接为可执行程序 进程的内存分布 程序运行起来(…

Ubuntu22.04下opencv4.9.0环境的搭建

目录 1、更新系统包列表:2、安装依赖项:3、下载 OpenCV 源代码:4、编译和安装 OpenCV:5、配置环境变量:6、测试1、更新系统包列表: 在终端中执行以下命令,以确保系统包列表是最新的: sudo apt update2、安装依赖项: 安装构建 OpenCV 所需的依赖项: sudo apt inst…