お世話になっております
Nuxt.jsのpropsに独自型を設定し、
間違った型のオブジェクトが渡されたらエラーを検出したいと思っています
下記の nuxt-property-decorator の書き方をよく拝見しますが、
こちらは親コンポーネントからこのコンポーネントに間違った型の値を渡しても通ってしまいます
(type Userのageをnumberにしていますが、文字列で渡してもエラーはないようです)
vue
1import { Vue, Component, Prop } from 'nuxt-property-dectorator' 2 3type User = { 4 age: number 5} 6 7@Component 8export default class App extends Vue { 9 @Prop({ 10 type: Object, 11 required: true, 12 }) 13 user!: User 14}
上記の書き方を含めて、ドキュメントに記載のある3つの書き方を試しました
ドキュメントはこちら(https://typescript.nuxtjs.org/ja/cookbook/components/#script)です
・Options API
・Composition API
・Class API
上記3つともファイル内の型は効いていますが(例えばmountedやmethods内で使う時)、
親から渡された時のチェックは厳密にしていないようです
補足として、Nuxt.jsが標準で提供しているtype(String | Number | Boolean | Objectなど)自体は機能しており、
type: Stringのpropsにオブジェクトを渡すとエラーを教えてくれます
Reactの場合なら
ts
1type User = { 2 age: number 3} 4 5type Props = { 6 user: User 7} 8 9const App: React.VFC<Props> = ({ user }) => ( 10 <strong>{ user.age }</strong> 11)
という感じで書いた時、親コンポーネントから間違った型のオブジェクトを渡すとエラーを教えてくれますが、
Nuxt.jsの場合は、こちらは難しい仕様でしょうか?
nuxt-property-decoratorで開発を進めていますが、
Nuxt.jsの仕様という広範で、ご存知の方にご教授いただけますと幸いです!
お手数ですが、よろしくお願いいたします!
あなたの回答
tips
プレビュー