Vue + ts 中,引用.vue文件导出的方法,ts无法解析解决办法。

前提

vue SFC 对于ts的支持不太行。

比方我在vue SFC 文件中导出一个函数如下



在其他文件中引入

import { getName } from 'xxx.vue';

此时ts引擎会提示:

Module '"*.vue"' has no exported member 'getParamKeys'. Did you mean to use 'import getParamKeys from "*.vue" instead'

 但是代码可以正常运行。

也就是.vue 文件中导出的东西是正常的。

原因

vue和ts一起使用的时候,由于ts引擎不能识别.vue 结尾的文件。因此一般会有一个.d.ts声明文件。比如shims-vue.d.ts,其中定义了 "*.vue" 的类型,只有一个 export default 

所以在ts文件中引入的时候就会提示这个错误。

解决

单独为某个.vue 文件定义一个声明比如

declare module '*/components/Select.vue' {
    function getName(name:string):string;
    export { getName };
}
// 一定要写在 '*.vue'之前
declare module '*.vue' {
    //...
}

这个声明一定要写在 ’*.vue' 之前。否则会优先匹配 '*.vue'

你可能感兴趣的:(问题解决,vue.js,javascript,前端)