TS 中的模塊化

模塊語法

直接使用 Es6 的模塊化語句就可以了

導入 ts 文件時，不要加後綴名，因爲編譯後是 js 文件，沒有 .ts

編譯結果中的模塊化

可配置，直接配置 compolerOptions.module 就可配置編譯結果中使用的編譯模塊語法

• 如果編譯結果的模塊化標準是 ES6, 沒有區別
• 如果編譯結果的模塊化標準是 commonjs ：導出的聲明會變成 exports 的屬性，***默認的導出會變成 exports 的 default 屬性;***，在調用的時候會直接使用 exports.default 去調用

解決默認導入的錯誤

由於 commonjs 沒有 export default 這種導出方法，但是 ts 在默認導入的時候，又會去 exports.default 去讀取屬性，所以如果去使用一些使用 commonjs 的庫，

import fs from 'fs' // 這種稱謂默認導入。
fs.readFileSync()
// 編譯後
var fs_1 = require("fs");
fs_1["default"].readFileSync(); // 然後default上並沒有這些屬性，而應該直接使用 fs_1.xxx
// 解決辦法
// 1.直接使用 commjs 的方式導入
const fs = require('fs')
// 2. 仍然使用 es6 module
import * as fs from 'fs'
import { readFileSync } from 'fs'
// 3. 配置 exModuleInterop: true

如何在 ts 中書寫 commonjs 模塊化

// 直接用本來的 commonjs 的語法，但是沒辦法使用類型檢查。
// 使用類型檢查
// 導出
export = {}
// 導入
import xxx = require('xxx')

模塊解析

在 ts 中有兩種模塊解析策略

1. classic: 經典(過時)
2. node: node 解析策略