TypeScript を勉強する

2024-09-28

概要

React & TypeScript は業務で使用しているが今まで勉強したことがなく、業務中に調べながらコードを書いている。簡単なアプリを作りながら勉強すれば楽しいのではと思い、その過程で学んだことをメモしておく。

Object Types

React で props を渡す方法を知るために、データをオブジェクトで渡す方法を学ぶ。

function greet(person: { name: string; age: number }) {
  return 'Hello ' + person.name;
}

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  return 'Hello ' + person.name;
}

これらのサンプルコードは業務で何度か出てきたので見慣れている。

props の型指定

props の型指定の方法を見ていく。

参考：TypeScript の使用

子コンポーネントで受け取る props の型指定

function MyButton({ title }: { title: string }) {
  return <button>{title}</button>;
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton title="I'm a button" />
    </div>
  );
}

props が複数ある場合の型指定

interface MyButtonProps {
  /** The text to display inside the button */
  title: string;
  /** Whether the button can be interacted with */
  disabled: boolean;
}

function MyButton({ title, disabled }: MyButtonProps) {
  return <button disabled={disabled}>{title}</button>;
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton title="I'm a disabled button" disabled={true} />
    </div>
  );
}

エラーと解決策

VSCode で発生した型エラー

型 '{ num: number; }' を型 'number' に割り当てることはできません。ts(2322)

該当コード

const Card = (num: number) => {
  return <div>カード{num}</div>;
};

const App: React.FC = () => {
  return (
    <div className="App">
      <Card num={1} />
    </div>
  );
};

コンポーネントが props としてオブジェクトを受け取るべきところを、単に number 型の値を直接引数として受け取ろうとしているため、型エラーが発生している。

解決策: Card コンポーネントを正しく定義するためには、props オブジェクトを使って受け取る値を指定する必要がある。

interface CardProps {
  num: number;
}

const Card: React.FC<CardProps> = ({ num }) => {
  return <div>カード{num}</div>;
};

const App: React.FC = () => {
  return (
    <div className="App">
      <Card num={1} />
    </div>
  );
};

useState の型指定

useState

の直後に型を記載する。

TypeScript なし

const [enabled, setEnabled] = useState(false);

TypeScript あり

const [enabled, setEnabled] = useState<boolean>(false);

まとめ

React & TypeScript で頻出の構文を学んだ。まだまだあるが今回はここまで。