Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue 2.7 strictTemplates error #13104

Open
xiaoxiangmoe opened this issue Oct 17, 2023 · 6 comments · Fixed by vuejs/language-tools#3674 · May be fixed by #13133
Open

Vue 2.7 strictTemplates error #13104

xiaoxiangmoe opened this issue Oct 17, 2023 · 6 comments · Fixed by vuejs/language-tools#3674 · May be fixed by #13133
Labels

Comments

@xiaoxiangmoe
Copy link
Contributor

xiaoxiangmoe commented Oct 17, 2023

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

@so1ve
Copy link
Member

so1ve commented Oct 17, 2023

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

@johnsoncodehk
Copy link
Member

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

@LinusBorg LinusBorg transferred this issue from vuejs/language-tools Oct 23, 2023
@LinusBorg LinusBorg reopened this Oct 23, 2023
@so1ve
Copy link
Member

so1ve commented Nov 15, 2023

? Are you GPT?

@anden-akkio
Copy link

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

@zcf0508 zcf0508 linked a pull request Dec 15, 2023 that will close this issue
13 tasks
@ZAID-BAARAB
Copy link

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.

@so1ve
Copy link
Member

so1ve commented Jan 21, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
6 participants