typescript

2019-05-23

react-native 프로젝트에 typescript를 적용하여 개발해 보자.

react-native 프로젝트 생성

아래에 명령어를 이용하여 RN 프로젝트를 생성합니다.

react-native init proejct-name

typescript에 필요한 라이브러리 설치

typescript가 동작할 수 있도록 필요한 라이브러리을 설치합니다.

npm install typescript @types/react @types/react-native --save-dev

typescript 라이브러리

  • typescript: typescript를 설치한다.
  • @types/react: typescript에 필요한 react의 type을 설치한다.
  • @types/react-native: typescript에 필요한 react-native의 type을 설치한다.

typescript 설정

typescript를 설정하여 react-native가 동작하도록 만듭니다.

tsconfig.json 만들기

프로젝트 root 폴더에 tsconfig.json파일을 생성하고 아래에 내용을 복사합니다.

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "noResolve": false,
    "noImplicitAny": false,
    "removeComments": false,
    "allowJs": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["./node_modules/@types", "./src/@types"]
  },
  "exclude": [
    "node_modules",
    "dest",
    "android",
    "ios",
    "acceptance-tests",
    ".jest",
    "src/setupTests.ts",
    "./node_modules/**/*"
  ],
  "include": ["./node_modules/@types", "./src/**/*", "./src/@types"]
}

자세한 내용은 공식 홈페이지를 참조하세요.

tslint.json 만들기

typescript 개발을 편리하게 하기 위해 tslint를 적용합니다. 아래에 내용을 프로젝트 root폴더에 tslint.json을 생성하고 복사합니다.

{
    "extends": [],
    "defaultSeverity": "warning",
    "linterOptions": {
      "exclude": [
        "config/**/*.js",
        "node_modules/**/*.ts"
      ]
    }
}

자세한 내용은 공식 홈페이지를 참조하세요.

rn-cli.config.js 만들기

Bruno Lemos님께서 No need for rn-cli.config.js anymore since v0.57라고 페이스북(facebook)에 댓글을 주셔서 확인해 본 결과 RN(react native) 버전 0.57 이상에서는 rn-cli.config.js가 필요 없는게 되었네요. 모두 참고 하시기 바랍니다.

typescript를 런타임중에 인식할 수 있게 도와주는 라이브러리을 위한 설정 파일입니다. 프로젝트 root폴더에 rn-cli.config.js 파일에 아래에 내용을 작성합니다.

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  },
};

typescript로 코딩하기

App.js를 App.tsx로 파일명을 수정하고 typescript 형식으로 코딩합니다.

import * as React from 'react';
...
interface Props {}
interface State {}
...
export default class App extends React.Component<Props, State> {
Buy me a coffeeBuy me a coffee
Posts