How to prevent the mutation of nested prop fields in Vue 3, using TypeScript?

Question

Suppose I have the following SFC component:

<script setup lang="ts">
export interface Person {
  name: string;
}

const props = defineProps<{
  person: Person;
}>();

function onClick(): void {
  props.person.name = 'Joe'; // mutate nested field
}
</script>

<template>
  <button @click="onClick">Click</button>
</template>

How can I prevent the mutation of the nested prop field?

oluroyleseyler · Accepted Answer · 2023-05-23T10:47:54.273

0

you can use the readonly modifier to make the props readonly. This will ensure that the props cannot be mutated within the component.

<script setup lang="ts">
export interface Person {
  name: string;
  address: {
    city: string;
    street: string;
  };
}

type DeepReadonly<T> = {
  readonly [K in keyof T]: DeepReadonly<T[K]>;
};

const props = defineProps<{
  person: DeepReadonly<Person>;
}>();

function onClick(): void {
  // TypeScript error: Cannot assign to 'name' because it is a read-only property
  props.person.name = 'Joe';

  // TypeScript error: Cannot assign to 'city' because it is a read-only property
  props.person.address.city = 'New City';
}
</script>

<template>
  <button @click="onClick">Click</button>
</template>

edited May 23 '23 at 10:47

answered May 23 '23 at 10:14

oluroyleseyler

802
2
5

This works for the first level only, further nested levels are still mutable. Any way to make it work for all levels? – rodrigocfd May 23 '23 at 10:30
you can use DeepReadonly like my edited code, that way all nested props would be okay – oluroyleseyler May 23 '23 at 10:48
[This implementation](https://stackoverflow.com/a/58993872/6923555) of deep readonly is more comprehensive, but other than that, your solution works. Thank you. – rodrigocfd May 23 '23 at 10:55
Consider freeze and deep freeze – Aluan Haddad May 23 '23 at 18:18

How to prevent the mutation of nested prop fields in Vue 3, using TypeScript?

1 Answers1