shims-vue.d.ts 解析


 

TypeScript的文檔看起來比較讓人匪夷所思 

 

TS是從2012年就開始的項目,那時ES6的模塊化還沒有成為繼定標准,所以今天來看TS中一些名詞讓人匪夷所思,其實都是歷史遺留問題

 

比如namespace 原來也叫module,是internal module, 而module被稱為external module,

 

隨着時間推移和es6模塊化標准的問世, 內部模塊被改名為了namespace... 官方的handbook沒有提一些歷史遺留的問題,很多東西需要自己自己上網查資料

 

或許 這就是微軟把  財大氣粗技術強,隨意造火箭.. 

 

 

 

研究一下用vue-cli初始化ts項目生成的shims-vue.d.ts:

 

// shims-vue.d.ts

 

declare module '*.vue' {

  import Vue from 'vue';  // 引用了type和value

(// value是Vue構造器 type是Vue interface)

  export default Vue;

}

 

這句話的意思是 聲明一個ambient module(即:沒有內部實現的 module聲明) 

使用了Wildcard module declarations

具體參見: http://www.typescriptlang.org/docs/handbook/modules.html

 

 

在TypeScript編譯器解析 import ‘aaa’ from xxx.vue的時候

 

拿到node_modules/vue/目錄下 index.d.ts 中export default出來的type和value,

 

type是Vue接口

value是 const Vue,這個常量的類型是VueConstructor

 

(圖中是從'vue'中import中得到的type和 value) 

 

一個import 能同時import到兩個東西,import了一種type 還import了一個value

具體參見:http://www.typescriptlang.org/docs/handbook/declaration-files/deep-dive.html

 

 

 

(當我引用一個vue組件的時候,也拿到了type 和 value)

這里value是TemplateSearch,類型是Vue構造器

 

使用value:   TemplateSearch. 當點(.) 的時候就能拿到他一些屬性,因為這個值是VueConstructor類型

使用type:     let a:TemplateSearch 就能使用type 這個type是interface Vue

 

 

 

 

 

 

 

 

上面說拿到了node_modules/vue/目錄下index.d.ts中export default出來的type 和 value,那么我們來看一下這個東東是什么:

在index.d.ts下:

export default的東西是從當前vue.d.ts下導出的Vue

 

 

 我們來看vue.d.ts:

 

23行導出了type Vue, 129行導出了 value Vue 這兩個東西都被export default出來了 當你import的時候 就拿到了這兩個東西,並且改成了你import的名字。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM