Fallthrough attributes are recognized as errors

[Under-estimate]

Volar plugin version v1.4.2 Fallthrough attributes are recognized as errors (title attribute in the following code):

<el-button title="edit note"></el-button>

vscode error:

Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{ readonly type: EpPropMergeType<StringConstructor, "" | "default" | "success" | "warning" | "info" | "primary" | "danger" | "text", unknown>; ... 12 more ...; readonly autofocus: boolean; }> & Omit<...>'.
  Property 'title' does not exist on type 'IntrinsicAttributes & Partial<{ readonly type: EpPropMergeType<StringConstructor, "" | "default" | "success" | "warning" | "info" | "primary" | "danger" | "text", unknown>; ... 12 more ...; readonly autofocus: boolean; }> & Omit<...>'.ts(2322)

screenshot:

[johnsoncodehk]

I can't reproduce this problem, please provide minimal reproduction.

[Under-estimate]

Here is a minimal reproduction example, run npm install and the error will appear in src/App.vue：https://github.com/Under-estimate/VueExample

[johnsoncodehk]

This seems to be expected behavior of jsx, can you remove "jsxTemplates": true in tsconfig?

[Under-estimate]

That solves the problem, thanks a lot!

[minikinl]

The same error:

// Inputty.tsx

{
  setup() {
    return () => <input />;
  },
}

*There is no jsxTemplate option in tsconfig.*.json*

vue@3.2.41 vite@3.1.8

Name: Vue Language Features (Volar) Id: Vue.volar Description: Language support for Vue 3 Version: 1.6.0 Publisher: Vue VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Vue.volar

Name: TypeScript Vue Plugin (Volar) Id: Vue.vscode-typescript-vue-plugin Description: Vue Plugin for TypeScript server Version: 1.6.0 Publisher: Vue VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin

[minikinl]

solved by env.d.ts:

/**
 * for vue components
 * https://github.com/vuejs/language-tools/issues/1077
 */
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any;
  }
}

export {}

thanks.

but may be there is some better way for ths issue.

[coader]

/**
 * for vue components
 * https://github.com/vuejs/language-tools/issues/1077
 */
declare module '@vue/runtime-core' {
  interface AllowedComponentProps {
    [key: string]: any;
  }
}

export {}

I have add this code, but still get error

[coader]

also custom directive show error after upgrade to 1.6 have to downgrade to 1.2 one more time

[minikinl]

are you sure not missing export {}在 2023年4月27日，下午9:56，progame @.***> 写道：

/**

• for vue components
• https://github.com/vuejs/language-tools/issues/1077 */ declare module @.***/runtime-core' { interface AllowedComponentProps { } }

export {}

I have add this code, but still not works

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[romansp]

Should this be reopened? I'm still experiencing it in .tsx files with vue-tsc 1.6.0. Please see minimal repro here https://github.com/romansp/volar-repro-2671

Also to mention that it started in v1.4.1 of vue-tsc so reverting to 1.4.0 helps. https://github.com/vuejs/language-tools/compare/v1.4.0...v1.4.1

// App.tsx
import ButtonLink from './components/ButtonLink.vue'

const App = 
  <ButtonLink text="My Link" title="My Title" />

export default App;

<script setup lang="ts">
// ./components/ButtonLink.vue
defineProps<{
  text: string
}>()
</script>

<template>
  <button title="Button Title">
    {{ text }}
  </button>
</template>

vue-tsc --noEmit error

src/App.tsx:4:30 - error TS2322: Type '{ text: string; title: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ text: string; }>>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
  Property 'title' does not exist on type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ text: string; }>>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.

4   <ButtonLink text="My Link" title="App Title" />
                               ~~~~~

Found 1 error in src/App.tsx:4

typescript: 5.0.4
vue-tsc: 1.6.0 (takeover mode)

[johnsoncodehk]

@romansp thanks for the repro case, but I think it is expected behavior, you can reproduce it in regular ts code.

import { defineComponent } from 'vue';

const ButtonLink = defineComponent({
  props: { text: { type: String, required: true } }
});

const App =
  <ButtonLink text="My Link" title="My Title" />

export default App;

[romansp]

@johnsoncodehk Wow, okay. Odd that it used to work correctly in 1.4.0 and before. Looks like template type check became more strict?

So is there a recommended solution for this problem while still keeping type-checks for component-defined props?

[LiZhequ]

@johnsoncodehk Wow, okay. Odd that it used to work correctly in 1.4.0 and before. Looks like template type check became more strict?

So is there a recommended solution for this problem while still keeping type-checks for component-defined props?

Merging IntrinsicAttributes declaration can solve it

namespace JSX {
  export interface IntrinsicAttributes {
    [name: string]: any
  }
}

[coader]

now I have to use any object to pass fullthrough attribute, otherwise it can't be compiled:

const tag = ( <NTag {...{contenteditable:'false'} as any}> {item.title} )