Using TypeScript
TypeScript is a language which extends JavaScript by adding type definitions, much like Flow. While React Native is built in Flow, it supports both TypeScript and Flow by default.
Getting Started with TypeScriptβ
If you're starting a new project, there are a few different ways to get started.
You can use the TypeScript template:
npx react-native init MyApp --template react-native-template-typescript
Note: If the above command is failing, you may have an old version of
react-native
orreact-native-cli
installed globally on your system. To fix the issue try uninstalling the CLI:
npm uninstall -g react-native-cli
oryarn global remove react-native-cli
and then run the
npx
command again.
You can use Expo which has two TypeScript templates:
- npm
- Yarn
npm install -g expo-cli
expo init MyTSProject
yarn global add expo-cli
expo init MyTSProject
Or you could use Ignite, which also has a TypeScript template:
- npm
- Yarn
npm install -g ignite-cli
ignite new MyTSProject
yarn global add ignite-cli
ignite new MyTSProject
Adding TypeScript to an Existing Projectβ
- Add TypeScript and the types for React Native and Jest to your project.
- npm
- Yarn
npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
- Add a TypeScript config file. Create a
tsconfig.json
in the root of your project:
{
"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"
]
}
- Create a
jest.config.js
file to configure Jest to use TypeScript
module.exports = {
preset: 'react-native',
moduleFileExtensions: [
'ts',
'tsx',
'js',
'jsx',
'json',
'node',
],
};
- Rename a JavaScript file to be
*.tsx
You should leave the
./index.js
entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
- Run
yarn tsc
to type-check your new TypeScript files.
How TypeScript and React Native worksβ
Out of the box, transforming your files to JavaScript works via the same Babel infrastructure as a non-TypeScript React Native project. We recommend that you use the TypeScript compiler only for type checking. If you have existing TypeScript code being ported to React Native, there are one or two caveats to using Babel instead of TypeScript.
What does React Native + TypeScript look likeβ
You can provide an interface for a React Component's Props and State via React.Component<Props, State>
which will provide type-checking and editor auto-completing when working with that component in JSX.
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
export type Props = {
name: string;
baseEnthusiasmLevel?: number;
};
const Hello: React.FC<Props> = ({
name,
baseEnthusiasmLevel = 0,
}) => {
const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
baseEnthusiasmLevel,
);
const onIncrement = () =>
setEnthusiasmLevel(enthusiasmLevel + 1);
const onDecrement = () =>
setEnthusiasmLevel(
enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
);
const getExclamationMarks = (numChars: number) =>
numChars > 0 ? Array(numChars + 1).join('!') : '';
return (
<View style={styles.container}>
<Text style={styles.greeting}>
Hello {name}
{getExclamationMarks(enthusiasmLevel)}
</Text>
<View>
<Button
title="Increase enthusiasm"
accessibilityLabel="increment"
onPress={onIncrement}
color="blue"
/>
<Button
title="Decrease enthusiasm"
accessibilityLabel="decrement"
onPress={onDecrement}
color="red"
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
greeting: {
fontSize: 20,
fontWeight: 'bold',
margin: 16,
},
});
export default Hello;
You can explore the syntax more in the TypeScript playground.
Where to Find Useful Adviceβ
- TypeScript Handbook
- React's documentation on TypeScript
- React + TypeScript Cheatsheets has a good overview on how to use React with TypeScript
Using Custom Path Aliases with TypeScriptβ
To use custom path aliases with TypeScript, you need to set the path aliases to work from both Babel and TypeScript. Here's how:
- Edit your
tsconfig.json
to have your custom path mappings. Set anything in the root ofsrc
to be available with no preceding path reference, and allow any test file to be accessed by usingtests/File.tsx
:
"target": "esnext",
+ "baseUrl": ".",
+ "paths": {
+ "*": ["src/*"],
+ "tests": ["tests/*"],
+ "@components/*": ["src/components/*"],
+ },
}
- Add
babel-plugin-module-resolver
as a development package to your project:
- npm
- Yarn
npm install --save-dev babel-plugin-module-resolver
yarn add --dev babel-plugin-module-resolver
- Finally, configure your
babel.config.js
(note that the syntax for yourbabel.config.js
is different from yourtsconfig.json
):
{
plugins: [
+ [
+ 'module-resolver',
+ {
+ root: ['./src'],
+ extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+ alias: {
+ tests: ['./tests/'],
+ "@components": "./src/components",
+ }
+ }
+ ]
]
}