引数の型指定

export const Practice1 = () => {
 const calcTotalFee = (num: number) => {
  const total = num * 1.1;
  console.log(total);
 };
 const onClickPractice = () => calcTotalFee(1000); // 例：ここで文字列の1000を渡すとエラーになる

 return (
  <div>
   <p>練習問題：引数の型指定</p>
   <button onClick={onClickPractice}>練習問題1を実行</button>
  </div>
 );
};

まとめ

実行する前にエラーを検知できる。
関数内で受け取った引数の型によって引き起こされるバグを防げる。

返却値の型指定

export const Practice2 = () => {
 const getTotalFee = (num: number): number => {

  const total = num * 1.1;
  return total;
 };
 const onClickPractice = () => console.log(getTotalFee(1000));

 return (
  <div>
   <p>練習問題：返却値の型指定</p>
   <button onClick={onClickPractice}>練習問題2を実行</button>
  </div>
 );
};

まとめ

返却値の型を指定すると、コードの可読性が向上する。
後に別の開発者によって関数の改修が行われた際に、指定した型以外の返却値を返すとエラーになるのでリグレッションを防ぎやすい。