Props have the incorrect `any` type in JavaScript but have the correct type in HTML template about language-tools

[Lilja]

The options API is not my first choice if I write typescript. The composition API with script setup probably solves this.

[RobbyCBennett]

Okay, that works. I've changed that example with the Vue Options API into the Vue Composition API.

<template>
	<div>
		<span>{{ propNumber }}</span>        <!-- correct type -->
		<span>{{ dataNumber }}</span>        <!-- correct type -->
		<span>{{ computedNumber }}</span>    <!-- correct type -->
		<span :text='propNumber'></span>     <!-- correct type -->
		<span :text='dataNumber'></span>     <!-- correct type -->
		<span :text='computedNumber'></span> <!-- correct type -->
	</div>
</template>

<script setup>
	// @ts-check

	import * as vue from 'vue';

	const props = vue.defineProps({
		propNumber: {
			type: Number,
			required: true,
		},
	});
	const propNumber = vue.ref(props.propNumber);

	const dataNumber = vue.ref(1 + 2);

	const computedNumber = vue.computed(() => {
		return 1 + 2;
	});

	vue.onMounted(() => {
		propNumber.value;     // correct type
		dataNumber.value;     // correct type
		computedNumber.value; // correct type
	});
</script>