TypeScript 学习笔记(三):模块系统与命名空间

1. 引言

在前两篇学习笔记中,我们介绍了 TypeScript 的基础知识和高级类型系统。本篇将重点讲解 TypeScript 的模块系统与命名空间,帮助你理解如何组织代码、管理依赖以及与 JavaScript 互操作。

2. 模块系统

TypeScript 支持两种模块系统:ES 模块(ESM)和 CommonJS 模块。现代 TypeScript 项目通常使用 ES 模块,因其与 ES6+ 标准兼容且具有更好的支持和优化。

2.1 ES 模块

ES 模块使用 import 和 export 语法进行模块的导入和导出。

导出

有两种方式导出模块成员:命名导出和默认导出。

// 导出接口和函数
export interface Person {name: string;age: number;
}export function greet(person: Person): string {return `Hello, ${person.name}`;
}// 默认导出类
export default class Employee {constructor(public name: string, public age: number) {}
}
导入

导入时,可以使用命名导入或默认导入。

// 命名导入
import { Person, greet } from './module';// 默认导入
import Employee from './module';// 使用导入的模块成员
const person: Person = { name: "John", age: 30 };
console.log(greet(person));const employee = new Employee("Jane", 28);
console.log(employee.name);
2.2 CommonJS 模块

CommonJS 模块使用 require 和 module.exports 语法。这种模块系统通常用于 Node.js 环境。

// 导出
const person = {name: "John",age: 30
};function greet(person) {return `Hello, ${person.name}`;
}module.exports = { person, greet };// 导入
const { person, greet } = require('./module');console.log(greet(person));

3. 命名空间

命名空间用于组织代码,避免全局作用域污染。在大型应用程序中,命名空间可以帮助你管理代码的结构和依赖。

3.1 定义命名空间

使用 namespace 关键字定义命名空间,并在其中声明变量、函数或类。

namespace Utility {export function log(message: string) {console.log(message);}export function error(message: string) {console.error(message);}
}// 使用命名空间
Utility.log("This is a log message");
Utility.error("This is an error message");
3.2 命名空间嵌套

命名空间可以嵌套使用,以便更好地组织代码。

namespace App {export namespace Models {export class Person {constructor(public name: string, public age: number) {}}}export namespace Services {export class PersonService {static getPerson(): Models.Person {return new Models.Person("John", 30);}}}
}// 使用嵌套命名空间
const person = App.Services.PersonService.getPerson();
console.log(person.name);
3.3 外部命名空间

使用外部命名空间来组织和导入第三方库。

/// <reference path="jquery.d.ts" />namespace MyApp {export class Page {constructor() {$('button').click(() => {alert('Button clicked');});}}
}// 使用外部命名空间
const page = new MyApp.Page();

4. 模块与命名空间的区别

模块和命名空间都有助于组织代码,但它们有不同的用例和特点:

  • 模块:用于拆分代码,并在不同文件之间共享。每个文件就是一个模块。模块是基于文件系统的,更适合大型项目。
  • 命名空间:用于在单个文件或全局范围内组织代码,避免全局作用域污染。适合较小项目或某些特定场景。

5. 与 JavaScript 互操作

TypeScript 与 JavaScript 可以无缝互操作。你可以在 TypeScript 中使用现有的 JavaScript 库,也可以将 TypeScript 编译为 JavaScript 代码运行在任何支持 JavaScript 的环境中。

5.1 使用 JavaScript 库

使用 @types 包为常见的 JavaScript 库提供类型定义,从而在 TypeScript 中享受类型检查和代码补全。

npm install --save lodash
npm install --save-dev @types/lodash
import * as _ from 'lodash';const numbers = [1, 2, 3, 4];
const doubled = _.map(numbers, n => n * 2);
console.log(doubled);
5.2 编译 TypeScript 为 JavaScript

使用 TypeScript 编译器 tsc 将 TypeScript 代码编译为 JavaScript 代码。

tsc src/index.ts

6. 总结

在本篇学习笔记中,我们探讨了 TypeScript 的模块系统与命名空间,了解了如何使用 ES 模块和 CommonJS 模块,如何定义和使用命名空间,以及如何与 JavaScript 互操作。通过掌握这些知识,你可以更好地组织和管理 TypeScript 项目。

