【TypeScript學習系列】

模組化是我一直想要學的目標,雖然說程式可以執行就已經是很厲害了,但是這樣對閱讀跟維護上,甚至將來要拆出來用,以及重複使用上的效率都很差,那模組化是很好解決這些問題的方式,我自己雖然看過ES6 Module的寫法,但實際卻未真正用來開發,所以這次有這個機會要好好的記錄下來

commonsJS

這是以前的人為了解決無法在NodeJS上面應用JS模組化的概念,所演化出來一種約定俗成的寫法,那我自己本身也是完全沒接觸過

首先設立兩個檔案,一個模組的,一個主程式執行的

  • commonsJS.ts
  • index.ts

單個資料傳輸

直接將需要輸出的資料,使用module.exports將資料傳出去,那接收方使用

commonsJS.ts

const userName = "hank";
module.exports = userName;

index.ts

const data = require("./commonJS");
console.log(data);

多個資料傳輸

那我們只需要傳個物件過去就好,這邊只要你的變數名稱都是相同的,後面不打也可以,如果要打的話,就像age一樣,傳物件變數的概念。接收的部分一樣取個變數來接值

commonsJS.ts

const userName = "hank";
const age = 99;

module.exports = {
  userName,
  age: age,
};

index.ts

const data = require("./commonJS");
console.log(data);

ES6Module

ES6提供了模組化的寫法,也提供了不少的變化,也是我當初學JS時,就有接觸過的寫法

同樣設置兩個檔案,模組及執行的

  • ES6Module.ts
  • index.ts

單個資料傳輸

想要獲得資料,只要在前面使用export直接將資料輸出即可,接收方的部分就可以收到了

ES6Module.ts

export const userName = "hank";
export const age = 99;

index.ts

import { userName, age } from "./ES6Module";
console.log(userName, age);

而接收方也可以將資料一次收集起來,就不用打這麼多變數名稱

import * as all from "./ES6Module";
console.log(all);

多個資料傳輸

同樣的,除了上述提到的方式,還可以多個資料一次傳輸,這樣可以在模組方一次整理在同一個地方,方便整理。而接收的部分,也不在需要大括號將資料存起來,只要使用default傳過來的,就可以直接被設定的變數接收

※default也可以只傳一個變數,這應該很好理解

ES6Module.ts

const userName = "hank";
const age = 99;

export default {
  userName,
  age,
};

index.ts

import data from "./ES6Module";
console.log(data);

綜合應用

那還可以把上面所有的方式都加總起來用,這樣一樣可以拿到default的值傳到data,也可以把各自的部分,分別傳送來獲取值

那如果有可能模組使用的變數跟方法名子衝突到了,就可以向範例中userName的部分一樣,加個斷點讓他改存為別得名稱

ES6Module.ts

export const userName = "hank";
export const age = 99;

export default {
  userName,
  age,
};

index.ts

import data, { userName as name1, age } from "./ES6Module";
console.log(data);
console.log(name1, age);

模組化tsconfig的設定

其實寫程式有一部分會讓人搞不懂的地方在於環境的設定,這一部分就是必須要非常了解這個語言,並且知道其發展歷史,才有可能理解當中每一項設定是做什麼用

布魯斯的 TypeScript 入門攻略|輕鬆打造實時聊天室這堂課中,除了學到語言的撰寫邏輯之外,最重要的就是聽布魯斯講解這些工具之間的關聯,有很多地方都只知道要安裝這個,設定那個,但你從來不知道為什麼

而布魯斯則會很清楚到告知每一項設定背後的原理,透過語言的發展歷史,告訴你為什麼要這麼做,並且過程中還會帶著看官方文件(這也是我不擅長的東西)

這裡就只記錄功用,要知道背後原理的話,還是去聽一下專業的講師講解

moduleTS編譯後呈現的JS模組
targetTS編譯後所呈現的JS模組
moduleResolutionImport解析路徑的策略
1.npm 2.路徑
esModuleInterop撰寫ES6Module時相容CommonJS模組
allowSyntheticDefaultImports針對import時,模組沒有Default輸出時的相容性處理

設定根目錄為絕對路徑

我們常常要import一個路徑檔名,都要以自身為出發點,再去尋找其他檔案的位置,所以直接把這種相對路徑改為絕對路徑,不管自身移動到哪裡,就不用一直改匯入檔案的路徑

先設定兩個檔案在src裡面,層級關係分別為下面所設定

-src

-lib

    -live.ts

-utils

    -parsing.js

一般我們設定會是這樣,parsing跟live是不同層資料夾,所以要先回上一層,再到lib層找到live.ts

live.ts

export const liveName = "hank";

parsing.js

import { liveName } from "../lib/live";

在tsconfig中設定所有根目錄為@代替,而根目錄就是./src

  "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }

如果有使用webpack,也要讓webpack知道@是什麼,要不然webpack只會把他看成是@,不知道是幹嘛的

在webpack.config中的module.exports物件裡修改resolve,再resolve中新增這行代碼,告訴webpack,”@”代表src

  alias: {
      "@": path.resolve(__dirname, "src"),
    },

結論

今天也是繼續學習布魯斯的 TypeScript 入門攻略|輕鬆打造實時聊天室這堂課,其實模組化的輸入輸出概念的概念並不會太難,而且相當方便,透過模組化之後,將特定的功能額外分成別的檔案,只需要在使用的時候import進來,就可以使用特定功能,除了程式碼看起來簡單易懂之外,也可以做到重複使用的功用

而現在NPM發展也越來越方便,需要的套件只需要安裝之後,就可以直接import的進來使用,這也是可以讓自己可以快速開發的一個重要能力

By dong

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。