[TypeScript] Object literal may only specify known properties, and ''stylesheet.calendar.header'' does not exist in type 'Theme'.ts(2353)

 

 

타입스크립트 프로젝트에서 react-native-calendars 패키지를 사용하여 Calendar 컴포넌트 내에 theme props에 'style.calendar.header' 선언 시 아래 에러가 발생하는 것을 확인하였다.

<Calendar
	theme={{
          'stylesheet.calendar.header': headerStyle,
	}}
/>

Object literal may only specify known properties,
and ''stylesheet.calendar.header'' does not exist in type 'Theme'.ts(2353)
index.d.ts(8, 5): The expected type comes from property 'theme' which is
declared here on type 'IntrinsicAttributes & Pick<CalendarProps & ContextProp,
"style" | "initialDate" | "children" | "hitSlop" | "id" | "onLayout" | 
... 122 more ... | "context"> & Pick<...> & Pick<...>'

 

 

이런 경우에는 as 키워드(Type Assertion)를 통해서 해결할 수 있다.

Type Assertion은 컴파일러에게 해당 변수의 타입을 정해진 타입으로 명시해주는 것이다.

import { Theme } from 'react-native-calendars/src/types';

<Calendar
   theme={
      {
         'stylesheet.calendar.header': headerStyle,
      } as Theme
   }
/>