2017-11-22 3 views
1

Typescript로 장식 된 속성 형식의 유효성을 검사하는 방법이 있습니까? boolean 클래스 속성에서만 작동하는 속성 데코레이터를 사용하고 싶습니다. 예를 들어. (아래 예 참조). 이것이 가능한가?속성 장식자를 사용하여 속성 형식에 대한 엄격한 형식 검사

(참고 :. 나는 통해 반영-메타 데이터, 타이프 라이터와 단지 컴파일 타입 경고를 런타임 유효성 검사를하지 않으)이 약

function booleanProperty<T extends HTMLElement>(target: T, prop: string) { 
    // `target` will be the class' prototype 
    Reflect.defineProperty(target, prop, { 
    get(this: T): boolean { 
     return this.hasAttribute(prop); 
    }, 
    set(this: T, value: boolean): void { 
     if (value) { 
     this.setAttribute(prop, ''); 
     } else { 
     this.removeAttribute(prop); 
     } 
    } 
    }); 
} 

class MyElement extends HTMLElement { 
    @booleanProperty 
    foo: boolean; 

    @booleanProperty 
    bar: string; // TS compile error 
} 
customElements.define('my-element', MyElement); 
+0

핸드북을 살펴 보지 않았지만 세 번째 인수가 있고 그 범위를 지정하기 위해 제네릭을 정의 할 수 있습니다. 그냥 직감, 당신을 위해 일하는 희망. – unional

답변

1

무엇을?

function booleanProperty< 
    T extends HTMLElement & Record<K, boolean>, 
    K extends string>(target: T, prop: K) { 
    // ... impl here 
} 

건네 target 필요가 K의 타입 키 K에서 boolean 속성을 갖는 HTMLElement로 전달 된 prop. 작동하는지 확인해 보겠습니다.

class MyElement extends HTMLElement { 
    @booleanProperty // okay 
    foo: boolean; 

    @booleanProperty // error 
    bar: string; 
} 

나에게 잘 어울립니다. 그게 너에게 효과가 있니?

+0

영리한! 그런 식으로'prop' 매개 변수를 좁히려 고 생각하지 않았습니다. – Csvn

관련 문제