22.10.27 TIL - 포폴앱 타입스크립트 마이그레이션

1. Done

---

1.1 리액트 개인포폴앱 타입스크립트로 마이그레이션 하기

• React.FC를 사용하지 않는 방법이 더 좋아보인다.
• 함수 컴포넌트는 화살표 함수보다 function 키워드를 사용하는게 요즘 트렌드라고 한다.

1.1.1 기존 프로젝트에 타입스크립트 추가하기

참고

1. git switch -c dev 또는 git branch -b dev 로 새 브랜치(dev) 생성
2. 관련 패키지 설치
   1. typescript
   2. @types/node
   3. @types/react
   4. @types/react-dom
   5. @types/jest
   6. @types/react-router-dom ( *라우터 사용하는 경우에만 )
3. 프로젝트에 타입스크립트 추가 (npx tsc —init)
4. tsconfig.json 환경설정 값 프로젝트에 맞게 변경

관련 패키지 설치

devDependencies 로 설치하는게 좋다.

• 팀원들 모두가 항상 동일한 버젼으로 설치한다는 보장이 없다.
• 시스템 레벨로 아래 패키지들을 설치해둔 경우 프로젝트를 셋업할 때 별도의 단계가 추가된다.

npm i -d typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom

tsconfig.json 생성

npx tsc --init

1.1.2 [디버깅] Cannot use JSX unless the '--jsx' flag is provided.ts

// tsconfig.json
"compilerOptions" : {
	"jsx": "react" // 추가
}

1.1.3 [디버깅] could not find a declaration file for module implicitly has an 'any' type.

// tsconfig.json
"compilerOptions" : {
	"allowJS": true // 추가
}

점진적인 마이그레이션을 위해 .js 확장자를 허용해주도록 임시로 설정값 변경.

1.1.4 Binding element 'children' implicitly has an 'any' type

Props의 children의 타입을 지정해주어야 한다.