This repository is a React Native demo app using the Expo framework and written in TypeScript.
This repo used to also contain a type definition file for Expo, but that work has been merged into the @types/expo
package. The expo
npm package now contains its own set of type definitions, so @types/expo
is now ignore, and has been removed. There is currently a type check issue with the SVGs that I haven't figured out how to solve.
Install expo-cli
globally.
# Install expo-cli globally using Yarn.
yarn global add expo-cli
If you prefer to use npm the command is npm install --global expo-cli
.
There are a surprising amount of of warnings when building the app, because of peer dependencies not being correct. My guess is that the Expo team has a tough time getting all the added React Native libraries to play well together, and this app seems to run fine, so I believe it's safe to ignore the warnings.
Start the local server. This will give you a QR code that you can scan using the Expo Client app on your mobile device.
yarn start
If you're on a Mac and have Xcode installed, you can run the app using the iOS Simulator with the following command. I am sure you can do something similar with Android.
yarn ios
Since version 31 Expo includes Babel 7, and Babel is used out of the box to transform the TypeScript into JavaScript. Note that Babel doesn't "perform type-checking on TypeScript code; it [only transforms] your code, and it will compile regardless of whether type errors are present.", so if you want to type check your code, you have to run the TypeScript compiler separately. The npm/Yarn command script check-types
in this repo does this. tsconfig.json
is only used when checking the types. Babel is configured with babel.config.js
.
The Expo team is currently working on native type definitions, but this works is not yet done. Look for the types
property in node_modules/expo/package.json
. If this property exists then TypeScript will use there instead of @types/expo
. You can add the lines below to your tsconfig.json
if you want to use @types/expo
instead of the official type definitions. I would recommend trying to the use the built-in type definition once they are released, and only install @types/expo
if they aren't good enough for your project.
"paths": {
"expo": ["../node_modules/@types/expo", "../node_modules/expo"]
}
This guide show how to transform and Expo app written in JavaScript in to TypeScript. While Expo supports TypeScript since version 31, it is still a work in progress, and namely the type definition files are not yet included.
Setting breakpoints in TypeScript files works, and hot reloading works, so it's a pretty solid development experience as long as you're lucky enough to not hit a missing type definition.
Add TypeScript and the helper library, tslib
, to the project. I prefer micro managing the version of the packages that I'm using so I add --exact
, but this is optional. You can, of course, also use npm
instead of yarn
.
yarn add --dev --exact typescript react-native-typescript-transformer
yarn add --exact tslib
Configure TypeScript by adding a tsconfig.json
file in the root of your project. If you are stating a new project, I would definitely recommend including "strict": true
and some of the other compiler checks. If you are converting a JavaScript project to TypeScript, you might want to loosen up the rules to start with, and apply them gradually.
Create a src
folder, move App.js
to that folder, and rename the file to App.tsx
. Since TypeScript has a syntax that is very similar to JavaScript it is probably not necessary to make any modifications to App.tsx to make it valid TypeScript. It is not required to put the sources files in a src
folder, but that is the de facto standard.
Create a new App.js
in the root of the project, and insert the following lines. Expo will still be looking for App.js in the root of the project, and these lines simply loads src/App.tsx
.
import App from './src/App'
export default App
Finally add the type definitions for React, React Native, Expo and the Expo icons.
yarn add --dev --exact @types/react @types/react-native @types/expo @types/expo__vector-icons
Since Expo is evolving quickly it is not uncommon that the type definitions are outdated or simply missing. AudioScreen.tsx line 59 shows how to deal with an incorrect type definition and [MapViewScreen.tsx line 5] show how to deal with missing type definitions.
The repository started out as mainly a big collection of TypeScript interfaces. While most developers are pretty strict about terminating lines with or without a semicolon, this is apparently not the case when it comes to writing interfaces. So after reading about the JavaScript Standard Style advocating not using semicolons, I thought this would be a simple way to clean up the mess. And now that I've become used to looking a TypeScript code without semicolons it really like it. It's definitely cleaner, and I have yet to stumble upon a piece of code that would be more readable with the semicolons.
// Some use semicolons in interfaces.
interface Point {
x: number
y: number
}
// Some use commas.
interface Point {
x: number
y: number
}
// And sometimes it's a mix.
interface Point {
x: number
y: number
color: {
border: string
fill: string
}
}
- expo-ts-example, the basis for this project
- TypeScript-React-Native-Starter
- react-native-typescript-starter