Open 2-5 opened 2 years ago
For now, just use ?:
in the prop type to make the prop optional. Also allows for rhe prop to be undefined.
const props = defineProps<{
modelValue?: number
}>();
That's what I originally tried, but I also have "exactOptionalPropertyTypes": true
in my tsconfig.json
(https://devblogs.microsoft.com/typescript/announcing-typescript-4-4-beta/#exact-optional-property-types) and I get vue-tsc
errors:
Type '{ modelValue: number | undefined; }' is not assignable to type
'Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ modelValue?: number; }>>>
& { "onUpdate:modelValue"?: (value: number | undefined) => any; }
& VNodeProps
& AllowedComponentProps
& ComponentCustomProps, never>' with 'exactOptionalPropertyTypes: true'.
Consider adding 'undefined' to the types of the target's properties. ts(2375)
If I add | undefined
, it still doesn't work:
const props = defineProps<{
modelValue?: number | undefined
}>();
Type '{ modelValue: number | undefined; }' is not assignable to type
'Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ modelValue?: number | undefined; }>>>
& { "onUpdate:modelValue"?: (value: number | undefined) => any; }
& VNodeProps
& AllowedComponentProps
& ComponentCustomProps, never>' with 'exactOptionalPropertyTypes: true'.
Consider adding 'undefined' to the types of the target's properties. ts(2375)
This could be a vue-tsc
bug, I'm not sure.
When and where exactly is that error being raised? Do you also get an error in VSCode/your IDE?
As an experiment, try this please:
const props = defineProps<{
modelValue?: number | undefined
'onUpdate:modelValue'?: undefined | (value: number | undefined) => any
}>
and don't use defineEmits()
I'd suspect that vue(-tsc) has a problem with the event prop generated from the defineEmits rather than the modelValue prop, as that one is missing the undefined
in the ts error message.
I get the errors both in VS Code with Volar when the file is open and when running npx vue-tsc -noEmit
in the terminal in a vite
based project.
I tried your changes, I still get type errors.
Volar:
Type '{ modelValue: number | undefined; }' is not assignable to type
'Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ modelValue?: number | undefined; "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined; }>>>
& VNodeProps
& AllowedComponentProps
& ComponentCustomProps, never>' with 'exactOptionalPropertyTypes: true'.
Consider adding 'undefined' to the types of the target's properties. ts(2375)
npx vue-tsc -noEmit
:
error TS2375: Type '{ modelValue: number | undefined; }' is not assignable to type
'IntrinsicAttributes
& Partial<{}>
& Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ modelValue?: number | undefined; "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined; }>>>
& VNodeProps
& AllowedComponentProps
& ComponentCustomProps, never>' with 'exactOptionalPropertyTypes: true'.
Consider adding 'undefined' to the types of the target's properties.
Type '{ modelValue: number | undefined; }' is not assignable to type
'Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ modelValue?: number | undefined; "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined; }>>>
& VNodeProps
& AllowedComponentProps
& ComponentCustomProps, never>' with 'exactOptionalPropertyTypes: true'.
Consider adding 'undefined' to the types of the target's properties.
Types of property 'modelValue' are incompatible.
Type 'number | undefined' is not assignable to type 'number'.
Type 'undefined' is not assignable to type 'number'.
The problem also appears with simple properties, so it's not modelValue
specific:
Okay, so I can kinda reproduce this, but a full repro from your side in a github repo would be apprechiated to make sure we are looking at the same things.
I have:
exactOptionalPropertyTypes: true
in my tsconfigvue-tsc
(0.40.1)This is HelloWorld.vue ...:
const props = defineProps<{
msg?: string | undefined;
}>();
This is what I have in the parent's state:
import { ref, Ref } from 'vue'
const nameRef: Ref<string | undefined> = ref("Tom");
let name: string | undefined = "Tom";
Both, when used for msg
, will throw the error.
I think it is because the type generated for the props object that will be passed to the child is:
{
msg: string | undefined
}
while the type from the child component is:
{
msg?: string | undefined
}
So we could get rid of the question mark, but then we can't leave the prop completely absent in the parent.
Not sure if this needs to be solved in Vue core, our JSX types or vue-tsc?
/cc @pikax @johnsoncodehk What do you think?
In plain TypeScript there is no problem with leaving the question mark in, so it is related to Vue & co somehow. There are no reported errors in the code below with exactOptionalPropertyTypes: true
// test.ts
interface Props {
required: string
optional?: string | undefined
}
const p1: Props = { required: "req", optional: "opt" }
const p2: Props = { required: "req", optional: undefined }
const p3: Props = { required: "req" }
let optional: string | undefined = "opt"
const p4: Props = { required: "req", optional }
export { p1, p2, p3, p4 }
That's because in your example you are essentially casting all 4 objects to be of type Prop
. They don't have their own explicit type that could clash with your : Props
annotation.
I think what happens in this issue is more like this (pseudocode, and a bit backwards):
interface PropsExtractedFromParentTemplate {
msg?: string | undefined
}
interface PropsFromChildComponentDef {
msg: string | undefined
}
const propsFromParent: PropsExtractedFromParentTemplate = {
msg: 'Tom'
}
propsFromParent.msg
function ChildComponent(props: PropsFromChildComponentDef) {
props.msg
}
ChildComponent(propsFromParent) // will error
I would say having | undefined
or ?:
on a prop should generate basically the same code, because in vue
if a prop is declare it will be always available.
I think this problem is related with the generation of the code when using script setup
and Volar
.
@pikax So there's two layers to this:
optional?:
prop generates a proper runtime prop definition, while a prop with x | undefined
doesn't. The PR that was already submitted seems to fix this.exactOptionalPropertyTypes
is being used. This has to be solved in Volar.Would you agree?
For Volar/vue-tsc, please track https://github.com/johnsoncodehk/volar/issues/1798.
There are one more problem: Type definitions of native elements.
For example, this simple component from Nuxt Content has type error with exactOptionalPropertyTypes
option, because in this component width
can be undefined while native img
's width
prop has optional non-undefined Numberish
type. (under this TS option, optional and allowing undefined is different)
This problem can't be resolved without modifying native types in packages/runtime-dom/types/jsx.d.ts
, so I suggest adding | undefined
to all optional props.
ref: https://github.com/vuejs/core/issues/6068
For your reference, in the type definition of react, all optional props has | undefined
to support exactOptionalPropertyTypes
.
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54352
The linked PR (https://github.com/vuejs/core/pull/6533) does solve the issue for me.
Maybe it can be looked at and merged in?
Any progress on this issue?
Bump - I also have this issue
Here's what works for me now
<script setup lang="ts">
import {ButtonHTMLAttributes} from 'vue';
defineProps<ButtonHTMLAttributes>();
</script>
<template>
<button :type="type ?? 'button'">
<slot />
</button>
</template>
Here's what I expect to work
<script setup lang="ts">
import {ButtonHTMLAttributes} from 'vue';
withDefaults(defineProps<ButtonHTMLAttributes>(), {type: 'button'});
</script>
<template>
<button :type="type" >
<slot />
</button>
</template>
Error caused
error TS2379: Argument of type '{ type: "button" | "reset" | "submit" | undefined; class: string; }' is not assignable to parameter of type 'ButtonHTMLAttributes & ReservedProps & Record<string, unknown>' with 'exactOptionalPropertyTypes: true'.
Consider adding 'undefined' to the types of the target's properties.
Type '{ type: "button" | "reset" | "submit" | undefined; class: string; }' is not assignable to type 'ButtonHTMLAttributes' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
Types of property 'type' are incompatible.
Type '"button" | "reset" | "submit" | undefined' is not assignable to type '"button" | "reset" | "submit"'.
Type 'undefined' is not assignable to type '"button" | "reset" | "submit"'.
Vue ButonHTMLAttributes Interface for reference
export interface ButtonHTMLAttributes extends HTMLAttributes {
autofocus?: Booleanish;
disabled?: Booleanish;
form?: string;
formaction?: string;
formenctype?: string;
formmethod?: string;
formnovalidate?: Booleanish;
formtarget?: string;
name?: string;
type?: 'submit' | 'reset' | 'button'; // It feels like adding | undefined here will suppress the error ?
value?: string | string[] | number;
}
Bump!
It seems to be impossible to use exactOptionalPropertyTypes
with withDefaults
for only the optional props.
If you are lucky and have Vue 3.5+, you can use the new Reactive Props Destructure.
<script setup lang="ts">
import type { ButtonHTMLAttributes } from 'vue';
interface Props extends ButtonHTMLAttributes {}
const { type = 'button' } = defineProps<Props>();
</script>
<template>
<button :type>
<slot />
</button>
</template>
Vue version
3.2.37
Link to minimal reproduction
https://sfc.vuejs.org/#eNqdUzuP1DAQ/itWqpx0iREnhBSyuaUAiQaoqNxkk9nFt/FDfgShkP/OOE72QnK6gs6eGX+PmfGQfNQ67z0kRVI6ELqrHVRMElJ+kdq7r16cwJA+E6qF7sCSvu48sITQWKSrYSBTjDw+EpZ42cIZ0+NYUh1LTt45Jcmx6XhzXRDIgbx7w5Lq27WksQCLS7pSgFfbGK4dseC8Jl0tL/jaWXzFJBdaGUcGYuBMRnI2SiA7+mDJLbk2MBfkdBUMtkM5k42S1s02DgGylPHZHzIZ4hLaKr0d7z4ErVEdaknuk8iYiVrnT1ZJbOYQvLM5gZoLMkVCbKIt8PDTOW0LSr3U10veKEGPmKPGS8cFZK0Sx4f8bf7wnrbcunU8Byuyk1G/LNp4Qvj7FTjFYA8mM4CCDZhXyTa1/xBucjvSwDkyOWIDNm3dbxMPBas9arxBXPdjXif3WwNGY9vn9fqfdUBfyAPtbieWIWujtMUhx1F+D7dymswkbJJTkP300WWVhrkvOCC4u8F8wssMk+Jz/Aa6RdnFMyZOKO7XS+B3BekV33Ose4Rci7d0IrqAS/HhHm1ZNIN9MjIazp+VID5ObdoX7GS6FWWd4fLygroFdvklujYWPneqnjGC8JAPjUlf60AsDArG7Uca/wK66Je8
Steps to reproduce
See reproduction link for full example.
I declare a property which allows
undefined
:and actually pass
undefined
:What is expected?
Vue doesn't emit runtime errors for explicitly allowed and used
undefined
properties.What is actually happening?
I get the following Vue runtime error in
dev
modeThis is because the SFC compiler emits the following property declaration. Note how
null
was used instead ofundefined
:If I modify the generated code and runtime like below (see
<<<
and>>>
), to allowundefined
, it seems to work correctly. But I don't understand if there are other reasons for not allowingundefined
to be arequired
property value:System Info
Any additional comments?
I'm using
undefined
when a value is not set by the user, for example empty number<input>
or unselected<select>
, as I understood to be current recommended practices: