[TypeScript]複数の型を組み合わせて定義した型で、Property 'xxxx' does not exist on typeが発生する

Question

聞きたいこと

下のような複数のtypeを組み合わせて Sample1and2 というtypeを定義しています。

type Sample = {
  id: string,
  name: string
}

type Sample2 = {
  id: string,
  gender: string
}

export type Sample1and2 = Sample | Sample2

この Sample1and2 を使用して、下のような関数をし定義しているのですが、引数の sample から、 gender も name を引き出そうとしても型エラーになってしまいます。

const sampleFunc = ({
  sample
}: {
  sample: Sample1and2
}) => {
  const { gender } = sample; // ← Property 'gender' does not exist on type 'Sample1and2'
  const { name } = sample; // ← Property 'gender' does not exist on type 'Sample1and2'
}

当然、Sample1 または Sample2 にしか存在していないプロパティ(gender or name)を使用しようとしているため、型エラーになるのはわかるのですが、

下のコードのように、型として保証ができる場合でも型エラーになってしまっていて困っています。

const sampleFunc = ({
  sample
}: {
  sample: Sample1and2
}) => {

  :

  const samplesTypeIsSample2 = true; // 実際のコードでは単純なtrue/falseの代入ではありません

  if (samplesTypeIsSample2) {
    const { gender } = sample; //  ← Property 'gender' does not exist on type 'Sample1and2'
  }  
}

こういった場合にどのような実装をすればいいのでしょうか。

Answer 1

判別可能なUnion型とユーザ定義のType Guardを組み合わせましょう。
型チェックやインテリセンスも効くようになり便利です。

判別可能なUnion型 - TypeScript Deep Dive 日本語版

interface Sample1 {
    kind: 'Sample1';  // これで判別する
    id:   string;
    name: string;
}

interface Sample2 {
    kind:  'Sample2';  // これで判別する
    id:     string;
    gender: string;
}

type Sample1and2 = Sample1 | Sample2

// ユーザ定義のType Guard
function isSample1(x: Sample1and2): x is Sample1 {
    return x.kind === 'Sample1'
}

// ユーザ定義のType Guard
function isSample2(x: Sample1and2): x is Sample2 {
    return x.kind === 'Sample2'
}

const sampleFunc = ({
  sample
}: {
  sample: Sample1and2
}) => {
    if (isSample1(sample)) {
        console.log(sample.id, sample.name);
    } else {
        console.log(sample.id, sample.gender);
    }

    /* switch-caseでもOK */
    switch (sample.kind) {
        case 'Sample1':
            console.log(sample.id, sample.name);
            break;
        case 'Sample2':
            console.log(sample.id, sample.gender);
            break;
        default:
            // これを書いておくとSample1and2に型を足したときにここでエラーが出るようになり、
            // caseを増やすのを忘れにくくなります。
            const _exhaustiveCheck: never = sample;
    }
}

別解としてasでキャストすることもできますが、おすすめしません。

以上、ご参考になれば幸いです。