마스터 누누

[React Native] 리액트 네이티브에 Type Script 설정 본문

App/React native

[React Native] 리액트 네이티브에 Type Script 설정

마스터누누 2017.10.15 15:21

리액트 네이티브에 Type Script 설정 



리액트를 사용하면서 Type Script가 적용 되었을 경우 상당히 시너지를 내는 것을 경험 하였다.

그래서 리액트 네이티브에도 동일하게 Type Script를 적용하려고 한다.

개발 툴로 expo를 사용하기 때문에 이에 맞는 설정 방법을 소개하겠다.





1
2
3
4
5
6
7
8
// 리액트 네이티브 변환 미들 웨어 설치
npm i -D react-native-typescript-transformer
 
// tsconfig 생성
tsc --init
 
// 타입 스크립트 module 설치
npm i -S @types/react @types/react-native
cs


우선 type script 변환을 위한 미들웨어를 설치한다.

또한 type script 설정에 필요한 tsconfig를 생성하기 위해 tsc --init 명령어를 입력해준다.

마지막으로 타입 스크립트 module을 설치 해주면 된다.





1
2
3
4
5
6
7
8
9
{
    "packagerOpts": {
      "sourceExts": [
        "ts",
        "tsx"
      ]
    },
    "transformer""node_modules/react-native-typescript-transformer/index.js"
}
cs


또한 app.json에 위와 같은 코드를 추가해 준다.





1
2
3
4
5
6
7
8
{
  "compilerOptions": {
    "target""es5",                                     
    "module""commonjs",                     
    "jsx""react",
    "strict"true                            
  }
}
cs


마지막으로 jsx의 설정을 위해 tsconfig 내부에 "jsx" =  "react" 를 입력해준다.

이로써 기본적인 type script 설정이 완료되었다.


저작자 표시
신고

'App > React native' 카테고리의 다른 글

[React Native] 리액트 네이티브에 Type Script 설정  (0) 2017.10.15
[React Native] 개발환경 설정  (0) 2017.10.14
0 Comments
댓글쓰기 폼