PropOptions の話

社内のフロントエンドエンジニアが集まる定例で「PropOptions っていうのがあって PropType とどっちを使っていったほうがいいんですかね？」という話題が出てきて、そもそも PropOptions を知らなかった。

Nuxt.js TypeScript - 実践 TypeScript アップデート - - Qiita

最新の Nuxt.js + TypeScript を最低限の状態で試す

Options API を使用して Nuxt.js + TypeScript で Vuex に型指定する方法（nuxt-typed-vuex） | スマートショッピング

ググっていくつか記事を見てみたけど、PropOptions 自体を解決しているような感じではなかった。

@vue/composition-api の型定義を見てみると、

declare type DefaultFactory<T> = () => T | null | undefined
interface PropOptions<T = any, D = T> {
  type?: PropType<T> | true | null
  required?: boolean
  default?: D | DefaultFactory<D> | null | undefined | object
  validator?(value: unknown): boolean
}
declare type PropType<T> = PropConstructor<T> | PropConstructor<T>[]
declare type PropConstructor<T> =
  | {
      new (...args: any[]): T & object
    }
  | {
      (): T
    }
  | {
      new (...args: string[]): Function
    }

こんな感じだった。

defineComponent で props を定義するときの type や required などの型があるので、PropOptions で型アサーションを実装すればいいのかな？と思いきや、社内のエンジニアの人が色々試しに定義してみたところ、required: trueにしてもObject is possibly 'undefined'.と怒られるらしく、どう使えばいいのかよく分からない。

おとなしく PropType 使ったほうがいいのだろうか。。。

謎バグの話

入力フォームをクリックするとなぜか Chrome の onBeforeunload で出てくる「このサイトを離れますか？」っていうダイアログが出てくる。原因調査をしているんだけど本当に原因が全然分からなくて難しい。