問題一覧に戻る
上級高度なパターンと型
問題95: 型推論の活用

型ガードとアサーションを含むTypeScriptの型推論機能を学びます。型ガードは条件ブロック内で型を絞り込みます。型アサーションは、コンパイラよりも多くを知っている場合に期待される型をTypeScriptに伝えます。これらの機能により、より安全な型処理と適切なIntelliSenseによる優れた開発体験が可能になります。

import React, { useState } from 'react';

type Status = 'idle' | 'loading' | 'success' | 'error';

{/* 型ガード関数 */}
function isError(status: Status): status is  {
  return status === 'error';
}

function StatusDisplay() {
  const [status, setStatus] = useState<Status>('idle');
  
  {/* 型アサーション */}
  const element = document.getElementById('root') as ;
  
  if (isError(status)) {
    return <div>Error occurred!</div>;
  }
  
  {/* 型の絞り込み */}
  const handleClick = (e: React.MouseEvent<>) => {
    const button = e.currentTarget;
    console.log(button.textContent);
  };
  
  return (
    <div>
      <p>Status: {status}</p>
      <button onClick={handleClick}>
        {status === 'loading' ? 'Loading...' : 'Click'}
      </button>
    </div>
  );
}

export default StatusDisplay;