TypeScript와 MobX React에서 ‘Property ‘profileStore’ is missing’ 오류 이해 및 해결하기
TypeScript에서 MobX React를 사용하는 경우, 다음과 같은 오류 메시지가 표시될 수 있습니다:
Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)
MainNote.tsx(9, 3): 'profileStore' is declared here.
이 오류는 AppProps 타입에서 profileStore 속성이 누락되었으며, 실제로 Readonly<AppProps> 타입에서 필요한 경우 발생합니다.
왜 이 오류가 발생할까요?
MobX는 profileStore 속성을 자동으로 주입하지만, TypeScript는 이를 인식하여 타입의 안전성을 보장하기 위해 알아야 합니다. 기본적으로 TypeScript는 props를 선택 사항으로 간주하므로, 오류 메시지가 표시됩니다.
해결 방법 1: profileStore 속성을 필수로 설정하기
오류를 해결하기 위해, AppProps 인터페이스 선언에서 profileStore 속성을 필수로 만들 수 있습니다:
interface AppProps {
profileStore: IProfileStore;
}
이 변경으로 TypeScript에게 profileStore 속성이 필요하다는 것을 알립니다.
해결 방법 2: 기본 props 설정하기
명시적으로 속성을 전달하지 않으려는 경우, 해당 컴포넌트의 기본 속성으로 설정할 수 있습니다:
static defaultProps = { profileStore: {} };
이렇게 하면 속성을 명시적으로 제공하지 않아도 컴포넌트가 작동할 수 있습니다.
해결 방법 3: 중괄호 import 문제
일부 경우에는 withStyles를 사용하고 클래스를 잘못 가져오는 경우 이 오류가 발생할 수 있습니다. 중괄호 없이 기본 내보내기를 가져오도록 확인해야 합니다:
import MainNote from './MainNote';
중괄호를 사용하면 스타일을 적용하지 않은 클래스 자체를 가져오게 되므로, 클래스가 누락될 수 있습니다.
이러한 해결 방법을 따르면 MobX React TypeScript 애플리케이션에서 ‘Property ‘profileStore’ is missing’ 오류를 해결할 수 있을 것입니다.
이 문제 해결 안내가 도움이 되었나요? 아래 댓글에서 알려주세요!
참고 자료 :
같은 카테고리의 다른 글 보기 :
