0Pricing
TypeScript Academy · レッスン

unknownの型安全な扱い

unknownの値を安全に使う前に型を絞り込みます。

「unknownの型安全な扱い」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

unknown を安全に扱う

外部データをunknownとして型付けするだけでは、作業の半分にすぎません。もう半分は、使用前に具体的な型へ絞り込むことです。このレッスンでは、主な絞り込みの手法を扱います。

function describe(v: unknown): string {
  if (typeof v === 'string') return 'string: ' + v;
  if (typeof v === 'number') return 'number: ' + v;
  return 'other';
}
console.log(describe('hi'), describe(7), describe(true));

typeof による絞り込み

typeofガードは最も簡単なツールです。unknownを、string、number、boolean、function、objectなどのプリミティブ型へ絞り込みます。

function double(v: unknown): number {
  if (typeof v === 'number') {
    return v * 2; // v is number here
  }
  return 0;
}
console.log(double(21), double('no'));

instanceof による絞り込み

クラスのインスタンスにはinstanceofを使用します。unknownを特定のクラスへ絞り込み、そのメソッドやプロパティを安全に使えるようにします。

function handle(v: unknown): string {
  if (v instanceof Date) {
    return v.toISOString(); // v is Date
  }
  return 'not a date';
}
console.log(handle(new Date(0)));

in 演算子による絞り込み

in演算子は、オブジェクトにプロパティが存在するかどうかを確認し、オブジェクト型の値を絞り込みます。まず値が null ではないオブジェクトであることを確認してから、そのキーを調べます。

function getName(v: unknown): string {
  if (typeof v === 'object' && v !== null && 'name' in v) {
    return String((v as { name: unknown }).name);
  }
  return 'anonymous';
}
console.log(getName({ name: 'Ada' }), getName(5));

カスタム型ガード

カスタム型ガードとは、戻り値の型がvalue is Tである関数です。true を返すと、TypeScript は呼び出し箇所で引数をTへ絞り込みます。

function isString(v: unknown): v is string {
  return typeof v === 'string';
}

function shout(v: unknown): string {
  return isString(v) ? v.toUpperCase() : '?';
}
console.log(shout('hey'), shout(9));

オブジェクトの形状を検証するガード

カスタムガードは、オブジェクトの形状を検証する場合に特に力を発揮します。必要なフィールドをすべて確認する関数を1つ作れば、残りのコードでは絞り込まれた型を信頼できます。

type User = { id: number; name: string };

function isUser(v: unknown): v is User {
  return typeof v === 'object' && v !== null &&
    'id' in v && 'name' in v;
}
console.log(isUser({ id: 1, name: 'Sam' }), isUser({}));

JSON.parse は unknown に似たデータを返す

JSON.parseの戻り値はanyとして型付けされているため、安全性を黙って迂回してしまいます。ベストプラクティスは、unknownとして受け取り、形状を信頼する前に検証することです。

function parseConfig(text: string): unknown {
  return JSON.parse(text);
}
const raw = parseConfig('{"port":8080}');
console.log(typeof raw);

解析した JSON を検証する

JSON.parseと型ガードを組み合わせることで、信頼できないテキストを安全に型付きの値へ変換できます。検証に失敗した場合は、不正なデータを信頼せず、エラーを処理してください。

type Config = { port: number };

function isConfig(v: unknown): v is Config {
  return typeof v === 'object' && v !== null &&
    'port' in v && typeof (v as any).port === 'number';
}

const data: unknown = JSON.parse('{"port":8080}');
if (isConfig(data)) console.log('Port:', data.port);

複数のガードを連鎖させる

複雑な入力では、ガードを段階的に適用します。まず大まかな形状を確認し、その後でさらに絞り込みます。各ガードが少しずつ型を狭めることで、正確で安全な型を段階的に得られます。

function process(v: unknown): string {
  if (Array.isArray(v)) {
    if (v.every((x) => typeof x === 'string')) {
      return v.join('-');
    }
  }
  return 'invalid';
}
console.log(process(['a', 'b']), process([1, 2]));

無効なデータに対してスローする

必須データの検証に失敗した場合は、例外をスローしてください。neverを返す失敗用ヘルパーと組み合わせることで、正常系のコードをすっきりと、型安全に保てます。

function asNumber(v: unknown): number {
  if (typeof v === 'number') return v;
  throw new Error('Expected a number');
}
console.log(asNumber(42));
try { asNumber('x'); } catch (e) { console.log('rejected'); }

すべてを組み合わせる

一連のパターンは、データをunknownとして受け取り、ガードで絞り込んでから、具体的な型に対して処理するというものです。これは、型付けされていない外部の世界と、型付けされたコードの間に設ける安全な境界です。

type Point = { x: number; y: number };
function isPoint(v: unknown): v is Point {
  return typeof v === 'object' && v !== null &&
    'x' in v && 'y' in v;
}
const input: unknown = { x: 1, y: 2 };
if (isPoint(input)) console.log(input.x + input.y);

理解度チェック

unknown を安全に扱う方法についての理解度を確認しましょう。

振り返り: unknown の扱い

次の方法でunknownを絞り込む方法を学びました。

  • プリミティブ型にはtypeof、クラスのインスタンスにはinstanceofを使います。
  • オブジェクトのプロパティにはin演算子を使います。
  • value is Tを返すカスタム型ガードを使います。
  • JSON.parseの結果は、信頼する前に検証します。

次のコースでは、型アサーションとキャストを扱います。

function isNonEmpty(v: unknown): v is string {
  return typeof v === 'string' && v.length > 0;
}
console.log(isNonEmpty('hi'), isNonEmpty(''));

よくある質問

「unknownの型安全な扱い」レッスンは無料ですか？

はい。「unknownの型安全な扱い」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「unknownの型安全な扱い」で何を学びますか？

unknownの値を安全に使う前に型を絞り込みます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「unknownの型安全な扱い」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. unknownとanyを理解する
  2. never型と不可能な状態
  3. 関数におけるvoid型
  4. unknownの型安全な扱い
← TypeScript Academyに戻る