ts笔记-模块

全局模块

在全局命名空间中定义的模块就是全局模块，示例：

// foo.ts
const foo = 123;

// bar.ts
const bar = foo;

以上这种方式编译是通过的，因为foo在全局命名空间中，所以其他任何文件都可以引用foo。显然这是危险行为。

文件模块

文件模块也被称为外部模块，当我们使用import/export导入导出模块时，他会在当前文件中创建一个本地作用域。

// foo.ts
const foo = 123;

export {}

// bar.ts
const bar = foo; // ERROR: "cannot find name 'foo'"

模块使用

js模块系统有多种实现方式，常见的规范有commonjs, amd, es modules，AMD它仅能在浏览器工作，esmodule目前存在浏览器兼容问题，因此更推荐使用node推出的commonjs规范。

在ts中设置module:commonjs，可以让我们像使用es modules一样使用commonjs。

// 导出一个变量或类型
const someVar = 123;
type someType = {
  type: string;
};

export { someVar, someType };

// 导入模块
import 'core-js';

// 导入一个变量或类型
import { someVar, someType } from './foo';

默认导出

// some var
export default (someVar = 123);

// some function
export default function someFunction() {}

// some class
export default class someClass {}

模块路径

import导入支持相对路径和绝对路径，相对路径比较简单不做过多解释，绝对路径的查找顺序是下面这样的：

当你使用 import * as foo from 'foo'，将会按如下顺序查找模块：

• ./node_modules/foo
• ../node_modules/foo
• ../../node_modules/foo
• 直到系统的根目录

当你使用 import * as foo from 'something/foo'，将会按照如下顺序查找内容

• ./node_modules/something/foo
• ../node_modules/something/foo
• ../../node_modules/something/foo
  直到系统的根目录

place

place解释了模块查找的方式，具体如下：

import foo from './foo'

如果place是一个文件，并且存在foo.ts，命中

如果place是一个文件夹，并且存在foo/index.ts，命中

如果place是一个文件夹，并且存在foo/package.json，并且文件中指定的types文件存在，命中

如果place是一个文件夹，并且存在package.json，并且文件中指定的main文件存在，命中

重写类型的动态查找

上面place介绍的查找方式，是可以人为修改的。我们可以定义一个global.d.ts文件，修改它的查找位置。

// global.d.ts
declare module 'foo' {
  // some variable declarations
  export var bar: number;
}

// foo 是 { bar: number }
import * as foo from 'foo';

global.d.ts 文件，用来将一些接口或者类型放入全局命名空间里，这些定义的接口和类型能在你的所有 TypeScript 代码里使用。对于一些新手和没有声明的第三方库可以使用global.d.ts避免报错。

import/require

import foo = require('foo');

上面这行代码做了两件事：第一是导入foo 模块的所有类型信息，二是确定 foo 模块运行时的依赖关系。

如果没有foo当作变量声明空间使用，那么编译成js时候上面的导入代码会被自动移除。

// ts
import foo = require('foo');

// 编译为js，什么也没有

// foo当作变量声明空间使用（foo是一个包含类型声明的commonjs 模块的库，导入）
import foo = require('foo');
var bar: foo;

// 编译为js
let bar;

// foo当作变量使用，就会被当做包引入
import foo = require('foo');
const bar = foo;

// 编译为js
const foo = require('foo');
const bar = foo;