Typescript에서 인덱스 서명을 정제 할 수 있습니까?

Question

내가 사용 해요 LIB (아프로디테)이 유형 정의가 있습니다

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

나는 key의 지정된 목록의 하위 집합이어야합니다 하위 유형을 만들려면을하지만, 하위 유형은로 사용할 수 있습니다 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의 새로운 기능인 일반에 대한 기본값입니다.