typescript pure type define in [defineProps] with custom type lead to error #30
Description
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 }>()
Thankyou!