TypeScript模塊與命名空間的關系和使用方法是什么

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

一、模塊

1. 全局模塊

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

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

示例：

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

2. 文件模塊

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

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

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

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

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

示例：

// 此時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. 模塊規范

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

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

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

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

二、命名空間

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

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

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

示例：

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

三、文件模塊和命名空間的關系

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

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

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