기존 프로젝트에 타입스크립트 적용

Tags
부가설명
react, react-native types 설치 + tsocnfig.json 설정

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

1. TypeScript와 types(React Native와 Jest를 위한)를 프로젝트에 추가

$ npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

or

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

2. TypeScript config 파일 추가.

기존의 jsconfig.json을 tsconfig.json으로 고치고, 아래 내용 추가
{
  "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"
  ]
}

3. jest.config.js 추가

Jest에서 타입스크립트 쓰기 위한 설정
module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

4. .js 파일을 .ts 또는 .tsx 로 확장자 변경

💡
루트디렉토리/index.js는 .js 확장자 그대로 유지해야함. 안그러면 프로덕션 빌드 시 이슈가 생길 수 있다.

5. $ yarn tsc

$ yarn tsc # to type-check your new TypeScript files.