Vue 2.7 strictTemplates error

[ZHAO Jin-Xiang]

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>

This error come since vue-tsc 1.7.12

[Ray]

@xiaoxiangmoe Seemed to be a vue2 type issue. It doesn't convert emits to props

[Johnson Chu]

@LinusBorg could you help transfer this to vuejs/vue? thanks.

[Ray]

? Are you GPT?

[Anden Acitelli]

Also seeing something similar.

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>

Don't think I'm really doing anything special.

Shim file (removing doesn't seem to change anything):

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

Running type checking with vue-tsc --noEmit with this config file:

{
  "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": {
      "@/*": ["./*"]
    }
  }
}

Inheriting from this config file:

{
  "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
  }
}

[ZAID-BAARAB]

It seems like there is a type mismatch between the props defined in HelloWorld.vue and how it is being used in App.vue. You need to make sure that the props passed to the HelloWorld component match the expected props.

[Ray]

In volar we convert v-on:xxx to onXxx and pass them as props to type-check required emits. Vue3 automatically converts events to props but vue2 doesn't. Just FYI @ZAID-BAARAB