TypeScript 型エラー

Question

前提・実現したいこと

Stateの値を参照したいです。しかし、参照できず、型エラーが発生します。
isDisabledのステートに、IsDisabledという型をつけています。
ステートのisDisabledに入れ子になっているオブジェクトのプロパティーを参照しようとしたところ型エラーが発生しました。
(下部のreturnで参照しています。)

どのように入れ子になった値を参照することができるのでしょうか。

disabled属性のisDisabledにカーソルを置くと、IsDisabledの型がついており、startなどは、anyになってしまっています。

発生している問題・エラーメッセージ

Property 'start' does not exist on type 'IsDisabled'.
Property 'stop' does not exist on type 'IsDisabled'.
Property 'pouse' does not exist on type 'IsDisabled'.

該当のソースコード

import { FC , useState} from "react";

type Props = {
  limit: number;
}
type IsDisabled = {
  isDisabled: {start: boolean, stop: boolean, pouse: boolean};
}

const Timer2: FC<Props> = (props) => {
  const limit: number = props.limit;
  const initialIsDisabled: IsDisabled = {isDisabled: {start: false, stop: true, pouse: true}};
  const [timeLeft, setTimeLeft] = useState(limit);
  const [isDisabled, setIsDisabled] = useState(initialIsDisabled);

  const tick = ():void => {
    setTimeLeft((prevTime) => prevTime - 1);
  };
  let intervalId:NodeJS.Timer | null = null;
  const start = ():void => {
    intervalId = setInterval(tick, 1000);
    setIsDisabled({isDisabled: {start: true, stop: false, pouse: false}})
  };
  const reset = ():void => {
    setTimeLeft(limit)
  };
  const pouse = ():void => {
    if (intervalId) {
      clearInterval(intervalId);
    }
  };
  

  return(
    <div className="container">
      <h1>タイマー</h1>
      <p className="countNum">{timeLeft}</p>
      <div className="btn-wrapper">
      <button disabled={isDisabled.start} onClick={start}>START</button>
      <button disabled={isDisabled.stop} onClick={reset}>RESET</button>
      <button disabled={isDisabled.pouse} onClick={pouse}>POUSE</button>
      </div>
    </div>
  )
}

export default Timer2;

Answer 1

その型なら isDisabled.isDisabled.start としてアクセスする必要がありますが、型を次のようにした方がシンプルになると思います。

type IsDisabled = {
  start: boolean,
  stop: boolean,
  pouse: boolean
};

Comments

[Patao150205]

ありがとうございます！
initialIsDisabledのあとに更にstateのisDisabledに代入していますね。全然気付けませんでした。
具体的な例も示して頂き、非常に参考になります！