下一篇学习笔记将介绍 TypeScript 中的装饰器与高级编程技巧,帮助你在实际项目中应用 TypeScript 的强大功能。希望你能继续关注本系列的学习笔记,进一步提升 TypeScript 编程技能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14805.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Debezium+Kafka:Oracle 11g 数据实时同步至 DolphinDB 解决方案

随着越来越多用户使用 DolphinDB&#xff0c;各式各样的应用场景对 DolphinDB 的数据接入提出了不同的要求。部分用户需要将 Oracle 11g 的数据实时同步到 DolphinDB 中来&#xff0c;以满足在 DolphinDB 中实时使用数据的需求。本篇教程将介绍使用 Debezium 来实时捕获和发布 …

npm介绍、常用命令详解以及什么是全局目录

目录 npm介绍、常用命令详解以及什么是全局目录一、介绍npm的主要功能npm仓库npm的配置npm的版本控制 二、命令1. npm init: 初始化一个新的Node.js项目&#xff0c;创建package.json文件。package.json是一个描述项目信息和依赖关系的文件。2. npm install <package_name&g…

LeetCode算法题:42. 接雨水(Java)

题目描述 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面是由数组 [0,1,0,2,1,0,1,3…

基于vue3速学angular

因为工作原因&#xff0c;需要接手新的项目&#xff0c;新的项目是angular框架的&#xff0c;自学下和vue3的区别&#xff0c;写篇博客记录下&#xff1a; 参考&#xff1a;https://zhuanlan.zhihu.com/p/546843290?utm_id0 1.结构上&#xff1a; vue3:一个vue文件&#xff…

python:pycharm虚拟解释器报错环境位置目录为空

目录 解释器分控制台解释器 和 pycharm解释器 控制台解释器切换&#xff1a; pycharm解释器 解释器分控制台解释器 和 pycharm解释器 控制台解释器切换&#xff1a; 切换到解释器下 激活解释器 查看解释器 where python 激活成功 这时在控制台使用python xxx.py 可以…

卷积神经网络和误差反向传播如何一起工作

用更简单的方式来理解卷积神经网络&#xff08;CNN&#xff09;和误差反向传播法&#xff08;一种梯度下降的应用方式&#xff09;是如何一起工作的&#xff0c;这次我们用一个找宝藏的游戏来比喻&#xff1a; 游戏背景&#xff1a;寻宝图的秘密 想象你有一张藏宝图&#xff…

​​​【收录 Hello 算法】10.1 二分查找

目录 10.1 二分查找 10.1.1 区间表示方法 10.1.2 优点与局限性 10.1 二分查找 二分查找&#xff08;binary search&#xff09;是一种基于分治策略的高效搜索算法。它利用数据的有序性&#xff0c;每轮缩小一半搜索范围&#xff0c;直至找到目标元素或搜索区间为空…

C++中的类型转换

文章目录 C中的四种类型转换static_castreinterpret_castconst_castdynamic_cast RTTI C中的四种类型转换 C语言中已经存在类型转换了&#xff0c;为什么C还要提出自己风格的类型转换&#xff1f; C风格的转换格式很简单&#xff0c;但是有不少缺点的&#xff1a; 转换的可视…

​​​【收录 Hello 算法】第 10 章 搜索

目录 第 10 章 搜索 本章内容 第 10 章 搜索 搜索是一场未知的冒险&#xff0c;我们或许需要走遍神秘空间的每个角落&#xff0c;又或许可以快速锁定目标。 在这场寻觅之旅中&#xff0c;每一次探索都可能得到一个未曾料想的答案。 本章内容 10.1 二分查找10.2 二…

【如何检查 ONNX 模型是否正确?】onnx.checker.check_model 用法详解

以下是对 onnx.checker.check_model 函数文档的翻译&#xff1a; onnx.checker.check_model 检查模型的一致性&#xff0c;即模型在结构、格式和配置方面的正确性和完整性。 如果模型的 ir_version 设置不正确或高于检查器的 ir_version&#xff0c;或者模型在 metadata_pro…

Java序列化解密:技巧、陷阱与最佳实践

1. 概述Java序列化的概念与应用场景 1.1 序列化简介 在Java中&#xff0c;序列化机制允许我们将一个对象状态转换为一串字节序列&#xff0c;并可在稍后再将这串字节序列恢复为对象。这一特性极大地方便了对象的持久化处理与网络传输。 1.2 为何需要序列化 序列化主要用于两…

恶劣天候激光雷达点云模拟方法论文整理

恶劣天候点云模拟方法论文整理 模拟雨天点云&#xff1a;【AAAI2024】模拟雪天点云&#xff1a;【CVPR 2022 oral】模拟雾天点云&#xff1a;【ICCV2021】模拟点云恶劣天候的散射现象&#xff1a;【Arxiv 2021】模拟积水地面的水花飞溅点云&#xff1a;【RAL2022】 模拟雨天点云…

C#面:如何在.Net(C# )中如何取消一个窗体的关闭

可以通过重写窗体的Closing事件来取消窗体的关闭 private void Form1_Closing(object sender, CancelEventArgs e) {// 取消窗体的关闭e.Cancel true; } 在窗体的构造函数中&#xff0c;可以将Closing事件与上述方法进行关联&#xff1a; public Form1() {InitializeCompon…

蓝桥杯Web开发【模拟题三】15届

1.创意广告牌 在"绮幻山谷"的历史和"梦幻海湾"的繁华交汇之处&#xff0c;一块创意广告牌傲然矗立。它以木质纹理的背景勾勒出古朴氛围&#xff0c;上方倾斜的牌子写着"绮幻山谷的风吹到了梦幻海湾"&#xff0c;瞬间串联了过去与现在&#xff0…

EPIC免费领取《骑士精神2》 IGN9分神作骑士精神2限时免费领

EPIC免费领取《骑士精神2》 IGN9分神作骑士精神2限时免费领 最近Epic一直为玩家们送出各种游戏&#xff0c;从《龙腾世纪审判》到《模拟农场22》&#xff0c;而就在今天&#xff0c;epic又为玩家们送出了IGN评分9分高分的骑士精神2.这款游戏&#xff0c;该游戏是一款由Tripwir…

软考之信息系统管理:数据结构和算法

数据结构和算法 数据结构&#xff1a;数据的特性和数据之间存在的关系&#xff1b; 数据结构常用名词和术语&#xff1a; 数据是人们利用文字&#xff0c;数字等符号对现实世界的事物及其活动所做的描述数据元素简称元素&#xff0c;是数据的基本单位&#xff0c;通常作为一个整…

考研408操作系统篇-操作系统的基本概念1

操作系统的基本概念 操作系统的目标与应用环境有关。 在查询系统中人机交互性&#xff1b;应用于工业控制、武器控制以及多媒体环境下的OS&#xff0c;要求其具有实时性&#xff1b; 对于微机上的配置的OS&#xff0c;则更看重的是其使用的方便性 操作系统的目标 方便性&…

阿赵UE引擎C++编程学习笔记——常用容器TArray、TMap和TSet

大家好&#xff0c;我是阿赵   这次来熟悉一下UE引擎在写C时的一些特定的容器。 主要有三种&#xff0c;分别是TArray、TMap和TSet 一、 TArray TArray是标准的数组&#xff0c;通过下标来访问内容。数组里面的元素是可以重复的。   以下是TArray的一些用法举例&#xff1…

vue连接mqtt实现收发消息组件超级详细

基本概念&#xff1a; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种基于发布/订阅模式的轻量级消息传输协议&#xff0c;专为低带宽、高延迟或不稳定的网络环境设计。以下是MQTT实现收发消息的基本原理&#xff1a; 客户端-服务器模型&#xff1a…

快速排序详解——多种实现方式

快速排序 快速排序是一种交换排序&#xff0c;是基于二叉树结构的交换排序方法&#xff0c;基本思想如下&#xff1a; 任取待排序元素序列中的某元素作为基准值&#xff0c;按照该排序码将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&#xff0c;右子…