Vue 2.7 strictTemplates错误

v8wbuo2f 于 5个月前发布在其他

关注(0)|答案(6)|浏览(60)

https://github.com/xiaoxiangmoe/issue-vue-2.7-on-click-type-error.git

pnpm run type-check

src/App.vue:12:6 - error TS2559: Type '{ onClick: any; }' has no properties in common with type 'Readonly<Partial<{}> & Omit<Readonly<ExtractPropTypes<{ border: { type: PropType<boolean>; }; }>>, never>>'.

12     <HelloWorld @click="handleClick" />
        ~~~~~~~~~~

Found 1 error in src/App.vue:12

HelloWorld.vue

<script setup lang="ts">

interface ButtonProps {
border?: boolean; 
}

const props = defineProps<ButtonProps>() 
defineEmits<{
(event: 'click',payload: MouseEvent): void
}>()
</script>
<template>
    <div id="app">
        <button @click="$emit('click', $event)">Click me</button>
    </div>
</template>

这个错误自从vue-tsc 1.7.12出现以来。

vue

来源：https://github.com/vuejs/vue/issues/13104

6条答案

按热度按时间

lc8prwob1#

看起来像是 Vue2 类型问题。它没有将 emits 转换为 props。

赞(0）回复(0）举报 5个月前

gkn4icbw2#

@LinusBorg,请问您能帮忙将这个内容转移到vuejs/vue吗？谢谢。

赞(0）回复(0）举报 5个月前

qlfbtfca3#

你是谁？

赞(0）回复(0）举报 5个月前

blmhpbnm4#

同时看到了类似的内容。

modules/src/components/CombinedModal.vue:94:14 - error TS2345: Argument of type '{ props: any; onClose: any; }' is not assignable to parameter of type 'Readonly<Partial<{ [x: number]: string; }> & Omit<Readonly<ExtractPropTypes<string[]>>, DefaultKeys<string[]>>> & Record<...>'.
  Type '{ props: any; onClose: any; }' is not assignable to type 'Readonly<Partial<{ [x: number]: string; }> & Omit<Readonly<ExtractPropTypes<string[]>>, DefaultKeys<string[]>>>'.
    Types of property 'toString' are incompatible.
      Type '() => string' is not assignable to type '(() => string) & string'.

94             <MergeModal @close="onClose" v-bind:props="props"></MergeModal>

我不认为自己真的在做任何特别的事情。
Shim文件(移除似乎不会改变任何东西):

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent;
  export default component;
}

使用vue-tsc --noEmit和这个配置文件进行类型检查：

{
  "extends": "../tsconfig.json",
  "include": [
    "./types/shims-vue.d.ts",
    "./types/vuejs-datepicker.d.ts",
    "**/*.js", // required even if we're not directly type checking (see `allowJs` below)
    "**/*.ts",
    "**/*.vue"
  ],
  "compilerOptions": {
    "composite": true,
    "allowJs": true, // permits .ts/.vue files we're type checking to import .js files, enabling us to gradually add type checking w/o requiring an all-at-once migration. Worth noting that this is completely distinct from `checkJs`, which tells typescript to actually type check them.
    "types": [
      "vite/client" // Supports Vite's `import.meta.env`
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

从这个配置文件继承：

{
  "compilerOptions": {
    // Base options / sensible defaults that we want to pretty universally apply across all of our services
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

赞(0）回复(0）举报 5个月前

bnl4lu3b5#

看起来在HelloWorld.vue中定义的props与在App.vue中使用的props类型不匹配。你需要确保传递给HelloWorld组件的props与预期的props相匹配。

赞(0）回复(0）举报 5个月前

hmae6n7t6#

在Vue3中，我们将v-on:xxx转换为onXxx,并将其作为prop传递给需要进行类型检查的emit。Vue3会自动将事件转换为props,但Vue2不会。仅供参考@ZAID-BAARAB

赞(0）回复(0）举报 5个月前