带有样式组件的TypeScript

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 docs：在定义组件时，您需要在Props接口中将className标记为可选

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.

希望这可以帮助。

编辑：也是proptypes在打字稿中没用。