타입스크립트 개발환경 셋팅

• 공식문서 : https://reactnative.dev/docs/typescript

• 공식문서 : https://reactnative.dev/blog/2018/05/07/using-typescript-with-react-native

• MS 공식 : https://github.com/Microsoft/TypeScript-React-Native-Starter

1) 프로젝트 첫 생성

# 최신 버전으로 하고 싶을 시
$ npx react-native@latest init <프로젝트명> --template react-native-template-typescript

# 특정 버전으로 하고 싶을 시
$ npx react-native@<버전명> init <프로젝트명> --template react-native-template-typescript
$ npx react-native@0.66.0 init <프로젝트명> --template react-native-template-typescript

2) 기존 프로젝트에 추가

2-1) 타입스크립트, RN, Jest에 필요한 타입 추가

$ yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

2-2) tsconfig.json 생성

• 기존의 jsconfig.json을 tsconfig.json으로 바꾸고, 아래 옵션들 추가.

• 한번에 전부 .tsx로 바꾸기 힘드므로 .js 파일도 허용하도록 allowJs 옵션을 true로 설정한다.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

2-3) jest.config.js 파일 추가

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

2-4) 기존의 *.js 파일을 *.tsx 로 확장자 변경

• ./index.js (프로젝트 루트경로) 파일은 그대로 남겨둬야함.
그렇지 않으면 프로덕션 빌드 시 이슈가 발생할 수 있음.