Typescript多文件使用命名空间

工作中

项目代码过多时，我们不能将所有代码放在同一个文件中，所以我们可以对这些代码进行拆分成多个文件。对于同一个命名空间声明我们也可以进行拆分。这些同名的命名空间声明通过ts会合并在一起，使用​​namespace​​进行命名。下面案例合并后会存在​​str​​和​​Peo​​以及​​num​​这三个导出声明。

namespace Demo {
    export function str(x: any) {
        return typeof x === 'string'
    }
    export interface Peo {
        age: number;
        heig: number;
    }
}

namespace Demo {
    export function num(x: any) {
        return typeof x === 'number'
    }
}

依赖

当我们将拆分的文件进行加载时，需要注意的是如果一个依赖中引用了另一个依赖，那么我们需要注意文件的加载顺序，如果引用的时候，没有加载出另一个依赖，那么就会产生错误。下面案例中因为下面一个文件引用了num方法，所以我们需要先加载出num方法，再执行不会出现错误，不然就会产生num未定义的错误。

namespace Tea {
    export function num(x: any) {
        return typeof x === 'number'
    }
}

namespace Tea {
    const y = num(111)
}

定义依赖的方式

tsconfig.json

在​​tsconfig.json​​中我们可以通过​​files​​来配置文件的加载顺序，如果x文件比y文件被加载出来，我们可以如下配置。如果想要指定编译后输出的文件名，我们可以使用​​outFile​​进行配置。当我们配置之后，编译后会被合并到​​main.js​​文件中。

"files": ["x.ts", "y.ts"]

三斜线指令

三斜线执行使用方法如下案例，如果想要其他文件执行前加载这个文件，可以将下面这个写在文件前面。当我们在文件中使用了三斜指令后，编译器会自动识别出来依赖加载的优先级。而且我们即使在​​tsconfig.json​​中配置了files，也不会影响编译器识别正确的加载顺序。我们在files中还可以省略​​x.ts​​，只需要将​​y.ts​​写在配置中就行。这样编译器也可以将依赖的文件编译出来。

/// <reference path="x.ts" />