TypeScript에서 styled 함수를 사용한 Autocomplete 스타일링 시 타입 추론 오류

소개

최근 프로젝트에서 Material-UI의 Autocomplete 컴포넌트를 styled 함수를 사용하여 커스텀 스타일링하려고 했을 때 TypeScript에서 타입 추론이 원활하게 이루어지지 않아서 발견한 문제에 대해 소개하려합니다.

문제가 발생한 일

Material-UI의 Autocomplete 컴포넌트를 styled 함수를 사용하여 스타일링하려고 했을 때, TypeScript에서 styled 함수를 통해 스타일을 적용하면서 컴포넌트안의 데이터 타입이 unknown으로 추론되는 문제가 발생했습니다.

원인

styled 함수를 사용하여 컴포넌트를 스타일링할 때, TypeScript는 styled 함수에 의해 생성된 새로운 타입을 갖게 됩니다. 그러나 Autocomplete 컴포넌트에 대한 타입 정보가 명시적으로 전달되지 않으면 TypeScript는 정확한 타입을 추론하기 어려워집니다. 이로 인해 컴포넌트의 타입이 unknown이 되는 문제가 발생하게 됩니다.

해결

as 문법은 TypeScript에서 형변환(타입 캐스팅)을 수행하는 역할을 합니다. 이를 통해 TypeScript에게 특정 값이 어떤 타입이라고 명시적으로 알려줄 수 있습니다.

const CustomAutoComplete = styled(Autocomplete)({
  margin: '11px 0 10px',
  fontFamily: 'Pretendard',
  fontWeight: 500,
  fontStretch: 'normal',
  fontStyle: 'normal',
  lineHeight: 1.6,
  letterSpacing: 'normal',
  textAlign: 'left',
  color: '#000',
}) as typeof Autocomplete;

결론

styled 함수를 사용하여 컴포넌트를 스타일링할 때, TypeScript는 styled 함수에 의해 생성된 새로운 타입을 갖게 되는데 styled 함수를 사용하여 컴포넌트에 스타일을 적용할 때 타입 추론이 어려운 경우, as typeof 구문을 활용하여 타입을 명시적으로 적용 해 해결이 가능합니다.