TS -- 命名空間與模塊化 · Typescript -- 學習

>[success] # 命名空間與模塊化 ~~~ 1.在js在還沒有es6 模塊化的時代大家還在對js 模塊標準為之奮斗定義了很多規則，此時ts 已經出現，ts 此時為了解決模塊化便出了一套自己模塊的標準方案分別叫做 'Internal Modle' 和 'External Module' 2.現在隨著js 不斷升級，js也有了自己的標準的模塊化解決方案，ts作為'js超集'的概念自然漸漸也開始接受了js 的模塊化的導出方案 3.現在來看ts接受了js'模塊化'方案，并且也保留之前自己的方案將其叫做'命名空間' ~~~ [typescript已經有模塊系統了，為什么還需要namespace](https://www.zhihu.com/question/65676593) >[info] ## 為什么要命名空間與模塊化 ~~~ 1.在兩個單獨文件中都定義了相同變量，并使用tsc 進行打包得到打包前打包后如下兩段代碼 ~~~ >[danger] ##### 代碼案例 ~~~ // 第一段代碼在文件 index.ts const a = 1 // 第二段代碼在文件 index1.ts const a = 1 ~~~ * 此時ts 會給出報錯提示 ![](https://img.kancloud.cn/b8/90/b8903760cecfabb9d4e5c8e94be83f7d_496x212.png) * 執行tsc 打包指令'npx tsc --outDir dist' ~~~ // 得到兩個文件內容都是如下 "use strict"; var a = 1; ~~~ * 如圖 ![](https://img.kancloud.cn/4b/4e/4b4e5e98ad214acca4761a78235fa10b_717x213.png) ~~~ 1.感覺上剛才ts時候報錯并沒有影響到js打包，此時不然，如果現在將兩段代碼引入 html 文件就回到了js 早期時候模塊化問題,兩段代碼并沒有自己的作用域，導入先后順序完全影響到了實際此時值對應關系 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script src="../dist/index1.js"></script> <script src="../dist/index.js"></script> </body> </html> ~~~