TypeScriptでReactのuseEffectやuseCallbackの第二引数に、条件によって存在しえなくなる型の値を入れたい

Question

困っていること

React ×　TypeScriptでHooksを使っています。
例えば、以下のようにログインが完了ユーザーとそうでないユーザーで型が以下のように分かれる時、

interface LoginUser {
  isLogin: true,
  id: string,
}

interface AnonymousUser {
  isLogin: false,
}

idが変更されたら...という形でuseCallbackやuseEffectを使いたいのですが、
TypeScriptに怒られてしまいます。

const [userState, setUserState] =
  React.useState<LoginUser | AnonymousUser>(USER_INITIAL_STATE)

const hoge = React.useCallback( () => {
  foo()
},[
  userState.isLogin,
  userState.id //ここで怒られる
])

怒られる内容
プロパティ 'id' は型 'AnonymousUser' に存在しません。 ts(2339)

---

型設計が良くないでしょうか？
もしくはuseCallbackやuseEffectを使わずに実装するしかないでしょうか？

エラーが表示され続けているので良い方法で解消したいです。
知識やアイデアがあれば教えていただきたいです。

追記

型を一つにまとめるというアイデアを頂きました。

interface User {
  isLogin: true,
  id?: string,
}

この方法にすると、

if (
 userState.id
 && userState.hoge
 && userState.foo
 && userState.bar
) {
  // userStateを使った何かしらのアクション
}

のような条件分岐が大量に発生してしまうのですが、TypeScriptとはそういうものでしょうか。

型を分ければ、if (userState.isLogin)の1行で済むのでそのようにしたかったのですが諦めた方が良さそうでしょうか。

Answer 1

両方まとめた型として扱ってはどうでしょうか？

interface User {
  isLogin: boolean
  id?: string,
}

省略可能なプロパティは、省略した場合にもundefinedがあるものとして扱われますので、エラーにはなりません。

Comments

[nbys]

早速の回答ありがとうございます！

実は、最初はそのように作っていて、途中で作り替えたんですよね...

というのも、実際には`id`以外にも多くのパラメータが存在しており
型をそのようにすると、コード内に

```TypeScript
if (
userState.id
&& userState.hoge
&& userState.foo
&& userState.bar
) {
// userStateを使った何かしらのアクション
}
```

のような条件分岐が大量に発生してしまうのですが、TypeScriptとはそういうものですかね？

型を分ければ、`if (userState.isLogin)`の1行で済むのでそのようにしたかったのですが諦めた方が良さそうでしょうか。

[maisumakun]

だったら逆に、AnonymousUserの方へid?: undefinedなどを足しておく、という方法もあるかと思います。

[nbys]

ありがとうございます。盲点でした。
型の工夫でいけそうですね。助かりました！