TypeScript с styleled-компонентами

Question

Новичок TypeScript здесь.У меня есть компонент ниже, использующий styled-components, который я хотел бы преобразовать в TypeScript.

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'


const propTypes = {
  name: PropTypes.string.isRequired // https://material.io/tools/icons/?style=baseline
}

const Icon = styled(({name, className, ...props}) => <i className={`material-icons ${className}`} {...props}>{name}</i>)`
  font-size: ${props => props.theme.sizeLarger};
`

Icon.propTypes = propTypes

export default Icon

Я знаю, что могу заменить свой propTypes на interface

interface Props {
  name: string
}

Однако TypeScript жалуется, что я оставляю className необъявленным.Дело в том, что в идеале я хотел бы использовать interface как своего рода спецификацию для реквизита, которую может предоставить разработчик, без необходимости объявлять реквизиты, такие как className или theme, которые вводятся библиотеками, такими как styled-components.

Как правильно преобразовать этот компонент в TypeScript?

Answer 1

import React from "react";
import styled from "styled-components";

interface Props {
  name: string;
  className?: string;
}

const NonStyledIcon: React.SFC<Props> = ({ name, className, ...props }) => (
  <i className={`material-icons ${className}`} {...props}>
    {name}
  </i>
);

const Icon = styled(NonStyledIcon)`
  font-size: ${props => props.theme.sizeLarger};
`;

export default Icon;

В соответствии со стилевыми компонентами Документы TypeScript : при определении компонента вам нужно пометить className как опциональное в вашем интерфейсе Props

Answer 2

Здесь происходит много вещей.

props.theme не будет набираться должным образом, если у вас нет внутреннего типа для Темы, дополненного где-то вроде этого ...

declare module "styled-components" {
    /* tslint:disable */
    export interface DefaultTheme extends YourThemeInterfaceType {}
}

Это изменит тип props.theme на YourThemeInterfaceType, если вы будете правильно следовать документации по дополнению, но если вы не можете просто создать файл styled-components.d.ts и это для своего tsconfig.

"include": [
    "src/**/*"
],

Далее вам нужен тип аргументов, чтобы знать, что «name» - это строка, и className - это также предполагаемая необязательная строка, просто переписайте приведенное выше.

interface IIconProps {
    name: string;
    className?: string;
};

const Icon = styled(({name, className, ...props}: IIconProps) => <i className={`material-icons ${className}`} {...props}>{name}</i>)`
    font-size: ${props => props.theme.sizeLarger};
`;


const test = <Icon name={"xyz"} className={"xyz"}/> // passes typecheck.

Надеюсь, что этопомогает.

РЕДАКТИРОВАТЬ: проптипы также бесполезны в машинописи.