快捷導(dǎo)航

如何在TypeScript使用模塊化以及注意事項(xiàng)詳解

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

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

前言

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

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

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

自從發(fā)布ES6（ES2015）之后， ts就采用了es6的模塊化標(biāo)準(zhǔn)-導(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直接帶出引入

??雖智能, 但還是要注意幾點(diǎn)

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

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

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

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

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

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

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

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

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

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

所以建議還是使用es6的標(biāo)準(zhǔn)會(huì)比較好，因?yàn)閠a是后面的標(biāo)準(zhǔn)

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

先看一個(gè)例子，我們在代碼里引入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('./');

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

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

編譯后的fs沒有default屬性, 所以報(bào)錯(cuò)了

為什么會(huì)報(bào)錯(cuò)呢

 import fs from "fs";

fs不是標(biāo)準(zhǔn)esmodule標(biāo)準(zhǔn)導(dǎo)出因?yàn)閒s默認(rèn)使用module.exports={}的形式導(dǎo)出, import直接引入, 編譯結(jié)果會(huì)帶上default, fs中沒有default屬性

解決方案

??1.解構(gòu)出方法使用, 這樣就不會(huì)使用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識(shí)別出是否導(dǎo)出esmudole標(biāo)準(zhǔn)形式，并作出相應(yīng)的處理

tsconfig.json

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

ts文件中:

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

編譯結(jié)果:

// 生成輔助函數(shù)__importDefault
// 此時(shí)如果不是屬于esmodule形式導(dǎo)出, ts會(huì)默認(rèn)添加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('./');