Hey there, I'm currently exploring the Vue composition API along with Typescript.
I'm facing an issue where I am not receiving any errors when an interface does not align with the specified types for that interface.
Although my IDE provides auto suggestions and everything seems to work fine, mismatches like passing a number to a string type go unnoticed during compilation.
Below is a simple example:
Vue file:
<template>
<div class="flex flex-col">
<h1 class="flex justify-center">Test View</h1>
<TestComponent
:dataset="{
strCustomerName: 12345,
}"
/>
</div>
</template>
<script setup lang="ts">
import TestComponent from "@/components/TestComponent.vue";
</script>
The above Vue file imports a component and passes an object named dataset along with it.
Test component:
<template>
<h1 class="text-9x1 flex">Hello {{ props.dataset.strCustomerName }}</h1>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
type FormType = {
strCustomerName: string;
};
interface FormProperties {
dataset: {
type: FormType;
required: true;
};
}
const props = defineProps<FormProperties>();
console.log("We are props: ", props.dataset);
</script>
In this test component, I specify to Vue that I expect a dataset object to be passed as a property in FormProperties. I also define the structure of the object using FormType. However, the problem arises when a number is passed instead of a string without any error being thrown. Even if a key that is not defined in FormType is passed, no error is generated.
So why am I not getting errors for incorrect types or undefined keys? Is this the expected behavior or is there a way to rectify this?