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

前提

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

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

<!-- A.vue -->
<template></template>
<script lang='ts'>
export function getName(){
// ...
}
export default {
    data(){
        return {}
    },
    // ...
}
</script>

在其他文件中引入

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'