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

shims-vue.d.ts 解析的更多相关文章

  1. 【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内 ...

  2. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

  3. Vue源码解析(一):入口文件

    在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下 ...

  4. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  5. Vue源码解析之nextTick

    Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...

  6. Vue中v-model解析、sync修饰符解析

    上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...

  7. 【VUE】Vue 源码解析

    Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的 ...

  8. Vue 源码解析:深入响应式原理(上)

    原文链接:http://www.imooc.com/article/14466 Vue.js 最显著的功能就是响应式系统,它是一个典型的 MVVM 框架,模型(Model)只是普通的 JavaScri ...

  9. vue 模板如何解析

    1.模板 一个最简答的模板: <div id="app"> {{ message }} </div> v-for模板: <ul id="ex ...

随机推荐

  1. 在控制台编译运行java程序详细指导

    控制台编译运行.java文件 首先在cmd中输入java –version确定java环境变量是否已经配好 其次在cmd中输入javac –version 确定javac环境变量是否已经配好 在用cd ...

  2. 状压DP操作

    1.’&’符号,x&y,会将两个十进制数在二进制下进行与运算,然后返回其十进制下的值.例如3(11)&2(10)=2(10). 2.’|’符号,x|y,会将两个十进制数在二进制 ...

  3. CSS3参数matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。那这六个值分别代表了什么参数?

    matrix( a, b, c, d, e, f );a 水平缩放b 水平倾斜c 垂直倾斜d 垂直缩放e 水平移动f 垂直移动

  4. 如何使用Beyond Compare比较两个文件夹的差异

    很多时候,我们需要比较两个文件或者两个文件夹的差异性,看看是哪里不同.这时候就需要一款比较软件来处理,Beyond Compare就是其中一款非常好用的版本比较工具,下面简单介绍一下Beyond Co ...

  5. 分布式配置中心(Spring Cloud Config) (问题解答)

    转载:https://blog.csdn.net/forezp/article/details/70037291 1.foo是博主随意写的,实际是没有对应的文件.如果真有文件,返回的json在会有so ...

  6. CPU、CPU核与线程的关系

    CPU相关概念: CPU:独立的中央处理单元,体现在主板上是有多个CPU的插槽. CPU cores:在每一个CPU上,都可能有多个核(core),每一个核中都有独立的一套ALU.FPU.Cache等 ...

  7. SpringBoot框架(6)--事件监听

    一.场景:类与类之间的消息通信,例如创建一个对象前后做拦截,日志等等相应的事件处理. 二.事件监听步骤 (1)自定义事件继承ApplicationEvent抽象类 (2)自定义事件监听器,一般实现Ap ...

  8. pyqt5-信号与槽

    个人理解:pyqt5的信号就是C++中事件,比如鼠标单击事件;pyqt5中的槽就是c++事件函数,比如单击之后要去执行的函数 例子一 一个信号连接一个槽 import sysfrom PyQt5.Qt ...

  9. break continue exit return 的区别

    [root@localhost day1]# cat ss.sh #!/bin/bash for ((i=0;i<5;i++)) do if [ $i -eq 3 ] then break #c ...

  10. angular-seed — AngularJS种子项目

    AngularJS Seed 是典型 AngularJS web 应用的应用骨架,可以快速启动你的 AngularJS webapp 项目和这些项目的开发环境. AngularJS Seed 包括一个 ...