Typescriptのインデックスシグネチャの種類が異なる

Question

私は次のものを持っていますinterfaceです。

interface IDetails { 
    name: string; 
    age: number; 
} 

interface IConfig { 
    appName: string; 
    userDetails: IDetails; 
    [key: string]: string | IDetails 
} 

const details: IConfig = { 
    appName: 'test', 
    userDetails: { 
    name: 'xyz', 
    age: 67, 
    }, 
} 

const t: string = 'userDetails' 
const name: string = details[t].name 
//        ^^^^ 
// throws the following error 
// 
// Property 'name' does not exist on type 'string | IDetails'. 
// Property 'name' does not exist on type 'string'. 

キーシグネチャに複数のタイプ/インターフェイスを割り当てようとすると、このエラーが発生します。私は[key: string]: anyを使用できることを知っています。しかし、私はそれを一般化したくありません。この作品を制作する方法はありますか？

Link to TypeScript Playground

Answer 1

あなたが動的にdetailsのプロパティにアクセスしようとしている場合は、あなたがより良いtype guardsを使用します。

function isDetails(obj: string | IDetails): obj is IDetails { 
    return Object.keys(obj).length === 2 && typeof obj["name"] === "string" && typeof obj["age"] === "number"; 
} 

次に、あなたが行うことができます：

if (isDetails(details[t])) { 
    // details[t].name should be fine with the compiler 
}