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:
Note: If the above command is failing, you may have an old version of
react-native-cliinstalled globally on your system. To fix the issue try uninstalling the CLI:
npm uninstall -g react-native-clior
yarn global remove react-native-cli
and then run the
You can use Expo which has two TypeScript templates:
Or you could use Ignite, which also has a TypeScript template:
Adding TypeScript to an Existing Project
- Add TypeScript and the types for React Native and Jest to your project.
- Add a TypeScript config file. Create a
tsconfig.jsonin the root of your project:
- Create a
jest.config.jsfile to configure Jest to use TypeScript
You should leave the
./index.jsentrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
yarn tscto type-check your new TypeScript files.
How TypeScript and React Native works
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.
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.jsonto have your custom path mappings. Set anything in the root of
srcto be available with no preceding path reference, and allow any test file to be accessed by using
babel-plugin-module-resolveras a development package to your project:
- Finally, configure your
babel.config.js(note that the syntax for your
babel.config.jsis different from your