Styled-System Props Typing에서 TypeScript를 사용한 오류 해결

타입스크립트를 사용한 styled-system 속성 타이핑

styled-system을 사용하고 color 속성에서 타입 오류가 발생하는 경우가 있습니다. 이 문제는 styled-system에 있는 color 속성과 기본 HTML 속성인 color 속성의 이름 충돌로 인해 발생합니다. 이 블로그 글에서는 이 문제를 해결하고 TypeScript 타이핑을 올바르게 작동하도록 하는 몇 가지 해결책을 살펴보겠습니다.

해결책 1: Emotion Styled Components와 커스텀 속성 사용

@emotion/styled를 사용하는 경우, 충돌하는 color 속성을 처리하기 위해 커스텀 속성을 생성할 수 있습니다. 다음은 예시입니다:

// component.js
import styled from '@emotion/styled';
import { style, ResponsiveValue } from 'styled-system';
import CSS from 'csstype';

const textColor = style({
  prop: 'textColor',
  cssProperty: 'color',
  key: 'colors'
});

type Props = {
  textColor?: ResponsiveValue<CSS.ColorProperty>
}

const Box = styled.div<Props>`
  ${textColor};
`

export default Box;

이제 Box 컴포넌트를 textColor 속성과 함께 사용할 수 있습니다:

// some-implementation.js
import Box from '.';

const Page = () => (
  <Box textColor={['red', 'green']}>내용</Box>
);

해결책 2: React.ElementType을 사용하여 속성 확장

styled-components를 사용하는 경우, 속성의 타입 충돌을 해결하기 위해 속성을 React.ElementType으로 확장할 수 있습니다. 다음과 같이 작성할 수 있습니다:

import React from 'react';
import styled from 'styled-components';
import { color, ColorProps } from 'styled-system';

interface Props extends ColorProps {
  as?: React.ElementType;
}

const StyledDiv = styled('div')<Props>`
  ${color}
`

const Text = ({ color }: Props) => {
  return <StyledDiv color={color} />
}

React.ElementType로 확장할 때, 확장 대신 React.HTMLAttributes를 사용하는 것이 아니라 React.ElementType을 사용하면 color DOM 속성과의 충돌이 해결됩니다.

해결책 3: CSS.ColorProperty로 color 사용

ColorProps 대신 color: CSS.ColorProperty을 직접 사용할 수도 있습니다. 다음은 예시입니다:

import * as CSS from 'csstype';

type Props = {
  color?: CSS.ColorProperty;
}

const StyledDiv = styled('div')<Props>`
  ${color}
`

const Text = ({ color }: Props) => {
  return <StyledDiv color={color} />
}

CSS.ColorProperty를 사용함으로써 타입 충돌을 피하고 더 깔끔한 해결책이 가능합니다.

결론

styled-system과 TypeScript를 사용할 때, 속성의 이름 충돌을 해결하는 것은 원활한 개발에 매우 중요합니다. 이 글에서는 color 속성 충돌을 처리하기 위한 여러 가지 해결책을 살펴보았습니다. Emotion Styled Components와 함께 커스텀 속성을 생성하거나, props를 React.ElementType으로 확장하거나, CSS.ColorProperty를 사용하는 등 이러한 방법들은 타입 오류를 해결하고 TypeScript 프로젝트에서 styled-system의 이점을 계속 활용하는 데 도움이 됩니다.

특정한 사용 사례에 가장 적합한 해결책을 선택하는 것을 기억하세요. 즐거운 코딩하세요!

참고 자료 : 

reactjs