javascript - TypeScript ile Nuxt.js'te arayüzlerle prop doğrulama
Nuxt.js (Vue.js v2 dahil) ve TypeScript kullanarak bir web sitesi inşa ediyorum. Bileşenlere props aracılığıyla geçilen verilerin doğru yapıya sahip olup olmadığını kontrol etmek için interface kullanmak istiyorum. Ne yazık ki, TypeScript hiçbir şeyi kontrol etmiyor gibi görünüyor. Yanlış veriyi bileşene geçirmeme rağmen 'hiçbir sorun yok' görünüyor. İşte bir örnek.
Temel bileşendeki veriler:
data() {
return {
dropdownData: [
false, // enforced wrong type
{
title: 'Title',
subtitle: 'Subtitle',
},
],
};
}
Verilerin aktarıldığı bileşen:
<script lang="ts">
import Vue, { PropType } from 'vue';
import { DropdownDataInterface } from '~/interfaces/DropdownDataInterface';
export default Vue.extend({
props: {
dropdownData: {
type: Array as PropType<Array<DropdownDataInterface>>,
required: true,
},
},
});
</script>
Ve arayüz:
export interface DropdownDataInterface {
title: string,
subtitle: string,
}
Benim .tsconfig.json dosyam şöyle görünüyor:
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM",
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*",
],
"@/*": [
"./*",
],
},
"types": [
"@nuxt/types",
"@nuxtjs/axios",
"@nuxtjs/auth-next",
"@types/node",
"nuxt-i18n",
],
},
"exclude": [
"node_modules",
".nuxt",
"dist",
],
}
Çok teşekkürler!