How to use `null` to define an empty ref in Vue 3 & TypeScript?

Question

I am using Vue 3 and TypeScript with the script setup tag (<script setup lang="ts">.

And I often have a ref inside a composable that looks like this:

const composableMessage = ref<string | null>(null);

It's a string or a number or something with an inital "empty" value. And I am intentionally using null instead of undefined to define "empty" because I prefer it.

Then I have a child component with a prop that looks like this:

defineProps({
  messageProp: {
    type: String,
    required: false,
    default: '',
  },
});

And when using it in a parent component like this:

import myComposable from '/src/composables/myComposable';
const { composableMessage } = myComposable();
<my-component :messageProp="composableMessage" />

I get this TypeScript error on :messageProp:

Type 'string | null' is not assignable to type 'string | undefined'.
  Type 'null' is not assignable to type 'string | undefined'.ts(2322)

If I use const composableMessage = ref<string | undefined>(undefined); the TypeScript error goes away, but I would much rather keep it as null.

Why am I forced into using undefined for empty refs?

Is there a way around this?

joakimriedel · Accepted Answer · 2022-02-11 13:03:23Z

4

It's the other way around, your messageProp accepts only string or undefined due to the required: false, but you try to send it string or null.

The link I sent as comment VueJS Using Prop Type Validation With NULL and 'undefined' Values? does not seem to work with Vue3 and Volar/Typescript.

So to accept null you should change the prop type of messageProp as follows

defineProps({
  messageProp: {
    type: String as PropType<string|null>,
    required: false,
    default: '',
  },
});

(note: I do not expect the default value ('') to be set for null, only undefined, so you'd probably need to handle the null value yourself)

(note2: you do not need to write ref<string | undefined>(undefined) you'd get the same Ref<string|undefined> object with ref<string>())

answered Feb 11, 2022 at 13:03

joakimriedel

2,12415 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TinyTiger Over a year ago

Would it make more sense to abandon the use of null in favor of undefined? I guess that would save me having to always use PropType<>. How do you personally define empty refs?

joakimriedel Over a year ago

@TinyTiger during the last few years with Vue it's been very rare to ever use null, mostly due to external APIs declaring properties in a JSON but with null values. I prefer undefined, ie not sending the property (using optional properties in Typescript). But it all boils down to what "empty" is for you. For an empty string I use '', but if it is not set at all I use undefined.

TinyTiger Over a year ago

I think you are right, and I have shifted towards undefined because it works better with optional properties in Typescript and Vue Props.

Collectives™ on Stack Overflow

How to use `null` to define an empty ref in Vue 3 & TypeScript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related