Vue3 CompositonAPIのPropsと型推論について

Question

こちらに書いてある通りCompositonAPIでpropsの型を定義していてもsetupの引数にpropsを指定する際には型を記述する必要がない様です。

export type HogePros = {
  huga: number
  piyo: string
}
--------------

 props: {
    huga: {
      type: Number,
      required: true,
      default: '',
    },
    piyo: {
      type: String
      default: null,
    },
}

setup(props: HogePros) {

上記の様に型を指定してもエラーにはなりませんがこれをすると逆に型推論されない様でした。（setup内でprops.まで入力した際にhugaやpiyoの選択肢が出て来ない）
propsとなるオブジェクトにはそもそも型を上記の様に指定しないのが正しい設計なのでしょうか？
とはいえpropsに入る値を制限したい場合propsに型を指定したい事もあるかと思いますがそのような場合はどうするのが良いのでしょうか？

Answer 1

自分もビギナーなので、詳しくは説明できないのですが。

 props: {
    huga: {
      type: Number,
      required: true,
      default: '',
    },
    piyo: {
      type: String
      default: null,
    },

上記をdefineComponent内に記載されているので、これが型指定に該当し、同内setup()での型指定は不要で省略できるのだと思います。

setup(props) {

この用法で候補のメンバーが選択肢として出るかと思います。
ご参考までに。

Comments

[Hayato1201]

ご回答ありがとうございます。
>これが型指定に該当し、同内setup()での型指定は不要で省略できるのだと思います
はい、それはそうなのですが、propsの型としてはHogeProsの様な型を作ってpropsにとる値を制限したい場合はどの様に型を指定すれば良いのでしょうか？

[BlueMoon]

hogeでtype:Number,piyoでtype:Stringを指定されていますね。これが制限に該当すると思います。例えば親コンポーネントにてhogeにstring型を代入したらエラーになると思います。
また、自分の書いたコードではsetup中ではprops.メソッドは書き込み禁止となっています。

[BlueMoon]

補足します。実際にエラーになるのはVisualStudioCode上だけで、コンパイルは通ってしまうようでした。