React native install typescript

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.

npx react-native init MyApp --template react-native-template-typescript 

If the above command is failing, you may have an old version of react-native or react-native-cli installed globally on your system. To fix the issue try uninstalling the CLI:

and then run the npx command again. Optionally, you can also use the command given below to get started with your template.

You can use Expo, 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 

yarn create expo-app --template 

Or you could use Ignite, which also has a TypeScript template:

npm install -g ignite-cli ignite new MyTSProject 

yarn global add ignite-cli ignite new MyTSProject 

Adding TypeScript to an Existing Project​

npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer @tsconfig/react-native 

yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer @tsconfig/react-native 

  "extends": "@tsconfig/react-native/tsconfig.json" > 

module.exports =   preset: 'react-native', moduleFileExtensions: [ 'ts', 'tsx', 'js', 'jsx', 'json', 'node', ], >; 

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.

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 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.FCProps> = (  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​

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:

1. Edit your tsconfig.json to have your custom path mappings. Set anything in the root of src to be available with no preceding path reference, and allow any test file to be accessed by using tests/File.tsx :

  "target": "esnext", + "baseUrl": ".", + "paths":  + "*": ["src/*"], + "tests": ["tests/*"], + "@components/*": ["src/components/*"], + >,  > 

npm install --save-dev babel-plugin-module-resolver 

yarn add --dev babel-plugin-module-resolver 

1. Finally, configure your babel.config.js (note that the syntax for your babel.config.js is different from your tsconfig.json ):

   plugins: [ + [ + 'module-resolver', +   + root: ['./src'], + extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'], + alias:  + tests: ['./tests/'], + "@components": "./src/components", + > + > + ]  ] > 

Источник

Using TypeScript

TypeScript 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​

New projects created by the React Native CLI or popular templates like Ignite will use TypeScript by default.

TypeScript may also be used with Expo, 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​

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 

yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript 

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 to see the versions shipped by React Native.

  "extends": "@tsconfig/react-native/tsconfig.json" > 

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.

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​

Out of the box, TypeScript sources are transformed by Babel 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 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 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.FCProps> = (  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​

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:

1. Edit your tsconfig.json to have your custom path mappings. Set anything in the root of src to be available with no preceding path reference, and allow any test file to be accessed by using tests/File.tsx :

  - "extends": "@tsconfig/react-native/tsconfig.json" + "extends": "@tsconfig/react-native/tsconfig.json", + "compilerOptions":  + "baseUrl": ".", + "paths":  + "*": ["src/*"], + "tests": ["tests/*"], + "@components/*": ["src/components/*"], + >, + > > 

npm install --save-dev babel-plugin-module-resolver 

Источник

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.

npx react-native init MyApp --template react-native-template-typescript 

You can use Expo which has two TypeScript templates:

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 install -g ignite-cli ignite new MyTSProject 

yarn global add ignite-cli ignite new MyTSProject 

Adding TypeScript to an Existing Project​

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 

  "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" ] > 

module.exports =   preset: 'react-native', moduleFileExtensions: [ 'ts', 'tsx', 'js', 'jsx', 'json', 'node', ], >; 

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.

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 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.FCProps> = (  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​

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:

1. Edit your tsconfig.json to have your custom path mappings. Set anything in the root of src to be available with no preceding path reference, and allow any test file to be accessed by using tests/File.tsx :

  "target": "esnext", + "baseUrl": ".", + "paths":  + "*": ["src/*"], + "tests": ["tests/*"], + "@components/*": ["src/components/*"], + >,  > 

npm install --save-dev babel-plugin-module-resolver 

yarn add --dev babel-plugin-module-resolver 

1. Finally, configure your babel.config.js (note that the syntax for your babel.config.js is different from your tsconfig.json ):

   plugins: [ + [ + 'module-resolver', +   + root: ['./src'], + extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'], + alias:  + tests: ['./tests/'], + "@components": "./src/components", + > + > + ]  ] > 

Источник