Vue 3: 入力「number|boolean」はタイプ「number」に割り当てることができません。

Question

私は Vue 3 と Comboposition API を使用しており、現在 Typescript をプロジェクトに追加しようとしています。

私は、必要な入力を作成するために呼び出すことができる「グローバル入力」コンポーネントを持っています。次に、コンポーネントは「inputType」プロパティに基づいて別の入力コンポーネントをレンダリングします。たとえば、次のようなグローバル入力を使用できます:

リーリー

InputBlock は次のようになります:

リーリー

私の InputNumber は次のようになります:

リーリー

お気づきのとおり、InputBlock コンポーネントはさまざまなタイプの値を受け取ることができます。これは、値がさまざまな子コンポーネントによって使用されるためです。ただし、各子コンポーネントの value 属性は 1 つの型のみを受け入れることができます。 InputBlock で次のエラーが発生します: Type 'number | boolean' is not assignable to type 'number'. Type 'boolean' is not assignable to type 'number'. .

InputCheck に渡される値が Number|Boolean ではなく Number であることを Typescript に伝える方法をご存知ですか?変数を「強制」または「キャスト」する方法はありますか?それともここで私が何か間違ったことをしているのでしょうか？

Answer 1

typescript は inputType.type と値の型が関連していることを認識していないため、エラーが返されます。

＃＃＃あなたが試すことができます＃＃＃ リーリー

またはこれ

リーリー