An in-depth guide on configuring an Expo project with TypeScript.
Example project: with-typescript
Expo has first-class support for TypeScript. The JavaScript interface of the Expo SDK is completely written in TypeScript.
To get started, create a tsconfig.json in your project root:
-
touch tsconfig.json
Running npx expo start
will prompt you to install the required dependencies (typescript
, @types/react
, @types/react-native
), and automatically configure your tsconfig.json.
Rename files to convert them to TypeScript. For example, you would rename App.js to App.tsx. Use the .tsx extension if the file includes React components (JSX). If the file did not include any JSX, you can use the .ts file extension.
-
mv App.js App.tsx
You can now run yarn tsc
or npx tsc
to typecheck the project.
You can disable the TypeScript setup in Expo CLI with the environment variable
EXPO_NO_TYPESCRIPT_SETUP=1
A project's tsconfig.json should extend the expo/tsconfig.base
by default. This sets the following default compiler options (which can be overwritten in your project's tsconfig.json):
"allowJs"
: true
"esModuleInterop"
: true
allowSyntheticDefaultImports
to true
, allowing default imports from modules with no default export."jsx"
: "react-native"
jsx
extension to js
. This is optimized for bundlers that transform the JSX internally (like Metro)."lib"
: ["DOM", "ESNext"]
"moduleResolution"
: "node"
"noEmit"
: true
"resolveJsonModule"
: true
"skipLibCheck"
: true
*.d.ts
)."target"
: "ESNext"
Expo CLI will automatically modify your tsconfig.json to the preferred default which is optimized for universal React development:
{
"extends": "expo/tsconfig.base",
"compilerOptions": {}
}
The default configuration is forgiving and makes it easier to adopt TypeScript. If you'd like to opt-in to more strict type checking, you can add "strict": true
to the compilerOptions
. We recommend enabling this to minimize the chance of introducing runtime errors.
Certain language features may require additional configuration, for example if you'd like to use decorators you will need to add the experimentalDecorators
option. For more information on the available properties see the TypeScript compiler options documentation documentation.
-
npx create-expo-app -t expo-template-blank-typescript
The easiest way to get started is to initialize your new project using a TypeScript template, then run yarn tsc
or npx tsc
to "typecheck" the project.
When you create new source files in your project you should use the .ts extension or the .tsx if the file includes React components.
You may find that you want to use TypeScript for the config files in your project, like the webpack.config.js, metro.config.js, or app.config.js. These will require a little extra setup. You can utilize the ts-node
require hook to import TypeScript files into your JS config file, meaning any import can be TypeScript, but the root file will still need to be JavaScript.
-
yarn add -D ts-node typescript
You may need to install the
@expo/webpack-config
package.
require('ts-node/register');
module.exports = require('./webpack.config.ts');
import createExpoWebpackConfigAsync from '@expo/webpack-config/webpack';
import { Arguments, Environment } from '@expo/webpack-config/webpack/types';
module.exports = async function (env: Environment, argv: Arguments) {
const config = await createExpoWebpackConfigAsync(env, argv);
// Customize the config before returning it.
return config;
};
require('ts-node/register');
module.exports = require('./metro.config.ts');
import { getDefaultConfig } from 'expo/metro-config';
const config = getDefaultConfig(__dirname);
module.exports = config;
Technically app.config.ts is supported by default, but it doesn't support external TypeScript modules, or tsconfig.json customization. You can use the following approach to get a more comprehensive TypeScript setup.
require('ts-node/register');
module.exports = require('./app.config.ts');
import { ExpoConfig } from 'expo/config';
// In SDK 46 and lower, use the following import instead:
// import { ExpoConfig } from '@expo/config-types';
const config: ExpoConfig = {
name: 'my-app',
slug: 'my-app',
};
export default config;
A good place to start learning TypeScript is the official TypeScript Handbook.
We recommend reading over and referring to the React TypeScript CheatSheet to learn how to type your React components in a variety of common situations.
If you would like to go deeper and learn how to create more expressive and powerful types, we recommend the Advanced Static Types in TypeScript course (this requires an egghead.io subscription).