Question about Specifying Prop Types in Vue 3 with defineProps in JavaScript

[seul15]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNVE1v2zAM/SuCL82wVEaX9eKlxbauhw37KNbe5mFwLCZRI0uCRCctgvz3UXL9sdYtdjEs8j2RfCK5Tz5Yy7c1JFky96WTFpkHrO15rmVljUN2Y4T5Kj2ypTMVyxOetpbAy5N3HXLPjP5mao0gpg6KEuUW2KHlteBcK0CGnp0xDTv2qUCYvOIrwBtZ0V9ElEZTQI/kI1h712TP8CF0xn7lmlFEKTK6axodGUVZyA2FmbLSVJbiALmXhfKUx3RIYK/ZSU/aFWrziISuHuG86TllsRwN9IQz6zlRgrHccv370FTeKTiZvGJn52wfbmvkWBiDHl1hL66vSRVhyroCjbwkfRAuFYTT5EhJvTkKl7F/GNyBItaRx3sFfg2AR08xawfLAFojWp+laSk0v/UClNw6rgFTbau0Y7w/5TM+SwW9R1p63zt4JTUnSxOhS3QNheCFtaDFxVoqMRnGDhlHDeZp04fUgXRAIK2oPDoxNhdyS8Ke5QndkiesVIX3dCJ9sJAaXJ5E3AOycxdOsPA5XhhxzxarYyVXa+zAj+AoUdE7nWdZ7H0Vep+mZE6Fbtvrh//joQQsi1phG9cJcKS7fy5ol94AQJB21HoTY1k7BESLI8JbQ570uLSPM5p4+zdPBxLnOpkm6EnPpVzRyxtNeyG2YBC5slKB+2FRUj/mSdY0Z/AVSpndl2gLgxNHIHLWUG5G7Lf+Ltjy5MqBB7cNY9H6sHC0DBr35fV3uKP/zlkZUYfHecH5E7xRdcixgX2staC0B7iY7ee4s6Re3fjLOwTt26JCogHZDHIc2osXSu/TnfG3kUd9TCoOl+TIcm1G2jpjwyKkZqH2vQqnwZJjT+dhdCLaHnJm98wAGDVoq/2+DXCgXP+jK6iaP1twQSGqZMZP+cksOfwFedAP9g==

Steps to reproduce

In the parent component, I binded the state.todoList data to the child component via props.
In TodoList.vue, I used the defineProps function to define the props without specifying a type.
But running the project, a reference error occurs.

What is expected?

The todoList data, which is a prop, should be displayed through {{todoList}} in the section.

What is actually happening?

System Info

Any additional comments?

I modified the code as follows:
const props = defineProps({ todoList : "" })
After this modification, the expected result was displayed without any errors or warnings. However, JavaScript doesn’t enforce type validation like TypeScript does, and the data from App.vue is clearly passed to the child component.
So, I’m not sure why it’s necessary to specify the type of props in JavaScript.

[jacekkarczmarczyk]

https://vuejs.org/guide/components/props.html#props-declaration

defineProps(['todoList'])
//or
defineProps({ todoList: Array })

[pdsuwwz]

@seul15 I have written two Playground, one using typescript and the other using JavaScript.

You can choose whatever you want to use:

JavaScript: Playground

const props = defineProps({
  todoList: {
    type: Array,
    default: () => []
  }
});

TypeScript: Playground

import { PropType } from 'vue';

interface TodoItem {
  id: number
  todo: string
  completed: boolean
}

const props = defineProps({
  todoList: {
    type: Array as PropType<Array<TodoItem>>,
    default: () => []
  }
});