Vueのpropsで複数の型を許容する

Vueのpropsでunion typesを使いたいとき指定について自分の認識がちょっと怪しかったのでまとめる。

プロパティ — Vue.js

propsで複数の型の指定をしたいときは以下のようにする。

props: {
  hoge: {
    type: [String, Number],
    required: true
  }
}

これでhogeはstring | numberと解析される。

[String, Number]と書くと固定長配列の型定義のように思えてしまう。

TypeScriptの型入門 - Qiita

タプル型という名前はあんまり耳馴染みがなかったんだけど、TypeScriptだと固定長配列(可変長もいける)の要素の型を定義できる感じ。

const tuple: [string, number] = ['hoge', 1]
const variableLengthTuple: [string, ...number[]] = ['hoge', 1, 2, 3]

同じような書き方なのにこうも意味が違うと頭がこんがらがるので、TypeScriptの世界で統一してほしい……。

分割代入でタプル型にアクセスする方法もあるみたい。

タプル (tuple) | TypeScript入門『サバイバルTypeScript』

const tuple = () => ['hoge', 1, true]
const [hoge, fuga, piyo]: [stirng, number, boolean] = tuple()

// booleanの戻り値しか使わない場合
const [, , piyo]: [string, number, boolean] = tuple()

使わない戻り値の変数への代入は省略できるみたいだけど、[, , piyo]みたいな書き方は初めて見たしなかなか違和感がある。

ちなみにnullとundefinedはすべてのバリデーションを通ると書いてある。なので[String, null]みたいな書き方はできない。

Vueはそもそも型指定にPrimitive Objectを使っているし、さっきも書いたけど普通の(?)TypeScriptの世界で書かせてほしいなあ。