README.Ja

この問題は 6 - Simple Vue の続きです。 先にその問題を解いた上で、そこで得られるコードを基盤にしてこの問題に取り組んでください。

Simple Vue に加え、我々は 新しく props フィールドをオプションとして利用できます。これは Vue の props オプションを更に簡潔にしたものです。利用するにはいくつかのルールがあります。

props は、 this に挿入された各々のフィールドをキーをとして保持するオブジェクトです。挿入された props は data,computed, methods などを始めとした 全ての環境からアクセス可能になります。

prop は コンストラクタ、または コンストラクタを含んだ type フィールドを持つオブジェクトで定義されます。

例)

props: {
  foo: Boolean
}
// or
props: {
  foo: { type: Boolean }
}

これらは type Props = { foo: boolean } であると推測されます。

複数の型を渡した場合、Props の型は ユニオン型として推測されます。

props: {
  foo: { type: [Boolean, Number, String] }
}
// -->
type Props = { foo: boolean | number | string }

空のオブジェクトが渡された場合、対象のkeyは any 型として推測されます。

より具体的なケースについては, Test Cases セクションを参照してください。

Vue の required, default, そして 配列の props はこの問題において考慮されておりません.

<a href="../../README.ja.md" target="_blank"></a> <a href="https://tsch.js.org/213/answer/ja" target="_blank"></a> <a href="https://tsch.js.org/213/solutions" target="_blank"></a> <hr><h3>関連する課題</h3><a href="https://github.com/type-challenges/type-challenges/blob/main/questions/00006-hard-simple-vue/README.ja.md" target="_blank"></a> <!--info-footer-end-->