Skip to content
This repository was archived by the owner on Dec 25, 2024. It is now read-only.
This repository was archived by the owner on Dec 25, 2024. It is now read-only.

typescript pure type define in [defineProps] with custom type lead to error #30

Closed
@TrungRueta

Description

@TrungRueta

Hi!

To day i tried implement plugin (v.0.5.4) into my nuxt project. i found a bug:

Follow plugin's readme instruction we had support defineProps.

Follow Vue 3 script setup frc about typescript user, we can define props in component like:

const props = defineProps<{
  foo: string
  bar?: number
}>()

This example work with plugin , but when i try define prop with custom type:

// custom type
export interface DocVersion {
  version: number
}
// component

<script lang="ts" setup>
import { DocVersion } from '~/lib/doc/Doc'

const props = defineProps<{ version?: DocVersion }>()
</script>

<template>
  <div>
    {{ version }}
  </div>
</template>

i got error message on runtime:

[Vue warn]: Invalid prop type: "null" is not a constructor

After research vue3 rfc's document above i found that:

"In dev mode, the compiler will try to infer corresponding runtime validation from the types. For example here foo: String is inferred from the foo: string type. If the type is a reference to an imported type, the inferred result will be foo: null (equal to any type) since the compiler does not have information of external files."

In vue 2 env, { typeName: { type: null } } is not a valid format. Component still working on runtime but error thown out.

Can we have any workaround for now?

Many thank for your plugin!
Trung.


Update:

I think for now, before smart authors update a fix, we can workaround by:

set Vue.config.silent = true to disable all warning. This will disable warning about type:null is not a constructor. Component still working ok in runtime.

My suggest to fix plugin is:
Plugin should compile defienProps + custom type to type:Null or type: Object. this will more correct and avoid mismatch.


update 2

Look like we also can bypass error like this:

const props = defineProps<{ version?: {} & DocVersion }>()

image

Thankyou!

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