TypeScriptのオブジェクトを扱う場合について

Question

実現したいこと

TypeScriptでオブジェクトを扱う時に新規の場合とかは実体が欲しくなるんですが、
クラス作ってコンストラクター用意したりする方がいいのでしょうか。
また他に方法があるのでしょうか。

前提としてReact(関数コンポーネント)を使用しています。
そもそも関数コンポーネントにオブジェクト思考の概念は持ち込むべきではないですよね。

発生している問題・分からないこと

上記と同様の内容で困ってる。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

調べても解決できなかった。

補足

特になし

Comments

[maisumakun]

「実体が欲しくなる」とは、どういう意味でしょうか？

（具体的に「何をどうしたいか」でお伝えいただければと思います）

Answer 1

Point型を定義する。

type Point = {
 x: number;
 y: number;
}

Point型を、stateにする。

  const [point, setPoint] = useState({} as Point);

このとき、pointの内容は空っぽ。これを指して「実態が」ないので「欲しくなる」ということだと理解しました。

「クラス作ってコンストラクター用意」というのは、こういうことなのでしょう。

class Point {
  constructor(
    public x: number = 0,
    public y: number = 0
  ) {}
}

  const [point, setPoint] = useState(new Point());

こうすればx=0, y=0で初期化された「実態が」を用意できるよねと。

---

正解は、わかりませんが疑問自体はこういうことなのではないか、と。

Answer 2

関数コンポーネントに対して外部から呼び出す「メソッド」のようなものを定義したい場合、useImperativeHandleという手段があります（React公式）。

もっとも、通常の場合、親コンポーネントから子コンポーネントを制御するには、「propを伝える」という手段を使うのが主流ですので、useImperativeHandleの出番はあまりありません。

---

質問内容から推測しての回答ですので、まったくの的外れだった場合にはお知らせ下さい。

Answer 3

「React において、オブジェクト形式のステートをどのように書くべきか」に限定すると、React 公式ドキュメントの以下のページを参考にすると良いと思います。

https://ja.react.dev/learn/updating-objects-in-state