TypeScript中命名空間與模塊化詳情
一、模塊
TypeScript
與ECMAScript
2015 一樣,任何包含頂級(jí) import
或者 export
的文件都被當(dāng)成一個(gè)模塊
相反地,如果一個(gè)文件不帶有頂級(jí)的import
或者export
聲明,那么它的內(nèi)容被視為全局可見(jiàn)的
例如我們?cè)谠谝粋€(gè) TypeScript
工程下建立一個(gè)文件 1.ts
,聲明一個(gè)變量a
,如下:
const a = 1
然后在另一個(gè)文件同樣聲明一個(gè)變量a
,這時(shí)候會(huì)出現(xiàn)錯(cuò)誤信息
提示重復(fù)聲明a
變量,但是所處的空間是全局的
如果需要解決這個(gè)問(wèn)題,則通過(guò)import
或者export
引入模塊系統(tǒng)即可,
如下:
const a = 10; export default a
在typescript
中,export
關(guān)鍵字可以導(dǎo)出變量或者類型,用法與es6
模塊一致,
如下:
export const a = 1 export type Person = { name: String }
通過(guò)import
引入模塊,如下:
import { a, Person } from './export';
二、命名空間
命名空間一個(gè)最明確的目的就是解決重名問(wèn)題
命名空間定義了標(biāo)識(shí)符的可見(jiàn)范圍,一個(gè)標(biāo)識(shí)符可在多個(gè)名字空間中定義,它在不同名字空間中的含義是互不相干的
這樣,在一個(gè)新的名字空間中可定義任何標(biāo)識(shí)符,它們不會(huì)與任何已有的標(biāo)識(shí)符發(fā)生沖突,因?yàn)橐延械亩x都處于其他名字空間中
TypeScript
中命名空間使用 namespace
來(lái)定義,語(yǔ)法格式如下:
namespace SomeNameSpaceName { export interface ISomeInterfaceName { } export class SomeClassName { } }
以上定義了一個(gè)命名空間 SomeNameSpaceName
,如果我們需要在外部可以調(diào)用 SomeNameSpaceName
中的類和接口,則需要在類和接口添加 export
關(guān)鍵字
使用方式如下:
SomeNameSpaceName.SomeClassName
命名空間本質(zhì)上是一個(gè)對(duì)象,作用是將一系列相關(guān)的全局變量組織到一個(gè)對(duì)象的屬性,如下:
namespace Letter { export let a = 1; export let b = 2; export let c = 3; // ... export let z = 26; }
編譯成js
如下:
var Letter; (function (Letter) { Letter.a = 1; Letter.b = 2; Letter.c = 3; // ... Letter.z = 26; })(Letter || (Letter = {}));
三、區(qū)別
- 命名空間是位于全局命名空間下的一個(gè)普通的帶有名字的 JavaScript 對(duì)象,使用起來(lái)十分容易。但就像其它的全局命名空間污染一樣,它很難去識(shí)別組件之間的依賴關(guān)系,尤其是在大型的應(yīng)用中
- 像命名空間一樣,模塊可以包含代碼和聲明。 不同的是模塊可以聲明它的依賴
- 在正常的TS項(xiàng)目開(kāi)發(fā)過(guò)程中并不建議用命名空間,但通常在通過(guò) d.ts 文件標(biāo)記 js 庫(kù)類型的時(shí)候使用命名空間,主要作用是給編譯器編寫(xiě)代碼的時(shí)候參考使用
到此這篇關(guān)于TypeScript中命名空間與模塊化詳情的文章就介紹到這了,更多相關(guān)TypeScript命名空間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
IE8 內(nèi)存泄露(內(nèi)存一直增長(zhǎng) )的原因及解決辦法
最近開(kāi)發(fā)的時(shí)候?qū)?yè)面使用了定時(shí)的局部更新,結(jié)果在ie6,7和Firefox下,一切正常,而在ie8下過(guò)上幾個(gè)小時(shí)就瀏覽器就崩潰了,顯示是內(nèi)存溢出,下面由腳本之家小編給大家介紹ie8下內(nèi)存一直增長(zhǎng)內(nèi)存泄漏的原因及解決辦法,需要的朋友一起學(xué)習(xí)吧2016-04-04小程序api實(shí)現(xiàn)promise封裝過(guò)程解析
這篇文章主要介紹了小程序api實(shí)現(xiàn)promise封裝過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11JavaScript實(shí)現(xiàn)頁(yè)面電子時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面電子時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JS多物體實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果示例
這篇文章主要介紹了JS多物體實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法,涉及javascript基于時(shí)間函數(shù)進(jìn)行動(dòng)態(tài)運(yùn)算實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12對(duì)采用動(dòng)態(tài)原型方式無(wú)法展示繼承機(jī)制得思考
今天看書(shū),作者討論到能否采用動(dòng)態(tài)原型方法展示繼承機(jī)制,給出的答案是:不能。原因是prototype對(duì)象的唯一性??聪旅娲a(這段代碼不正確,卻值得研究)2009-12-12JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)tab欄切換的幾種常用方法,在Web開(kāi)發(fā)中Tab切換是一個(gè)常見(jiàn)的功能,它允許用戶在不同的頁(yè)面部分之間進(jìn)行切換,需要的朋友可以參考下2023-12-12bootstrap weebox 支持ajax的模態(tài)彈出框
本篇介紹的bootstrap weebox(支持ajax的模態(tài)彈出框),歷經(jīng)多次修改,目前版本已經(jīng)穩(wěn)定,整合了bootstrap的響應(yīng)式,界面簡(jiǎn)單,功能卻無(wú)比豐富,支持ajax、圖片預(yù)覽等等2017-02-02uniapp開(kāi)發(fā)微信小程序主包太大和vendor.js過(guò)大無(wú)法打包問(wèn)題解決
最近工作一直在uniapp開(kāi)發(fā)小程序這一塊,相信很多開(kāi)發(fā)者都遇到過(guò)代碼體積太大無(wú)法打包的問(wèn)題,這篇文章主要給大家介紹了關(guān)于uniapp開(kāi)發(fā)微信小程序主包太大和vendor.js過(guò)大無(wú)法打包問(wèn)題的解決辦法,需要的朋友可以參考下2023-11-11基于javascript實(shí)現(xiàn)彩票隨機(jī)數(shù)生成(升級(jí)版)
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)彩票隨機(jī)數(shù)生成的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01