未定義のプロパティを持つシンプルなTypeScriptユニオンタイプを絞り込むことはできません。

Question

私は2つのユニオンタイプを持っています.1つはプロパティを持ち、もう1つは持っていません。私は、そのプロパティの存在をチェックすると、それを絞り込むことができますが、それは動作していないと仮定しました。

私はthis Playground reproを作成しました。この他のvery similar thingはうまくいくようです。私は組合を間違った方法で使用していますか？

ここでは完全を期すためのコードは次のとおりです。

export interface AuthenticatedProfile { 
    readonly userId: string; 
    readonly name: string; 
} 
export interface AnonymousProfile { 
    readonly userId: undefined; 
    readonly otherProp: string; 
} 
export type Profile = AnonymousProfile | AuthenticatedProfile; 

function handleProfile(prof: Profile) { 
    if (prof.userId) { 
     console.log(prof.name); 
    } 
} 

ありがとう！

Answer 1

あなたは教授パラメータの種類を制限するタイプのガードを使用することができます。

export interface AuthenticatedProfile { 
    readonly userId: string; 
    readonly name: string; 
} 
export interface AnonymousProfile { 
    readonly userId: undefined; 
    readonly otherProp: string; 
} 
export type Profile = AnonymousProfile | AuthenticatedProfile; 

function isAuthenticatedProfile(prof: Profile): prof is AuthenticatedProfile { 
    return (<AuthenticatedProfile>prof).name !== undefined; 
} 

function isAnonymousProfile(prof: Profile): prof is AnonymousProfile { 
    return (<AnonymousProfile>prof).otherProp !== undefined; 
} 

function handleProfile(prof: Profile) { 
    if (isAuthenticatedProfile(prof)) { 
     console.log(prof.name); 
    } else if (isAnonymousProfile(prof)) { 
     console.log(prof.otherProp); 
    } 
} 

あなたはhandbookの高度なタイプ]セクションでtypescriptですタイプガードについての詳細を読むことができます。

Answer 2

次の操作を行うことができます

export interface AuthenticatedProfile { 
    readonly type: "AuthenticatedProfile"; 
    readonly userId: string; 
    readonly name: string; 
} 

export interface AnonymousProfile { 
    readonly type: "AnonymousProfile"; 
    readonly userId: undefined; 
    readonly otherProp: string; 
} 

export type Profile = AnonymousProfile | AuthenticatedProfile; 

function handleProfile(prof: Profile) { 
    if (prof.type === "AnonymousProfile") { 
     console.log(prof.name); // Error 
     console.log(prof.otherProp); // OK 
     console.log(prof.userId); // OK 
    } 
    if (prof.type === "AuthenticatedProfile") { 
     console.log(prof.name); // OK 
     console.log(prof.otherProp); // Error 
     console.log(prof.userId); // OK 
    } 
}