说说对 TypeScript 中命名空间与模块的理解？区别？

<h3>一、模块</h3><code>TypeScript</code> 与<code>ECMAScript</code> 2015 一样，任何包含顶级 <code>import</code> 或者 <code>export</code> 的文件都被当成一个模块相反地，如果一个文件不带有顶级的<code>import</code>或者<code>export</code>声明，那么它的内容被视为全局可见的例如我们在在一个 <code>TypeScript</code> 工程下建立一个文件 <code>1.ts</code>，声明一个变量<code>a</code>，如下：<pre><code class="language-ts">const a = 1</code></pre>然后在另一个文件同样声明一个变量<code>a</code>，这时候会出现错误信息<img src="https://static.ecool.fun//article/e164e76f-b731-4419-9e47-0098a9f00350.png" alt="" data-href="" style=""/>提示重复声明<code>a</code>变量，但是所处的空间是全局的如果需要解决这个问题，则通过<code>import</code>或者<code>export</code>引入模块系统即可，如下：<pre><code class="language-ts">const a = 10;

export default a</code></pre>在<code>typescript</code>中，<code>export</code>关键字可以导出变量或者类型，用法与<code>es6</code>模块一致，如下：<pre><code class="language-ts">export const a = 1
export type Person = {
 name: String
}</code></pre>通过<code>import</code> 引入模块，如下：<pre><code class="language-ts">import { a, Person } from './export';</code></pre><h3>二、命名空间</h3>命名空间一个最明确的目的就是解决重名问题命名空间定义了标识符的可见范围，一个标识符可在多个名字空间中定义，它在不同名字空间中的含义是互不相干的这样，在一个新的名字空间中可定义任何标识符，它们不会与任何已有的标识符发生冲突，因为已有的定义都处于其他名字空间中<code>TypeScript</code> 中命名空间使用 <code>namespace</code> 来定义，语法格式如下：<pre><code class="language-ts">namespace SomeNameSpaceName {
 export interface ISomeInterfaceName { }
 export class SomeClassName { }
}</code></pre>以上定义了一个命名空间 <code>SomeNameSpaceName</code>，如果我们需要在外部可以调用 <code>SomeNameSpaceName</code> 中的类和接口，则需要在类和接口添加 <code>export</code> 关键字使用方式如下：<pre><code class="language-ts">SomeNameSpaceName.SomeClassName</code></pre>命名空间本质上是一个对象，作用是将一系列相关的全局变量组织到一个对象的属性，如下：<pre><code class="language-ts">namespace Letter {
 export let a = 1;
 export let b = 2;
 export let c = 3;
 // ...
 export let z = 26;
}</code></pre>编译成<code>js</code>如下：<pre><code class="language-js">var Letter;
(function (Letter) {
 Letter.a = 1;
 Letter.b = 2;
 Letter.c = 3;
 // ...
 Letter.z = 26;
})(Letter || (Letter = {}));</code></pre><h3>三、区别</h3><ul><li>命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象，使用起来十分容易。但就像其它的全局命名空间污染一样，它很难去识别组件之间的依赖关系，尤其是在大型的应用中</li><li>像命名空间一样，模块可以包含代码和声明。 不同的是模块可以声明它的依赖</li><li>在正常的TS项目开发过程中并不建议用命名空间，但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间，主要作用是给编译器编写代码的时候参考使用</li></ul>

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识