[React Native 삽질기] #5 -  typescript 적용하기

머리 숱 많은애가 쟈스가 언어냐고,, 해서 타입스크립트를 쓰려한다 ^^
농담이고, 타입스크립트를 가장 기본적인 형식으로 라이트하게 가져가면 에러 방지 및 디버깅이 수월하고 나중에 코드 인수인계할때도 도움이 많이 되기 때문에 도입하려한다. (명세도 제대로 없어서 스스로 명세 세우는데에 도움이 됨.. 아주 조금 번거롭긴 하지만 생산성은 분명 향상됨)

공식문서대로 천천히 따라가보자

1. 설치하기

난 이미 진행중인 프로젝트이므로 바로 아래 명령어로 설치했다.

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

2. 파일 생성

root 위치에 아래 두 파일 생성해주기
1) tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": [
      "es2017"
    ],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

2) jest.config.js

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

3. 기존 파일 형식 변경하기

js -> tsx 로 변경해주기!

끗

+) 추가

navigation, route, props 등의 타입을 어떻게 쓰는지 추가 정리를 하겠다!

AuthStack을 예시로 들면 (나의 Stack구조 보러가기)

다음과 같이 AuthStack type을 설정해줄 수 있다.
authStack.tsx

import { createNativeStackNavigator } from "@react-navigation/native-stack";

export type AuthStackParamList = {
  Login: undefined;
  SignUp: {
    token: string;
  }
}

const Stack = createNativeStackNavigator<AuthStackParamList>();

나의 구조상, Login 화면이 있고 거기는 props가 없다.
Login Screen에 props가 없기 때문에 undefined를 해주고,
SignUp 부분은 Login에서 SignUp으로 navigate를 할 때 token을 props로 넘겨줄 것이라 저렇게 지정해주었다!

그리곤 Stack을 정의하는 부분에 해당 ParamList를 정의해주면 끝!! 참 쉽죠잉?

그리고 나서 SignUpScreen의 index.tsx에서는

import type { NativeStackScreenProps } from '@react-navigation/native-stack';

type Props = NativeStackScreenProps<AuthStackParamList, 'SignUp'>


const SignUpScreen = ({ navigation, route }: Props) => {
어쩌고저쩌고
}

하면 된당!!

공식문서에 아주 잘 나와있다 ^__^

더 디벨롭하게 되면 정리하겠다!!