Expo Typescript Install

Expo is a popular toolchain for building cross-platform mobile apps with React. TypeScript is a strongly typed programming language that helps catch errors at compile time and makes code easier to maintain. Combining Expo and TypeScript can make app development faster and more reliable. Here's how to install TypeScript in your Expo project.

Prerequisites

To follow along with this tutorial, you should have the following installed:

• Node.js and npm (installed together)
• Expo CLI (npm install -g expo-cli)

Install dependencies

First, create a new Expo project or navigate to an existing one. In a terminal window, navigate to the project directory and run:

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

This installs the TypeScript compiler (typescript) as well as type definitions for React, React Native, and Expo.

Add a tsconfig.json file

Next, create a tsconfig.json file in the project directory with the following content:

{
  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["es6"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "outDir": "dist",
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

This file specifies the TypeScript compiler options and tells it where to find the project source code.

Rename files

Finally, rename your .js files to .tsx for React components or .ts for regular TypeScript files.

mv App.js App.tsx

Conclusion

You now have TypeScript installed in your Expo project. Start your app with expo start and it should work as expected. Happy coding!