1. 문제 상황

Web에서는 에러가 뜨지않지만, App에서만 에러가 위와 같이 뜬다.

현재 상황

기존 react native에서 사용하던 typescript 버전은 5.3.3이다. Web은 typescript버전이 5.1.3이기에 현재 typescript 버전을 root에서 5.1.3으로 적용해두었다.

2. 해결 과정

다른 프로젝트에서는 어떻게 했을까?

1. 모노레포 샘플을 참고했다. 각 패키지 별 typescript를 설치하고, tsconfig로 각 설정을 해주었다.
2. 우아한 기술 블로그에서도 각 프로젝트 typescript 설치와 tsconfig를 각각 두고 관리했다고 한다.

.eslintrc에서 설정을 전부 하지 않아서 그런가?

이 프로젝트를 보면, .eslintrc에서 teypscript적용 범위도 설정하였다. 하지만 eslint의 에러였으면 eslint에서 에러를 출력했을 것이다. eslint에러와 typescript설정은 무관하다.

모노레포에서 각 패키지에 맞는 typescript 버전을 사용하지 못하나?

참고 github : “가능은하지만, IDE의 복잡성으로 인해 정말 어렵습니다. typesritp 버전을 마이그레이션하는 편이 더 쉬우실 겁니다.”

3. 원인 분석

다른 프로젝트들을 보았을 때, 모노레포의 프로젝트들의 Typescript 버전이 모두 일치하다는 것을 확인했다. 이를 다르게 설정하기 위해서는 IDE설정이 매우 까다롭다고 한다. 실제로 VSCode에서 shft+command+p를 눌러 select typescirpt version을 누르면 하나의 버전밖에 설치를 못하기도 한다.

결론은, typescript을 루트 typescript와 동일한 버전으로 설치하지 않아 발생한 에러였다. App의 typescript 버전을 루트와, web과 동일한 4.1.3으로 맞추니 에러가 말끔히 해결되었다.

4. 결론

모노레포에서 typescript를 적용하려면, 각 패키지, 루트에 모두 동일한 버전의 typescript를 설치하고, 각 tsconfig.json을 두어 설정해야 한다. 그리고, 각 패키지의 tsconfig는 루트 tsconfig를 extend하여 작성하면 공통적인 속성을 적용할 수 있다.