Реквизиты не проверяются при использовании стилизованных компонентов с машинописью

Question

Я пытаюсь реализовать пользовательский компонент, который можно использовать с styled-components.Проблема заключается в том, что при использовании styled-компонентов с машинописным шрифтом результирующий стиль-компонент, по-видимому, не обеспечивает правильную проверку типов для реквизитов, которые он принимает.Например, предположим, что моим компонентом является следующее:

export class MyComponent extends React.Component<{identifier: string, option?: 'a' | 'b'}> {
    render() {
         const {identifier, ...props} = this.props;
         return <h1 {...props}>{identifier}</h1>
    }
}

И я пытаюсь обернуть его компонентами styleled как

const WrappedComponent = styled(MyComponent)`
    border: 1px solid
`

Теперь, когда я пытаюсь отобразить WrappedComponent as

....
render() {
    return <WrappedComponent identifier="abc" />
}

Typescript выдает ошибку в виде:

Type '{ identifier: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<{}, never> & Partial<Pick<{}, never>>, never> & { theme?: any; } & { as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | ... 165 more ... | undefined; }'.
Property 'identifier' does not exist on type 'IntrinsicAttributes & Pick<Pick<{}, never> & Partial<Pick<{}, never>>, never> & { theme?: any; } & { as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | ... 165 more ... | undefined; }'

Почему это происходит?

ОБНОВЛЕНИЕ

Кажется, все работает правильно, если я изменяю option?: 'a' | 'b' на option?: string

версия машинописного текста: 3.2.2 версия styled-components: 4.1.3 @ версия типов / styled-components: 4.1.4версия реакции: 16.6.3 @ типы / реакция версии: 16.7.17

Answer 1

Вы передали [key: string]: string, поэтому в соответствии с этим invalidProp является допустимой опорой строки типа и также имеет допустимое строковое значение.Если реквизиты предварительно определены, то вы можете создать интерфейс для всех этих.Вот еще один вопрос , который может вам помочь.

export interface IProps {
   name: string;
   validProp: string;
   anotherValidProp: string;
}

Также не относится к этой конкретной ошибке, но myComponent должно быть MyComponent.