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

這篇文章主要講解了“TypeScript模塊與命名空間的關(guān)系和使用方法是什么”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“TypeScript模塊與命名空間的關(guān)系和使用方法是什么”吧！

一、模塊

1. 全局模塊

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

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

示例：

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

2. 文件模塊

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

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

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

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

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

示例：

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

3. 模塊規(guī)范

• AMD：不要使用它，它僅能在瀏覽器工作

• SystemJs：這是一個好的實驗，已經(jīng)被 ES 模塊替代

• ES 模塊：它并沒有準備好，瀏覽器暫時還不支持

• 使用 module: commonjs 來替代這些模塊，commonjs在node和瀏覽器中都支持

二、命名空間

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

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

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

示例：

// 注意：此處可以在當前文件直接使用，也可以在其他文件導入使用
export namespace person {
  class Woman { };
  // 此處加了export關(guān)鍵字才會被導出，否則則為私有
  export class Man {
    eat() { return '吃飯' }
  }
}
export namespace animal {
  class Bird { };
  // 此處加了export關(guān)鍵字才會被導出，否則則為私有
  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()); // 吃水果

三、文件模塊和命名空間的關(guān)系

文件模塊可以重復，多個文件導出同樣的命名是被允許的文件模塊是獨立的，互相之間不影響命名空間全局具有唯一性，導出的名稱不能重復

補充：同一模塊下命名空間一致會合并；不同模塊下同名命名空間不會合并

感謝各位的閱讀，以上就是“TypeScript模塊與命名空間的關(guān)系和使用方法是什么”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對TypeScript模塊與命名空間的關(guān)系和使用方法是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！