vue + typescript visual studio报错 [ts] 类型“ThisTypedComponentOptionsWithArrayProps | ComponentOptions

由于标题字数的限制无法全部复制过来，全部的错误提示是这样的

[ts] 类型“ThisTypedComponentOptionsWithArrayProps | ComponentOptions

vue（render + JSX） + typescript  开发前端组件的时候，子组件定义的属性，在父组件中应用时，用到子组件定义的的属性，之前这个项目是没有问题的，由于后来开发的时候重新npm install以后，

第一步： （node -> 6.9.0， npm -> 3.10.8）vscode 出现了贴出来的错误，且 npm run dev 时，无法编译通过。

第二步： 向同事请求支援后将=环境更新为 node -> 8.1.3, npm -> 6.0.1, 还是会提示错误信息，考虑这个错误提示中thistypedcomponent......是使用因为使用了vue-class-component, 于是搜寻vue-class-component 的使用， 在StackOverflow有人说vue-class-component 不支持 typescript 2.6.1 ,更新为typescript为 2.5.3(2.7.1 也行) 以后就可以了，一看我的项目里typescript 是2.6.2，立马更新为2.5.3， 不幸的是错误提示还存在，好的事情是npm run dev 编译成功了，没有报错。（其实这个经过我的测试， vue-class-component 是支持typescript2.6.1的，可能那位同学的其他环境没搭好， 另外vue-class-component v6.0.0仅支持Vue v2.5类型。请为Vue v1.x使用vue-class-component v3.x.）

但是这个问题存在vscode中说明问题是存在的，在StackOverflow上有人说是vscode的配置问题，在修改一通后还是没用， 呼呼呼。

第三步： 不行了先放一放，下班回家试试另外电脑的vscode，看是否是vscode的配置问题，结果回来用笔记本在更新typescript的时候居然收到 报错 write after end 的错误提示， 原来因为npm 的版本太高了造成的（此时的npm 版本是6.0.1）， 将npm版本降低为5.6.0以后，typescript 2.5.3 更新成功了，然后令人惊喜的是，vscode的类型错误的提示消失了，这简直太出乎意料了。

 

不想看过程的，直接看结果， 环境更新的过程是 ,最后一个是完全正常的配置

node (6.9.0) + npm(3.10.8)  + typescript(2.6.2) +vue-class-component (6.1.2）---> node(8.1.3) + npm(6.0.1) + typescript(2.6.2) +vue-class-component (6.1.2）-> node(8.1.3) + npm(5.6.0) + tyepescript(2.5.3) +vue-class-component (6.1.2）

1.父组件

 

2.子组件

npm run dev编译出现错误

然而事情没有想象中那么顺利，昨天晚上测试的时候是完全OK的，今天早上一打开vscode，傻眼了，怎么又报错了，在更新了环境以后，还是没有得到想要的结果，双手在键盘上轻轻的乱点，眼睛乱瞟，咦，等等，好像看到了啥，

 

​​​​​​

咋，原来vscode 启用的vscode默认的typescript的默认版本2.9.2， 欣喜若狂啊，点开是这样的，选择use workspace version 2.5.3,ok,错误提示瞬间消失，浪里个浪儿

 

 

经过测试，上面的环境都是成功的，我最后能够成功的配置是这样， npm的版本只是安装有的环境时版本过高，降低版本号就可以了

node(8.1.3) + npm(6.0.1) + tyepescript(2.6.2) +vue-class-component (6.1.2） （确保vscode的配置和这个一样）

 

后续使用的项目的时候又出现一个问题， 工作区的typescript 的版本号时2.7.1， 安装的也是2.7.1， 但是在vscode 的 右下角显示的时2.9.2 的版本，无论我怎么选2.7.1， 右下角还是2.9.2， 我就纳闷了，为什么不生效，网上搜搜看，咦，版本号的下面有对应typescript SDK的路径，有可能是路径错了

 

打开vscode文件--> 首选项->工作区设置，可以看到如下图：

跟之前的设置作对比，果然， 路径错了，改了如下：

 

然后保存设置，右下角的版本号自动就变成了2.7.1,错误也不存在了，good good good!哈哈