typescript

2020-12-16 hit count image

create react-native project and develop it by applying typescript.

create react-native project

create RN project with below command.

react-native init proejct-name

install required libraries for typescript

install required libraries for applying typescript to the project.

npm install typescript @types/react @types/react-native --save-dev

typescript libraries

  • typescript: intsall typescript.
  • @types/react: intsll react types for typescript.
  • @types/react-native: intall RN type for typescript.

typescript configuration

configure typescript to make react-native work.

create tsconfig.json

create tsconfig.json in the project root folder and copy-paste below contents.

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

if you want more detail, see official website.

Make typescript project via React Native CLI

(0.60.2 version has some bugs.) If you feel bothered to configure these all settings, you can use React Native CLI to make React Native project based on Typescript to use the command below.

react-native init SampleProject --template typescript

code with typescript

change App.js filename to App.tsx and code with typescript style.

  • Class Component
import React from 'react';
...
interface Props {}
interface State {}
...
export default class App extends React.Component<Props, State> {
  • Functional Component
import React from 'react';
...
interface Props {}
...
const App = ({  }: Props) => {
...

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts