TypeScript学习(十七):模块解析 | 八月更文挑战

193 阅读2分钟

这是我参与8月更文挑战的第3天,活动详情查看:8月更文挑战

TS 1.5 开始内部模块用命名空间表示,外部模块用 module 表示。

使用场景

以文件为例:一份文件就可以看作是一个模块

当文件内的代码越来越多的时候,我们希望能够有某种组织标准可以追踪类型并且不用担心命名冲突。可以通过将对象包含在一个命名空间中( 非全局命名空间 )来解决这个问题。

index.ts

namesapce validator{
    class Val{}
}

在文件内部中可以通过 validator.Val 访问对象。如果需要在文件外部访问的话,需要加上 export 关键字。

文件分割

应用体积膨胀的时候,更应该打散代码到各个文件中以便于维护。

多文件命名空间

当文件分割之后,每个文件都创立了相同的命名空间,并且这些文件中的命名空间需要互相连接、访问。行为上,就如同之前在同一份文件中一样。因此,需要添加引用标记。

index1.ts

namespace NS{
    class Val1{}
}

index2.ts

/// <reference path="index1.ts"/>
namespace NS{
    class Val2{}
}

impl.ts

/// <reference path="index1.ts">
/// <reference path="index2.ts">

let val1 = new NS.Val1()

一旦涉及到多文件,我们必须确保每份文件的的代码都被编译。有两种方法可以确保:

--outFile

方法一:使用 --outFile 将所有文件编译到一份文件中。编译器会自动按顺序将引用的文件编译完毕。

tsc --outFile sample.js impl.ts

方法二:

当然,也可以使用如下命令手动进行,最终会得到多份文件。

tsc --outFile sample.js index1.ts index2.ts impl.ts

因为得到了多份编译后的文件,在使用的时候需要使用

<script src="index1.js" type="text/javascript" /><script src="index2.js" type="text/javascript" /><script src="impl.js" type="text/javascript" />

别名

可以使用 import = A.B.C 为 命名空间 创建别名。注意与import = require("xxx")的区别。

namespace Shapes{
    export namespace Polynes{
        class Square()
    }
}

import polynes = Shapes.Polynes

const square = new polynes.Square() // Same as 'new Shapes.Polygons.Square()'

注意不要使用 require 关键字。

Ambient Namespaces

D3 定义了全局对象 d3。因为使用 d3 的时候是通过

declare namespace D3{
    export interface Selectors{}
    export interface Event{
        x: number
    }
    export interface Base extends Selector(){
        event: Event
    }
}

declare var d3: D3.base