Young Kbt blog Young Kbt blog
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)

Shp Liu

朝圣的使徒,正在走向编程的至高殿堂!
首页
  • java基础

    • Java基础
    • Java集合
    • Java反射
    • JavaJUC
    • JavaJVM
  • Java容器

    • JavaWeb
  • Java版本新特性

    • Java新特性
  • SQL 数据库

    • MySQL
    • Oracle
  • NoSQL 数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • ActiveMQ
    • RabbitMQ
    • RocketMQ
    • Kafka
  • 进阶服务

    • Nginx
  • Spring
  • Spring Boot
  • Spring Security
  • 设计模式
  • 算法
  • 知识
  • 管理

    • Maven
    • Git
  • 部署

    • Linux
    • Docker
    • Jenkins
    • Kubernetes
  • 进阶

    • TypeScript
  • 框架

    • React
    • Vue2
    • Vue3
  • 轮子工具
  • 项目工程
  • 友情链接
  • 本站

    • 分类
    • 标签
    • 归档
  • 我的

    • 收藏
    • 关于
    • Vue2-Admin (opens new window)
    • Vue3-Admin(完善) (opens new window)
GitHub (opens new window)
  • 超文本标记语言 - Html

  • 解释编程语言 - JavaScript

  • JS 超集语言 - TypeScript

    • TypeScript - 介绍
    • TypeScript - 安装和使用
    • TypeScript - 基本类型
    • TypeScript - 编译和配置
    • TypeScript - 文件打包
    • TypeScript - 接口
    • TypeScript - 函数
    • TypeScript - 类
    • TypeScript - 泛型
    • TypeScript - 类型推断
    • TypeScript - 高级类型
    • TypeScript Office - 入门
    • TypeScript Office - 常用类型
    • TypeScript Office - 类型缩小
    • TypeScript Office - 更多函数
    • TypeScript Office - 对象类型
    • TypeScript Office - 类型操纵
    • TypeScript Office - 类
    • TypeScript Office - 模块
    • TypeScript Office - 变量声明
    • TypeScript Office - 类型推断
    • TypeScript Office - 枚举
    • TypeScript Office - 公共类型
    • TypeScript Office - Symbols
    • TypeScript Office - 类型兼容性
    • TypeScript Office - 迭代器和生成器
    • TypeScript Office - 装饰器
    • TypeScript Office - JSX
    • TypeScript Office - 混入
    • TypeScript Office - 三斜线指令
    • TypeScript Office - 模块进阶
    • TypeScript Office - 模块解析
    • TypeScript Office - 命名空间
    • TypeScript Office - 命名空间与模块
      • 命名空间与模块
      • 使用模块
      • 使用命名空间
      • 命名空间和模块的陷阱
      • 不必要的命名方式
      • 模块的权衡
    • TypeScript Office - 声明合并
  • 界面构建框架 - React

  • 渐进式框架 - Vue2

  • 渐进式框架 - Vue3

  • 前端
  • JS 超集语言 - TypeScript
Young Kbt
2022-09-16
目录

TypeScript Office - 命名空间与模块

  • 命名空间与模块
  • 使用模块
  • 使用命名空间
  • 命名空间和模块的陷阱
  • 不必要的命名方式
  • 模块的权衡

# 命名空间与模块

这篇文章概述了在 TypeScript 中使用模块和命名空间来组织你的代码的各种方法。我们还将讨论一些关于如何使用命名空间和模块的高级话题,并解决在 TypeScript 中使用它们时的一些常见陷阱。

关于ES模块的更多信息,请参见 Modules 文档 (opens new window)。更多关于 TypeScript 命名空间的信息,请参见 Namespaces 文档 (opens new window)。

注意:在非常老的 TypeScript 版本中,命名空间被称为「内部模块」,这比 JavaScript 模块系统要早。

# 使用模块

模块可以包含代码和声明。

模块也依赖于模块加载器(如 CommonJs/Require.js)或支持 ES 模块的运行时间。模块提供了更好的代码重用,更强的隔离性和更好的捆绑工具支持。

同样值得注意的是,对于 Node.js 应用程序,模块是默认的,我们在现代代码中推荐模块而不是命名空间。

