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;