1. react-native typescript

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

make 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"
  ]
}

index.js는 절대 건딜지 말것
.js ---> .tsx 로 모두 바꿔줄것

2.styled-component typescript

https://styled-components.com/docs/api#typescript

Web

npm install --save @types/styled-components

React Native

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

2-1. make styled.d.ts file

import 'styled-components'

declare module 'styled-components' {
  export interface DefaultTheme {
    mainBgColor: string
    textColor: string
    accentColor: string
  }
}~~~~

mainBgColor, textColor, accentColor은
styled.js에 있는 변수임

사용!
~~const Column = styled.View`
  justify-content: center;
  align-items: center;
  background-color: ${props => props.theme.mainBgColor};
`~~

# 3. react-navigation typescript
https://reactnavigation.org/docs/typescript/


const Movies: React.FC<NativeStackScreenProps<any, 'Movies'>> = ({
  navigation,
}) => (
  <Header>
    <Column>
      <Btn onPress={() => navigation.navigate('Stack', { screen: 'three' })}>
        <Title>Movies</Title>
      </Btn>
    </Column>
    <Fotter>123123</Fotter>
  </Header>



Similarly, you can import StackNavigationProp from @react-navigation/stack, DrawerNavigationProp from @react-navigation/drawer, BottomTabNavigationProp from @react-navigation/bottom-tabs etc.