React-Native/typeScript

[React-Native][TypeScript] React Native TypeScript로 프로젝트 만들기

TrueSik 2023. 2. 4. 22:46

Reat-Native (JavaScript)

// 프로젝트 생성
npx react-native init projectName
// react-native 버전을 지정해서 프로젝트 생성
npx react-native init projectName --version=0.68.0

React-Native (TypeScript)

//프로젝트 생성
npx react-native init projectName --template react-native-template-typescript
// typescript 버전지정 프로젝트 생성
npx react-native init projectName --template react-native-template-typescript@6.10.0

 

TypeScript 프로젝트 특징

1. App.js -> App.tsx로 변경이 됩니다.

2. tsconfig.json 파일이 추가가 되어있습니다. (TypeScript 환경 설정을 위한 파일)

3. TypeScript 코드의 확장자는 ts, tsx입니다. ( tsx는 JSX가 지원이 됨)

 

React Native로 TypeScript 프로젝트 생성 할 때 주의사항

React Native 버전과 맞는 TypeScript로 설정을 해줘야 실행할 때 오류가 안남 
버전 체크는 아래의 깃 링크에서 확인이 가능합니다.

https://github.com/react-native-community/react-native-template-typescript

 

GitHub - react-native-community/react-native-template-typescript: 👾 Clean and minimalist React Native template for a quick st

👾 Clean and minimalist React Native template for a quick start with TypeScript. - GitHub - react-native-community/react-native-template-typescript: 👾 Clean and minimalist React Native template for ...

github.com

 

 

참고 

https://reactnative.dev/docs/typescript

 

Using TypeScript · React Native

TypeScript is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, but also support JavaScript and Flow.

reactnative.dev

https://github.com/react-native-community/react-native-template-typescript

 

GitHub - react-native-community/react-native-template-typescript: 👾 Clean and minimalist React Native template for a quick st

👾 Clean and minimalist React Native template for a quick start with TypeScript. - GitHub - react-native-community/react-native-template-typescript: 👾 Clean and minimalist React Native template for ...

github.com