Leon Chaewon Kong's dev blog

React Native - React Native에서 TypeScript 사용하기

오늘은 React Native 프로젝트에 TypeScript를 적용하는 방법을 알아본다.

React Native 프로젝트 생성

터미널에서 아래 명령을 실행해 MyProject를 생성한다

react-native init MyProject

TypeScript 적용

다음으로 TypeScript를 설치한다.

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

루트에 tsconfig.json 파일을 생성한다.

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

여기서 특히 확인해야 할 것은 resolveJsonModule: true 부분이다. 이 부분이 빠지면 *.json 형태의 파일 임포트(import)에서 에러가 발생한다.

다음으로 index.jsApp.js의 확장자를 *.tsx로 바꿔준다.

즉, index.tsxApp.tsx로 바꿔준다.

만약 jest를 사용한다면 jest.config.js파일을 생성하고 아래 내용을 입력해 준다.

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

Lint 적용

다음으로 AirBnB 스타일의 tslint를 적용해 보자.

우리는 tslint-config-airbnb라는 모듈을 설치해 사용할 예정이다.

먼저 tslint.json 파일을 루트에 생성하고, 아래 내용을 입력해 준다.

{
  "defaultSeverity": "error",
  "extends": ["tslint-config-airbnb", "tslint-react"],
  "jsRules": {},
  "rules": {
    "import-name": [false],
    "variable-name": [
      true,
      "ban-keywords",
      "check-format",
      "allow-pascal-case" // 파스칼 케이스를 허용해야 import React from 'react'에서 React가 소문자 react로 린팅되지 않음
    ],
    "quotemark": [true, "single", "avoid-escape", "avoid-template"]
  },
  "rulesDirectory": []
}

다음으로 루트의 package.json을 열고 scripts에 다음과 같이 lint 옵션을 추가한다.

"scripts": {
		// 기존 scripts 내용
    "lint": "tslint -p tsconfig.json src/**/*.{ts,tsx}" // 린트 옵션 추가(이미 존재한다면 수정하기)
  },

이제 tslint-config-airbnbtslint, tslint-react를 설치하자.

yarn add -D tslint tslint-config-airbnb tslint-react

-D 옵션을 사용해 “devDependency”에 위의 라이브러리들이 추가되도록 한다.

확인

이제 초기 환경 세팅은 완료되었다.

yarn tsc 명령을 터미널에서 실행하여 정상적으로 프로젝트가 컴파일 되는지 확인한다.

참고자료