# Using TypeScript [TypeScript](https://www.typescriptlang.org/) is a language which extends JavaScript by adding type definitions. New React Native projects target TypeScript by default, but also support JavaScript and Flow. ## Getting Started with TypeScript[​](#getting-started-with-typescript "Direct link to Getting Started with TypeScript") New projects created by the [React Native CLI](/docs/getting-started-without-a-framework.md#step-1-creating-a-new-application) or popular templates like [Ignite](https://github.com/infinitered/ignite) will use TypeScript by default. TypeScript may also be used with [Expo](https://expo.io), which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. ``` npx create-expo-app --template ``` ## Adding TypeScript to an Existing Project[​](#adding-typescript-to-an-existing-project "Direct link to Adding TypeScript to an Existing Project") 1. Add TypeScript, types, and ESLint plugins to your project. * npm * Yarn ``` npm install -D typescript @react-native/typescript-config @types/jest @types/react @types/react-test-renderer ``` ``` yarn add --dev typescript @react-native/typescript-config @types/jest @types/react @types/react-test-renderer ``` note This command adds the latest version of every dependency. The versions may need to be changed to match the existing packages used by your project. You can use a tool like [React Native Upgrade Helper](https://react-native-community.github.io/upgrade-helper/) to see the versions shipped by React Native. 2. Add a TypeScript config file. Create a `tsconfig.json` in the root of your project: tsconfig.json ``` { "extends": "@react-native/typescript-config" } ``` 3. Rename a JavaScript file to be `*.tsx` warning 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. 4. Run `tsc` to type-check your new TypeScript files. * npm * Yarn ``` npx tsc ``` ``` yarn tsc ``` ## Using JavaScript Instead of TypeScript[​](#using-javascript-instead-of-typescript "Direct link to Using JavaScript Instead of TypeScript") React Native defaults new applications to TypeScript, but JavaScript may still be used. Files with a `.jsx` extension are treated as JavaScript instead of TypeScript, and will not be typechecked. JavaScript modules may still be imported by TypeScript modules, along with the reverse. ## How TypeScript and React Native works[​](#how-typescript-and-react-native-works "Direct link to How TypeScript and React Native works") Out of the box, TypeScript sources are transformed by [Babel](/docs/javascript-environment.md#javascript-syntax-transformers) during bundling. We recommend that you use the TypeScript compiler only for type checking. This is the default behavior of `tsc` for newly created applications. If you have existing TypeScript code being ported to React Native, there are [one or two caveats](https://babeljs.io/docs/en/next/babel-plugin-transform-typescript) to using Babel instead of TypeScript. ## What does React Native + TypeScript look like[​](#what-does-react-native--typescript-look-like "Direct link to What does React Native + TypeScript look like") You can provide an interface for a React Component's [Props](/docs/props.md) and [State](/docs/state.md) via `React.Component` which will provide type-checking and editor auto-completing when working with that component in JSX. components/Hello.tsx ``` import {useState} from 'react'; import {Button, StyleSheet, Text, View} from 'react-native'; export type Props = { name: string; baseEnthusiasmLevel?: number; }; function Hello({name, baseEnthusiasmLevel = 0}: Props) { const [enthusiasmLevel, setEnthusiasmLevel] = 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 ( Hello {name} {getExclamationMarks(enthusiasmLevel)}