スタイル付きコンポーネントを含むTypeScript

TypeScript初心者はこちら。 TypeScriptに変換したいstyled-componentsを使用する以下のコンポーネントがあります。

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に適切に変換するにはどうすればよいですか？

reactjstypescriptstyled-components

2019/03/29artooras

React Nativeでスタイル付きコンポーネントv5を使用する包括的なアプローチは、プレーンなReactでも機能します。テーマを使用していない場合は、下部のStyledPropsセクション。

テーマのタイプを定義します。

// MyTheme.ts

export type MyTheme = {
  colors: {
    primary: string;
    background: string;
  };
};

テーマのタイプを使用します。

// themes.ts

export const LightTheme: MyTheme = {
  colors: {
    primary: 'white',
    background: 'white',
  },
};

export const DarkTheme: MyTheme = {
  colors: {
    primary: 'grey',
    background: 'black',
  },
};

MyThemeタイプをスタイル付きコンポーネントのデフォルトのテーマに「マージ」するには、 declaration merging を使用します。

// styled.d.ts

import 'styled-components';
import { MyTheme } from '../src/themes/MyTheme';

declare module 'styled-components' {
  // eslint-disable-next-line @TypeScript-eslint/no-empty-interface
  export interface DefaultTheme extends MyTheme {}
}

うんいいね。 themeプロパティが正しく入力されています。
コンポーネント自体はどうですか？

特定のコンポーネントプロップをStyledPropsタイプでラップします。

import { StyledProps } from 'styled-components';
import styled from 'styled-components/native';

type MyViewProps = StyledProps<{
  backgroundColor?: string;
  isAlert?: boolean;
}>;

const MyView = styled.View(
  (props: MyViewProps) => `
    background-color: ${props.backgroundColor || props.theme.colors.background};
    color: ${props.isAlert ? red : props.theme.colors.primary}
  `,
);

この例では、両方のprops.backgroundColorおよびprops.theme.colors.backgroundは自動補完されます。 MyThemeタイプまたは特定のコンポーネントタイプを更新すると、機能するはずです。 ????

2020/03/12GollyJer