TypeScriptインターフェイスでプロパティオブジェクトを記述する

Question

ネストされたオブジェクトでいくつかのインターフェイスについて説明したいと思います。どのようにして、ネストされたオブジェクトのためのインターフェイスを作成せずにそれを行うことができますか？

interface ISome { 
    strProp:string; 
    complexProp:{ 
    someStrKeyWhichIsDynamic:{ 
     value:string; 
     optValue?:string; 
    } 
    }; 
} 

私も試してみました：

interface ISome { 
    strProp:string; 
    complexProp:{ 
    [someStrKeyWhichIsDynamic:string]:{ 
     value:string; 
     optValue?:string; 
    } 
    }; 
} 

（UPDを実際に大丈夫です）しかし、私は、型アサーションなしISome型の変数に

let dynamicStrKey = 'myKey'; 
    { 
    strProp:'str', 
    complexProp:{ 
    [dynamicStrKey]:{ 
     value:'something here', 
     optValue: 'ok, that too', 
    } 
    }; 

のようなオブジェクトを割り当てるためにカント<ISome> 。少なくともWebStormはこの割り当てをエラーとして強調表示します。

入れ子オブジェクトを正しく記述する方法は？

Answer 1

最初の2つの例は何も問題ありません。彼らはうまくコンパイルし、彼らが言うことを意味します。

3番目の例では、明らかにプロパティ名を「動的」にします。しかし、TSはコンパイル時に動作することを忘れないでください。コンパイル時にdynamicStrKeyに値はありません。したがって、型定義のプロパティ名として使用することは意味がありません。実行時の値を使用してコンパイル時の成果物を定義することはできません。

Answer 2

2番目の部分のコードは動的プロパティをサポートしています。最後のものは使用できません。タイプはjavascriptコードには出力されません。以下のようなものがあります。タイプコピーindex typesが表示されます。

interface ISome<K extends string> { 
    strProp: string; 
    complexProp: { 
     [P in K]: { 
      value: string; 
      optValue?: string; 
     } 
    }; 
} 


let foo: ISome<"foo"> = { 
    strProp:"foo", 
    complexProp:{ 
     foo:{ 
      value:"foo" 
     } 
    } 
}; 

let bar: ISome<"bar"> = { 
    strProp:"bar", 
    complexProp:{ 
     bar:{ 
      value:"bar", 
      optValue:"<optional>" 
     } 
    } 
}; 

let foobar: ISome<"foo"|"bar"> = { 
    strProp:"foo", 
    complexProp:{ 
     foo:{ 
      value:"foo" 
     }, 
     bar:{ 
      value:"bar", 
      optValue:"<optional>" 
     } 
    } 
}; 

// interesting things that use with any|never types 
let anything:ISome<any|never>={ 
    strProp:"foo", 
    complexProp:{} 
}; 

Answer 3

最後に、私は私の第二の変形は、あなたがちょうどここには、いくつかの文字列プロパティになることを指定する[dynamic:string]を書くことができ、ダイナミックキーについて

interface ISome { 
    strProp:string; 
    complexProp:{ 
    [someStrKeyWhichIsDynamic:string]:{ 
     value:string; 
     optValue?:string; 
    } 
    }; 
} 

正しかったと思います。複雑なpropシグネチャに続くcomplexProp変数に割り当てられているが、型定義がないので、Webstormのエラー警告が表示されたようです。この場合、型アサーションを使用しても問題ありません。