全域性模組

在全域性名稱空間中定義的模組就是全域性模組，示例：

// 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;