vue/ 使用 tsx 时没有导出成员 'toRefs'答案

【问题标题】：vue/ has no exported member 'toRefs' when use tsxvue/ 使用 tsx 时没有导出成员 'toRefs'
【发布时间】：2021-12-18 10:50:47
【问题描述】：

当我在 tsx 脚本中从“vue”导入“toRefs”时，tslint 给我“没有专家成员 toRefs”错误，即使我可以在 ts 文件中找到这个函数的声明。

导出声明函数 toRefs(object: T): ToRefs;

这里是代码

<script lang="tsx">
import { defineComponent, toRefs } from "vue";
import { Column } from "./VueTableColumn.vue";

export default defineComponent({
  props: {
    // ...
  },
  setup: (props, { emit }) => {
    const { pageNo, pageSize, rowClass, dataList, rowStyle, columns } = toRefs(props);
    return () => (
      // ...
    );
  },
});
</script>

这里有错误

ERROR in src/components/VueTableBody.vue:2:27
TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'toRefs'.
    1 | <script lang="tsx">
  > 2 | import { defineComponent, toRefs } from "vue";
      |                           ^^^^^^
    3 | import { Column } from "./VueTableColumn.vue";
    4 |
    5 | export default defineComponent({

这是我的 package.json 文件，我是否使用了错误的包版本？

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@types/jquery": "^3.5.4",
    "ant-design-vue": "^2.0.0-beta.15",
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.4",
    "element-plus": "^1.0.2-beta.54",
    "fork-ts-checker-webpack-plugin-v5": "^0.0.1-security",
    "sass": "^1.32.13",
    "sass-loader": "^10.2.0",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
    "ztree": "^3.5.24"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0-0",
    "typescript": "~3.9.3",
    "vue-loader-v16": "^16.0.0-beta.5.4"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "@vue/standard",
      "@vue/typescript/recommended"
    ],
    "parserOptions": {
      "ecmaVersion": 2020
    },
    "rules": {}
  },
}

【问题讨论】：

见 meta.stackoverflow.com/questions/285551/… 和 .您发布的任何内容都不需要是图像。此外，没有足够的细节。这在正常情况下不应该发生，因为这个导出存在于 Vue 3 中。确保使用正确的 Vue 版本
好的，我编辑了我的问题，我不认为这是 Vue 版本的问题，谢谢
我没有注意到提到 tslint。那么问题就完全不同了，你需要强调这一点，问题完全是针对它的，而不是针对 Vue 或 Typescript。编译器、IDE 和 linter 都是不同的工具，以不同的方式处理 TS 和 Vue SFC。它可能适用于一种工具，而不适用于另一种工具。至于 tslint，它已经过时并且可能有自己的怪癖，这些怪癖并不广为人知，因为它是 eslint 和目前广泛使用的 ts 插件（也在这个设置中）。无论如何，您需要询问有关 linter 的问题。如果你真的使用 tslint，切换到 eslint 可能会有所帮助
根据您的意见，我通过更改打字稿版本来解决我的问题。貌似是Vue和TS版本的冲突。谢谢你的回复。

标签： typescript vue.js

【解决方案1】：

最后，我通过更改打字稿版本解决了我的问题。

来自

"typescript": "~3.9.3"

到

"typescript": "^4.3.5"

【讨论】：