<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Also seeing something similar. <div class="highlight highlight-source-shell notran

In volar we convert v-on:xxx to <code class="notransl

Vue 2.7 strictTemplates error about vue HOT 6 OPEN

xiaoxiangmoe commented on April 28, 2024

Vue 2.7 strictTemplates error

from vue.

Comments (6)

johnsoncodehk commented on April 28, 2024 1

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

from vue.

so1ve commented on April 28, 2024

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

from vue.

so1ve commented on April 28, 2024

? Are you GPT?

from vue.

anden-akkio commented on April 28, 2024

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

from vue.

ZAID-BAARAB commented on April 28, 2024

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.

from vue.

so1ve commented on April 28, 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

from vue.

Recommend Projects