快捷導(dǎo)航

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

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

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

一、模塊

1. 全局模塊

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

在全局變量空間是危險(xiǎn)的，因?yàn)樗麜?huì)與文件內(nèi)的代碼命名沖突。我們推薦使用下文中將要提到的文件模塊

示例：

// 由于此時(shí)默認(rèn)為全局變量
// 因此會(huì)報(bào)錯(cuò)：無(wú)法重新聲明塊范圍變量“name”。ts(2451)
let name = '張三';

2. 文件模塊

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

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

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

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

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

示例：

// 此時(shí)a，b和默認(rèn)導(dǎo)出的name可以在其他文件導(dǎo)入使用
// c由于未導(dǎo)出，因此在其他文件導(dǎo)入c時(shí)會(huì)報(bào)錯(cuò)
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：這是一個(gè)好的實(shí)驗(yàn)，已經(jīng)被 ES 模塊替代
ES 模塊：它并沒(méi)有準(zhǔn)備好，瀏覽器暫時(shí)還不支持
使用 module: commonjs 來(lái)替代這些模塊，commonjs在node和瀏覽器中都支持

二、命名空間

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

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

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

示例：

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