【TypeScript】TypeScript 4.6で判別プロパティをもつUnionの絞り込みが改善される

TypeScriptで判別プロパティをもつUnionの絞り込みに関する部分が4.6で改善されるという話

devblogs.microsoft.com

Unionで定義された型同士が共通してもつ判別プロパティ（タグプロパティ）を使って、ランタイムで処理を判別するということがある

例えば以下のような処理

type Action =
    | { kind: "NumberContents", payload: number }
    | { kind: "StringContents", payload: string };

function processAction(action: Action) {
    if (action.kind === "NumberContents") {
        // `action.payload` is a number here.
        let num = action.payload * 2
        // ...
    }
    else if (action.kind === "StringContents") {
        // `action.payload` is a string here.
        const str = action.payload.trim();
        // ...
    }
}

このとき、以下のように分割代入によってkindとpayloadを定義してしまうと、その変数に型の情報が絞り込まれず、payloadはstringなのかnumberなのか不明なのでエラーになってしまう

type Action =
    | { kind: "NumberContents", payload: number }
    | { kind: "StringContents", payload: string };

function processAction(action: Action) {
    const { kind, payload } = action;
    if (kind === "NumberContents") {
        let num = payload * 2
        // ...
    }
    else if (kind === "StringContents") {
        const str = payload.trim();
        // ...
    }
}

4.6ではこれが改善され、分割代入で作られた変数にも型情報が引き継がれて絞り込みができるようになる

ただ、@uhyoさんの記事によると同じ分割代入で作られることが必須で、

  const { kind } = action;
  const { payload } = action;

や

  const kind = action.type;
  const payload = action.payload;

はできない

zenn.dev