阅读 1849
规避2个TS中命名空间和模块的陷阱

规避2个TS中命名空间和模块的陷阱

「这是我参与11月更文挑战的第19天,活动详情查看:2021最后一次更文挑战

前言

在前面文章中,我们介绍了如何在TS里使用命名空间,来组织你的代码,大概格式是:namespace X {};而且我们解决了一个遗留问题:当单个文件过大,根据需求分离到不同的文件中;最后使用import q = x.y.z的形式来简化命名空间

相关传送门:

本文将描述常见的命名空间和模块的使用陷阱以及如何去避免它们

正文

在讲规避TS中命名空间和模块的陷阱之前,要简单说清楚这里的命名空间和模块

借用之前文章的一句话:

为了与ECMAScript 2015里的术语保持一致,从TypeScript 1.5开始,“外部模块”称为“模块”,而“内部模块”称做“命名空间”

下面来看常见的2个错误

对模块使用/// <reference>

一个常见的错误是使用/// <reference>引用模块文件,应该使用import

要理解他们之间的区别,我们的搞清楚编译器是如何根据import路径定位模块的类型信息

官方是这么说的:

编译器首先尝试去查找相应路径下的.ts.tsx再或者.d.ts。 如果这些文件都找不到,编译器会查找 外部模块声明

例如:

  • myModules.d.ts文件中
// In a .d.ts file or .ts file that is not a module:
declare module "SomeModule" {
    export function fn(): string;
}
复制代码

然后在其他模块文件中引用标签指定外来模块的位置

/// <reference path="myModules.d.ts" />
import * as m from "SomeModule";
复制代码

不必要的命名空间

TS中,不同的模块永远也不会在相同的作用域内使用相同的名字。 因为使用模块的人会为它们命名,所以完全没有必要把导出的符号包裹在一个命名空间里

使用命名空间是为了提供逻辑分组和避免命名冲突,不应该对模块使用命名空间

END

以上就是本文的所有内容,如有问题,欢迎指正~

文章分类
前端