Determinable Union Types

I use one type, but there were cases where this type is used as A in some cases and B in some cases

It is very inconvenient because if you create a type for each case, there are many parameters to pass.

So, I want to make the last component to use the type to check the union type and decide which type to use

This can be solved by using a union type that can be determined

Refer to the example I used

Reference

https://codesandbox.io/p/devbox/ctnh9p?file=%2Fsrc%2Fcomponents%2FUser.vue%3A12%2C33

https://typescriptbook.jp/reference/values-types-variables/discriminated-union