אתמול רבתי עם טייפסקריפט. ישבנו על הדשא לבד. הוא אמר שהקוד הזה שגוי:

export default function App() {
  const [data, setData] = React.useState();

  function handleClick() {
    setData({ value: _.random(10) });
  }

  return (
    <div className="App">
      {data && <p>Value is: {data.value}</p>}
      <button onClick={handleClick}>Randomize</button>
    </div>
  );
}

ואני חשבתי קוד נחמד. תראה טייפסקריפט, אמרתי לו, אפילו אתה מסכים להריץ את הקוד אם במקום אוביקט אני כותב שם מספר:

export default function App() {
  const [data, setData] = React.useState();

  function handleClick() {
    setData(_.random(10));
  }

  return (
    <div className="App">
      {data && <p>Value is: {data}</p>}
      <button onClick={handleClick}>Randomize</button>
    </div>
  );
}

אבל טייפסקריפט רק חייך את החיוך הממזרי שלו ואמר: אתה לא תגיד לי מה תקין ומה לא תקין. תזכור מי עובד בשביל מי בפרויקט הזה.

שעתיים מאוחר יותר הבנתי שטייפסקריפט צודק. שלא יעזור להתווכח, ושלפעמים פשוט צריך לעשות מה שצריך לעשות. כשמדובר בטייפסקריפט זה אומר תמיד לוודא שטייפסקריפט יודע מה הטיפוסים של משתני הסטייט שלנו. הנה הקוד ששימח את טייפסקריפט בסוף:

export default function App() {
  const [data, setData] = React.useState<Record<string, any> | undefined>();

  function handleClick() {
    setData({ value: _.random(10) });
  }

  return (
    <div className="App">
      {data && <p>Value is: {data.value}</p>}
      <button onClick={handleClick}>Randomize</button>
    </div>
  );
}