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的名字。