Vueファイル内の型エラーを減らす

[yamachu]

ref: #1293

の続きをやってみました
vue-tsc を上げればそもそも対応しなくて良いコードも出るのではという仮説のもと上げてみた所、MenuItem の onClick が対応不要になったため、エラーを減らす文脈として vue-tsc のバージョンアップも併せて行っています

内容

npm run typecheck:vue-tsc

で出力されるエラーをより減らします

関連 Issue

スクリーンショット・動画など

# ~/Projects/github.com/yamachu/voicevox $ [type-strict]
 npm run typecheck:vue-tsc

> [email protected] typecheck:vue-tsc
> vue-tsc --noEmit

src/components/MenuBar.vue:11:8 - error TS2322: Type '{ type: "separator"; label?: string | undefined; } | { type: "root"; label?: string | undefined; onClick?: (() => void) | undefined; subMenu: ({ type: "separator"; label?: string | undefined; } | ... | { ...; } | { ...; })[]; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; } ...' is not assignable to type 'MenuItemData'.
  Type '{ type: "root"; label?: string | undefined; onClick?: (() => void) | undefined; subMenu: ({ type: "separator"; label?: string | undefined; } | ... | { type: "button"; label?: string | undefined; onClick: () => void; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; } | { ...; }...' is not assignable to type 'MenuItemData'.
    Type '{ type: "root"; label?: string | undefined; onClick?: (() => void) | undefined; subMenu: ({ type: "separator"; label?: string | undefined; } | ... | { type: "button"; label?: string | undefined; onClick: () => void; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; } | { ...; }...' is not assignable to type 'MenuItemRoot'.
      Type '{ type: "root"; label?: string | undefined; onClick?: (() => void) | undefined; subMenu: ({ type: "separator"; label?: string | undefined; } | ... | { type: "button"; label?: string | undefined; onClick: () => void; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; } | { ...; }...' is not assignable to type '{ onClick?: (() => void) | undefined; subMenu: MenuItemData[]; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; }'.
        Types of property 'subMenu' are incompatible.
          Type '({ type: "separator"; label?: string | undefined; } | { type: "root"; label?: string | undefined; onClick?: (() => void) | undefined; subMenu: ({ type: "separator"; label?: string | undefined; } | ... | { ...; } | { ...; })[]; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; }...' is not assignable to type 'MenuItemData[]'.
            Type '{ type: "separator"; label?: string | undefined; } | { type: "root"; label?: string | undefined; onClick?: (() => void) | undefined; subMenu: ({ type: "separator"; label?: string | undefined; } | ... | { ...; } | { ...; })[]; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; } ...' is not assignable to type 'MenuItemData'.
              Type '{ type: "root"; label?: string | undefined; onClick?: (() => void) | undefined; subMenu: ({ type: "separator"; label?: string | undefined; } | ... | { type: "button"; label?: string | undefined; onClick: () => void; icon?: string | undefined; disabled?: boolean | undefined; disableWhenUiLocked: boolean; } | { ...; }...' is not assignable to type 'MenuItemData'.

11       :menudata="root"
          ~~~~~~~~



Found 1 error in src/components/MenuBar.vue:11

14a4f76

の対応で上記のエラーも解決

その他

satisfies を使ってみようかなと TS 4.9 を入れてみたら更にエラーが増えました…
メモ: FIXMEがついているMenuItem.vueのgetMenuBarHotkeyの箇所

[yamachu]

ちょこっと調査してみたところ、

export type MenuItemCheckbox = MenuItemBase<"checkbox"> & {
-  checked: ComputedRef<boolean>;
+  checked: boolean;
  onClick: () => void;
  disabled?: boolean;
  disableWhenUiLocked: boolean;
};

にすると解決するっぽい感じでした（Vue詳しくないんだけど、これなんでなんですかね…）

で、現時点 MenuBar component では checkbox を使用していないようです
一旦この型を消し飛ばすだとかすれば型のエラーは全て解消しそうですが、どういう方針にしましょうか

[Hiroshiba]

未使用であれば一旦消してしまっても良いのかなと思いました！

[yamachu]

# ~/Projects/github.com/yamachu/voicevox $ [type-strict]
 npm run typecheck:vue-tsc

> [email protected] typecheck:vue-tsc
> vue-tsc --noEmit

現時点の状態だと型エラー排除完了 🚀

GitHub Actionsのtest workflowに追加すると project-s ブランチのテスト周りが通らなくなるんじゃないかなと思い、追加するのを躊躇しています…

[y-chan]

LGTM！
helperのテストもしっかり整備していただいてありがとうございます...!:pray:

[Hiroshiba]

ほぼLGTMです！！

VOICEVOXのコードはわりとnullとundefinedが混じってしまっているので、undefinedだけでなくnullableを想定したほうが良いかも？とちょっと思いました。どうでしょう。。
（undefinedToDefault　→　nullableToDefault　みたいな）

[yamachu]

VOICEVOXのコードはわりとnullとundefinedが混じってしまっているので、undefinedだけでなくnullableを想定したほうが良いかも？とちょっと思いました。どうでしょう。。

うーん、これに関しては分けた方がいい気がします

というのもundefinedはたとえばMapから引っ張ってきてなかった、とか、そもそも定義されてなかったみたいなケースで使って、nullって明示的にこの状態をnullにしている、っていう時を想定して使う…と思うんですね（このprojectだとどういう扱いにする、みたいの明示していたか記憶にないので、実体験から書いています

そうやって表現したい状態が違うものを同じ関数で扱うようにすると、例えば途中でnullを返す処理が入った時にdefault値が返ったりするわけですが、それはnullの時に表現したいものだったのか？と考えなくてはならなそうなので…
であれば最初っから扱えないようにする、みたいな方が良かったりしそうだなと思いました

[yamachu]

#1035

undefinedやnullについての扱いどうしようか悩んでいるIssueがあったのでメモがてらはっておこう

[Hiroshiba]

なるほどです。プロジェクトとしてどちらも許容されているのが良くないなと思いました！
とりあえず===undefinedで！

[Hiroshiba]

LGTM！！