TypeScript模塊與命名空間的關(guān)系和使用方法

更新時間：2023年03月09日 10:20:26 作者：劍九六千里

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

一、模塊

1. 全局模塊

在默認(rèn)情況下，當(dāng)你開始在一個新的 TypeScript 文件中寫下代碼時，它處于全局命名空間中

在全局變量空間是危險的，因為他會與文件內(nèi)的代碼命名沖突。我們推薦使用下文中將要提到的文件模塊

示例：

// 由于此時默認(rèn)為全局變量
// 因此會報錯：無法重新聲明塊范圍變量“name”。ts(2451)
let name = '張三';

2. 文件模塊

文件模塊也被稱為外部模塊。如果在你的 TypeScript 文件的根級別位置含有 import 或者 export，那么它會在這個文件中創(chuàng)建一個本地的作用域

模塊是 TS 中外部模塊的簡稱，側(cè)重于代碼的復(fù)用

模塊在自身的作用域里執(zhí)行,而不是在全局作用域里

一個模塊里的變量、函數(shù)、類等在外部是不可見的，除非將其導(dǎo)出

如果想要使用一個模塊里導(dǎo)出的變量，則需要導(dǎo)入

示例：

// 此時a，b和默認(rèn)導(dǎo)出的name可以在其他文件導(dǎo)入使用
// c由于未導(dǎo)出，因此在其他文件導(dǎo)入c時會報錯
export const a = 1;
export const b = 2;
const c = 3;
export default { name: 'Tom' }
// 導(dǎo)入
// import { a, b } from './xxx.ts'

3. 模塊規(guī)范

AMD：不要使用它，它僅能在瀏覽器工作
SystemJs：這是一個好的實(shí)驗，已經(jīng)被 ES 模塊替代
ES 模塊：它并沒有準(zhǔn)備好，瀏覽器暫時還不支持
使用 module: commonjs 來替代這些模塊，commonjs在node和瀏覽器中都支持

二、命名空間

在代碼量較大的情況下，為了避免命名空間沖突，可以將相似的函數(shù)、類、接口防止在命名空間內(nèi)

命名空間可以將代碼包裹起來，只對外暴露需要在外部訪問的對象，命名空間內(nèi)通過 export 向外導(dǎo)出

命名空間是內(nèi)部模塊，主要用于組織代碼，避免命名沖突

示例：

// 注意：此處可以在當(dāng)前文件直接使用，也可以在其他文件導(dǎo)入使用
export namespace person {
  class Woman { };
  // 此處加了export關(guān)鍵字才會被導(dǎo)出，否則則為私有
  export class Man {
    eat() { return '吃飯' }
  }
}
export namespace animal {
  class Bird { };
  // 此處加了export關(guān)鍵字才會被導(dǎo)出，否則則為私有
  export class Tiger {
    eat() { return '吃肉' }
  }
  // 命名空間嵌套命名空間
  export namespace monkeyArea {
    export class Monkey {
      eat() { return '吃水果' }
    }
  }
}
let p = new person.Man();
console.log(p.eat()); // 吃飯
let t = new animal.Tiger();
console.log(t.eat()); // 吃肉
let m = new animal.monkeyArea.Monkey();
console.log(m.eat()); // 吃水果