react native 에서 typescript 적용(활성화) 하는 방법

reactnative.dev/docs/typescript

 

출처: https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project

 

기존에 있는 react native 프로젝트에 typescript를 적용하는 방법입니다. 

react native 프로젝트에 typescript 를 적용한 전 후

Step 01: Install 

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

Or

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

 

Step 02:  Edting tsconfig.json

프로젝트 가장 상위의 tsconfig.json 파일에 아래 코드를 추가합니다. 이미 있다면 생략.

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

Step 03: Create jest.config.js adding following code snippet.

jest.config.js 파일을 생성하고 아래와 같이 입력합니다. 이미 있다면 생략.

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

Step 04: Rename a JavaScript file to be *.tsx

모든 자바스크립트 파일의 확장자를 tsx로 변경 합니다. 

단, ./index.js 파일은 남겨둡니다. 

 

Step 05: Run yarn tsc to type-check new TypeScript file.

yarn tsc 를 실행해서 tytpescript 파일들에 대해 타입체크를 실행합니다.

yarn tsc

yarn 이 없다면 (설치)

npm install --global yarn