快捷導(dǎo)航

如何在TypeScript使用模塊化以及注意事項詳解

更新時間：2022年10月16日 09:31:24 作者：前端刺不刺客

在TypeScript中就像在EC5中一樣,任何包含頂級import或export的文件都被認為是一個模塊,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript使用模塊化以及注意事項的相關(guān)資料,需要的朋友可以參考下

前言

隨著我們的代碼越來越龐大，我們需要拆分模塊組合, 便于后續(xù)的維護

除了commonJS, es6. ts也是支持模塊化的！???

如何在TS中寫es6模塊化語句

自從發(fā)布ES6（ES2015）之后， ts就采用了es6的模塊化標準-導(dǎo)出和導(dǎo)入模塊??

寫法：

導(dǎo)出:

myModule.ts
    export const name: number = 123
    export const getUser = (user: string): void => {
      console.log(user)
    }

導(dǎo)入:

index.ts
    import { name, getUser } from "./myModule";
    getUser(name)

值得注意的是TS的智能提示發(fā)揮到了超乎想象??

沒有引入直接使用變量, 波浪線智能提示從哪里引入

直接書寫變量，enter直接帶出引入

??雖智能, 但還是要注意幾點

注意事項	詳細
獲取智能提示有條件	但是要注意的是: 這個提示只適用于`export`，不適用于`export default`。因為`export`有固定的變量名，而`export default`導(dǎo)出沒有名字和引入時隨意起名字, `TS`不會去猜測
`import`引入的文件名	`import`引入的文件名不能帶上`.ts`, 因為會參與編譯的過程, 編譯后的結(jié)果為js，找不到ts這個文件

如何在TS中寫commonjs模塊化語句

按我們之前的寫法，是這樣子寫的

// 導(dǎo)出
module.exports = {
    sum (a: number, b: numnber) {
        return a + b
    }
}

//引入
const mymodule = require('./xxx')

此時會發(fā)現(xiàn)mymodule的類型為any，沒有類型檢查了

在ts中這樣才能有完整的類型檢查，并且和上述寫法的編譯結(jié)果一樣

// 導(dǎo)出
exports = {
    sum (a: number, b: numnber) {
        return a + b
    }
}

//引入
import mymodule = require('./xxx')

會發(fā)現(xiàn)寫法還是有差異的，

所以建議還是使用es6的標準會比較好，因為ta是后面的標準

解決導(dǎo)入錯誤的情況

先看一個例子，我們在代碼里引入node中的fs模塊

ts文件中:

    import fs from "fs";
    fs.readFileSync('./')

編譯結(jié)果:

    // tsconfig.json中設(shè)置module: CommonJs, 結(jié)果如下

    exports.__esModule = true;
    var fs_1 = require("fs");
    fs_1["default"].readFileSync('./');

??此時會發(fā)現(xiàn)一些問題

1.在ts文件中書寫會報錯
2.編譯結(jié)果中, 使用了default屬性.readFileSync

編譯后的fs沒有default屬性, 所以報錯了

為什么會報錯呢

 import fs from "fs";

fs不是標準esmodule標準導(dǎo)出因為fs默認使用module.exports={}的形式導(dǎo)出, import直接引入, 編譯結(jié)果會帶上default, fs中沒有default屬性

解決方案

??1.解構(gòu)出方法使用, 這樣就不會使用default屬性

ts文件中:

    import { readFileSync } from "fs";
    readFileSync('./')

編譯結(jié)果:

    exports.__esModule = true;
    var fs_1 = require("fs");
    (0, fs_1.readFileSync)('./');

??2.使用* as fs全部導(dǎo)入, 將module.exports內(nèi)全部導(dǎo)入

ts文件中:

    import * as fs from "fs";
    fs.readFileSync('./')

編譯結(jié)果:

    exports.__esModule = true;
    var fs = require("fs");
    fs.readFileSync('./');

??3.設(shè)置esModuleInterop為true, 讓TS識別出是否導(dǎo)出esmudole標準形式，并作出相應(yīng)的處理

tsconfig.json

{
  "compilerOptions": { 
    // 啟用es模塊化交互而非es模塊導(dǎo)出
    "esModuleInterop": true
  }
}

ts文件中:

    import fs from "fs";
    fs.readFileSync('./')

編譯結(jié)果:

// 生成輔助函數(shù)__importDefault
// 此時如果不是屬于esmodule形式導(dǎo)出, ts會默認添加default屬性，值設(shè)置為本身
    var __importDefault = (this && this.__importDefault) || function (mod) {
        return (mod && mod.__esModule) ? mod : { "default": mod };
    };
    exports.__esModule = true;
    var fs_1 = __importDefault(require("fs"));
    fs_1["default"].readFileSync('./');