Skip to content

[BUG] Typescript typings #696

Open
Open
@Indeedornot

Description

@Indeedornot

🐛 Bug description

I'll use this issue to report multiple issues I have found while working with the plugin

  • Lack of typing for vModel
      {/* vModel property is not known - but works */}
      <LogMessages
        vModel={toLog.value}
        // v-model={toLog.value} - works, untyped due to it being looked up on intrinsic attributes and it having a fallthrough case
      />

      {/* Works and is typed */}
      <LogMessages
        onUpdate:modelValue={(e) => (toLog.value = e)}
        modelValue={toLog.value}
      />
  • resolveTypes does not generate typed emits
      {/* Event type is not resolved */}
      <LogInput onLog={(msg) => log(msg)} />

const LogInput = defineComponent(
  (_,
    { emit }: SetupContext<{ log: (msg: string) => void }>// : { emit: { log: (msg: string) => void } } - no difference in typing
  ) => {
    const input = ref('')
    const log = (msg: string) => emit('log', msg);
    return () => (
      <div>
        <input
          vModel={input.value}
          onKeydown={(e) => {
            if (e.key !== 'Enter') return;
            log(input.value);
            input.value = '';
          }}
        />
      </div>
    );
  }
  // #Works with such declaration:
  // {
  //   emits: {
  //     log: (msg: string) => true
  //   }
  // }
  // #Does not work with runtime and resolveTypes
)

used jsx-explorer to check code

  • 'class', 'style' and other passthrough attributes are throwing error even with 'inheritAttrs': true
      <LogMessages
        //class is not found throwing an error
        class=""
      />

    inheritAttrs: true

📝 Steps to reproduce

Create a new tsx repository using create-vue

Reproduction Link: Reproduction

🏞 Desired result

  • Typed vModel based on checking 'onUpdate:modelValue' and 'modelValue' props (and other names)
  • Proper resolving emits type
  • Proper inheritAttrs typing or allowing passthrough of attributes like onClick, class, style and similiar

🚑 Other information

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions