Migrate to TS

https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project

아래 내용은 위 링크에도 있음

설치

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

tsconfig.json 파일 추가

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": tr## ue,
    "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"
  ]
}

js로 작업했던 파일 확장자 변경

index.js 를 제외한 모든 파일 변경 완료 index.js 는 변경할 경우 에러가 생긴다고 함

특이사항

코드에 타입 문제로 빨간 줄이 있어도 실행이 된다

리액트와는 다르게 타입스크립트가 타입을 강제하지 않고, 체킹을 도와주는 보조적 역할에 그침

그래서 코드를 migrate한 후 코드에는 빨간 줄이 생기지만 앱은 정상적으로 작동함 런타임에 간섭하지 않는다

Styled-Component 오류 해결하기

• 타입 못 알아듣는 문제 해결

npm install --save @types/styled-components @types/styled-components-react-native

styled.js → theme.ts

import { Palette } from "./colors";

const lightTheme = {
  mainBgColor: Palette.Mono100,
  textColor: Palette.Mono500,
  accentColor: Palette.Primary,
};
const darkTheme = {
  mainBgColor: Palette.Mono500,
  textColor: Palette.Mono100,
  accentColor: Palette.Primary,
};

export { lightTheme, darkTheme };

DefaultTheme 타입 정의