Recently, I delved into Typescript development using Nuxt-ts and Vue 2. My goal was to steer clear of class-style components so I opted for the following approach.
I created my Interfaces in a folder named /types. Whenever I needed to declare a type in a Vue component's data, I would import the type and utilize it within the component.
// types/Fruit.ts
export interface Fruit {
name: string,
color: string,
taste: string
}
// components/FruitComponent.vue
<script lang="ts">
import Vue from 'vue'
import { Fruit } from '@/types/fruits'
export default Vue.extend({
name: 'FruitComponent',
data() {
return {
fruit: {
name: 'apple',
color: 'red',
taste: 'delicious',
wrongParameter: 'this should be an error',
} as Fruit
}
}
})
</script>
An issue arises where the compiler and Visual Code editor overlook errors like the one above.
I anticipated an error message akin to
Object literal wrongParameter is not assigned to type 'Fruit'What is the correct way to handle this and detect such errors?