从 ECMAScript 2015 开始,模块是语言的原生部分,所有兼容的引擎实现都应该支持。因此,对于新项目,模块将是推荐的代码组织机制。

# 使用命名空间

命名空间是一种 TypeScript 特有的组织代码的方式。

命名空间是全局命名空间中简单命名的 JavaScript 对象。这使得命名空间的使用非常简单。与模块不同,它们可以跨越多个文件,并且可以使用 outFile 串联。命名空间可以成为 Web 应用程序中结构化代码的一个好方法,所有的依赖关系都包含在 HTML 页面的

就像所有的全局命名空间污染一样,可能很难识别组件的依赖关系,特别是在一个大型应用程序中。

# 命名空间和模块的陷阱

在本节中,我们将介绍使用命名空间和模块的各种常见陷阱,以及如何避免这些陷阱。

/// <reference> 为模块命名

一个常见的错误是试图使用 /// 语法来引用一个模块文件,而不是使用 import 语句。为了理解这种区别,我们首先需要理解编译器是如何根据 import 的路径(例如,在 import x from "..."; 中的 ...,import x = require("..."); 等等)路径来定位模块的类型信息。

编译器将尝试找到一个 .ts,.tsx,然后是一个具有适当路径的 .d.ts。如果找不到一个特定的文件,那么编译器将寻找一个环境模块声明。回顾一下,这些需要在 .d.ts 文件中声明。

  • myModules.d.ts
// 在一个.d.ts文件或不是模块的.ts文件中
declare module "SomeModule" {
    export function fn(): string;
}
1
2
3
4
  • myOtherModule.ts
/// <reference path="myModules.d.ts" />
import * as m from "SomeModule";
1
2

这里的引用标签允许我们找到包含环境模块声明的声明文件。几个 TypeScript 样本使用的 node.d.ts 文件就是这样被消耗的。

# 不必要的命名方式

如果你要把一个程序从命名空间转换为模块,很容易就会出现一个看起来像这样的文件:

  • shapes.ts
export namespace Shapes {
    export class Triangle {
        /* ... */
    }
    export class Square {
        /* ... */
    }
}
1
2
3
4
5
6
7
8

这里的顶层命名空间 Shapes 毫无理由地将 Triangle 和 Square 包裹起来。这让你的模块的使用者感到困惑和厌烦。

  • shapeConsumer.ts
import * as shapes from "./shapes";
let t = new shapes.Shapes.Triangle(); // shapes.Shapes?
1
2

TypeScript 中模块的一个关键特征是,两个不同的模块永远不会将名字贡献给同一个范围。因为模块的消费者决定给它分配什么名字,所以不需要主动将导出的符号包裹在一个命名空间中。

重申一下为什么你不应该尝试对模块内容进行命名空间,命名空间的一般想法是提供结构体的逻辑分组,并防止名称碰撞。因为模块文件本身已经是一个逻辑分组,它的顶层名称由导入它的代码定义,所以没有必要为导出的对象使用一个额外的模块层。

下面是一个修改后的例子:

  • shapes.ts
export class Triangle {
    /* ... */
}
export class Square {
    /* ... */
}
1
2
3
4
5
6
  • shapeConsumer.ts
import * as shapes from "./shapes";
let t = new shapes.Triangle();
1
2

# 模块的权衡

就像 JS 文件和模块之间有一对一的对应关系一样,TypeScript 在模块源文件和其发射的 JS 文件之间有一对一的对应关系。这样做的一个影响是,根据你的目标模块系统,不可能串联多个模块源文件。例如,你不能在针对 commonjs 或 umd 时使用 outFile 选项,但在 TypeScript 1.8 及更高版本中,在针对 amd 或 system 时可以使用 outFile 。

编辑此页 (opens new window)
#TypeScript
更新时间: 2023/09/18, 16:34:13
TypeScript Office - 命名空间
TypeScript Office - 声明合并

← TypeScript Office - 命名空间 TypeScript Office - 声明合并→

最近更新
01
技术随笔 - Element Plus 修改包名 原创
11-02
02
Reactor - 扩展性
11-02
03
Reactor - 最佳实践
11-02
更多文章>
Theme by Vdoing | Copyright © 2021-2024 Young Kbt | blog
桂ICP备2021009994号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式