Typescriptでインデックスシグネチャを絞り込むことはできますか？

Question

私が使用しているLIB（アフロディーテ）は、このタイプの定義があります。

interface StyleDeclaration { 
    [key: string]: CSSProperties; 
} 

私はkey sが指定されたリストのサブセットである必要があり、サブタイプを作成したいのですが、サブタイプとして使用することができますStyleDeclaration。

私の最高の試みがされています：これは、ポイントまで、うまく機能

type CssTransStyleName = 
    'defaultStyle' | 'activeStyle' | 'etcetera' 

type CssTransStyleDeclaration = {[K in CssTransStyleName]?: CSSProperties} 

- 私はStyleDeclarationとしてインスタンスを使用しようとするポイント。例えば、与えられた：

Type 'CssTransStyleDeclaration' is not assignable 
to parameter of type 'StyleDeclaration'. 
    Property 'defaultStyle' is incompatible with index signature. 
    Type 'CSSProperties | undefined' is not assignable to type 'CSSProperties'. 
     Type 'undefined' is not assignable to type 'CSSProperties'. 

どうやら、コンパイラはCssTransStyleName内のすべてのプロパティは、型の値を持っている」という意味として

{[K in CssTransStyleName]?: CSSProperties}

を解釈：

const cssDeclaration: CssTransStyleDeclaration = { 
    style: { 
     transformOrigin: 'top left', 
    }, 
} 
const ss: StyleDeclaration = cssDeclaration 

コンパイラは、と文句を言いCSSProperties | undefined、私はいくつかのプロパティが存在し、いくつかは存在しないと言うことを試みたのに対し、

キャスティングas StyleDeclarationが動作しますが、ダクトテープを使用しないことをおすすめします。

---

私も

type CssTransStyleDeclaration = {[K in CssTransStyleName]?: CSSProperties} & StyleDeclaration

を試してみましたが、これは単にStyleDeclarationとして、それが効果的に同じになります。プロパティはCssTransStyleNameのプロパティに限定されません。

Answer 1

あなたは次のことを試すことができます：ここでは

interface CssTransStyle { 
    defaultStyle: any; 
    activeStyle: any; 
    etcetera: any; 
} 

type StyleDeclarationOf<T> = { 
    [P in keyof T]: CSSProperties; 
}; 

type CssTransStyleDeclaration = StyleDeclarationOf<CssTransStyle> & StyleDeclaration; 

は、あなたがそれを理解するのに役立ちます例です。

interface CSSProperties { 
    someprop: string; 
} 

interface StyleDeclaration { 
    [key: string]: CSSProperties; 
} 

// This functions only accepts StyleDeclaration 
function test(a: StyleDeclaration) { 

} 

var a: StyleDeclaration = { 
    somekey: { 
     someprop: "somevalue" 
    } 
}; 

test(a); // Works fine because a is StyleDeclaration 

interface CssTransStyle { 
    defaultStyle: any; 
    activeStyle: any; 
    etcetera: any; 
} 

type StyleDeclarationOf<T> = { 
    [P in keyof T]: CSSProperties; 
}; 

type CssTransStyleDeclaration = StyleDeclarationOf<CssTransStyle> & StyleDeclaration; 

// Works because b is CssTransStyleDeclaration and StyleDeclaration 
var b: CssTransStyleDeclaration = { 
    defaultStyle: { 
     someprop: "somevalue" 
    }, 
    activeStyle: { 
     someprop: "somevalue" 
    }, 
    etcetera: { 
     someprop: "somevalue" 
    } 
}; 

test(b); // Works fine because is CssTransStyleDeclaration and StyleDeclaration 

// ERROR c is StyleDeclaration but not CssTransStyleDeclaration 
var c: CssTransStyleDeclaration = { 
    somekey: { 
     someprop: "somevalue" 
    } 
}; 

test(c); // Works fine becase c is StyleDeclaration 

Answer 2

これは正確に（自分の質問に）答えはありませんが、私はStyleDeclarationを変更することができれば、私はすべての作業を行い

type StyleDeclaration<K extends string = string> = { 
     [key in K]: CSSProperties; 
    } 

に変更したいです。 = stringは、TS 2.3の新機能であるジェネリックのデフォルト値です。