Как установить typescript в react

Adding TypeScript

Note: this feature is available with react-scripts@2.1.0 and higher.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Installation​

To start a new Create React App project with TypeScript, you can run:

npx create-react-app my-app --template typescript 

yarn create react-app my-app --template typescript 

If you’ve previously installed create-react-app globally via npm install -g create-react-app , we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

Global installs of create-react-app are no longer supported.

To add TypeScript to an existing Create React App project, first install it:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest 

yarn add typescript @types/node @types/react @types/react-dom @types/jest 

Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx ) and restart your development server!

Type errors will show up in the same console as the build one. You’ll have to fix these type errors before you continue development or build your project. For advanced configuration, see here.

Getting Started with TypeScript and React​

You are not required to make a tsconfig.json file, one will be made for you. You are allowed to edit the generated TypeScript configuration.

• TypeScript Handbook
• TypeScript Example on React
• React + TypeScript Cheatsheets has a good overview on how to use React with TypeScript

Troubleshooting​

If your project is not created with TypeScript enabled, npx may be using a cached version of create-react-app . Remove previously installed versions with npm uninstall -g create-react-app or yarn global remove create-react-app (see #6119).

If you are currently using create-react-app-typescript, see this blog post for instructions on how to migrate to Create React App.

Constant enums and namespaces are not supported, you can learn about the constraints of using Babel with TypeScript here.

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​

1. Add TypeScript, types, and ESLint plugins to your 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.

1. Add a TypeScript config file. Create a tsconfig.json in the root of your project:

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

1. 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.

1. Run yarn tsc to type-check your new TypeScript files.

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.

components/Hello.tsx

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​

• 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:

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/*"], + >, + > > 

1. Add babel-plugin-module-resolver as a development package to your project:

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

Статическая типизация

These docs are old and won’t be updated. Go to react.dev for the new React docs.

Check out React TypeScript cheatsheet for how to use React with TypeScript.

Инструменты для статической типизации, такие как Flow или TypeScript, позволяют отлавливать большую часть ошибок ещё до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя автодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо PropTypes .

Flow — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React-компонентов. Ознакомиться с основами Flow можно на странице официальной документации.

Чтобы начать пользоваться возможностями Flow необходимо:

• добавить Flow в ваш проект как зависимость.
• убедиться, что аннотации Flow удаляются из кода при его компиляции.
• добавить несколько аннотаций типов и запустить Flow для их проверки;

Рассмотрим подробнее каждый из этих шагов.

Добавление Flow в проект

Убедитесь, что вы находитесь в директории проекта, после чего запустите одну из следующих команд:

Если вы используете Yarn:

yarn add --dev flow-bin

Если вы используете npm:

npm install --save-dev flow-bin

Эти команды добавят последнюю версию Flow в ваш проект.

Далее нужно добавить flow в секцию «scripts» файла package.json :

 // . "scripts":   "flow": "flow", // . >, // . >

Теперь можно запустить скрипт, прописав в терминале:

yarn run flow init

npm run flow init

Эти команды создадут файл с исходной конфигурацией Flow, который обязательно нужно закоммитить.

Удаление аннотаций Flow из скомпилированного кода

Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомпилированного JavaScript.

Для этого есть несколько способов — выбирайте в зависимости от того, какими инструментами для сборки проекта вы пользуетесь.

Create React App

Если для изначальной конфигурации проекта вы выбрали Create React App, вам ничего не нужно делать! Проект уже настроен должным образом и аннотации Flow должны удаляться при сборке проекта.

Примечание:

Дальнейшие инструкции рассчитаны на тех, кто не использует Create React App, т. к. там уже есть все необходимые настройки для работы с Flow.

Если для своего проекта вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow:

yarn add --dev @babel/preset-flow

npm install --save-dev @babel/preset-flow

Затем добавьте установленный пресет flow в свою конфигурацию Babel. Например так, если вы используете конфигурационный файл .babelrc :

 "presets": [ "@babel/preset-flow", "react" ] >

Этот пресет позволит использовать Flow в вашем коде.

Примечание:

Для работы с Flow не требуется отдельно устанавливать пресет react — Flow уже понимает JSX-синтаксис. Тем не менее, часто используют оба пресета одновременно.

Другие инструменты сборки

Для удаления аннотаций Flow существует отдельная библиотека: flow-remove-types. Она может пригодиться, если вы пользуетесь другими инструментами для сборки проекта.

Если всё было сделано правильно, можно попробовать запустить процесс Flow:

yarn flow

npm run flow

Вы должны увидеть примерно такое сообщение в терминале:

No errors! ✨ Done in 0.17s.

Добавление аннотаций типов

По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно её указывают в самом начале файла):

// @flow

Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт yarn flow или npm run flow и посмотреть, найдёт ли Flow какие-нибудь ошибки.

Кроме того, есть возможность заставить Flow проверять вообще все файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода, может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором.

Всё должно работать! Советуем изучить Flow подробнее, ознакомившись со следующими ресурсами:

• Flow Documentation: Type Annotations
• Flow Documentation: Editors
• Flow Documentation: React
• Linting in Flow

TypeScript — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно здесь.

Чтобы использовать TypeScript, нужно:

• добавить TypeScript в проект как зависимость.
• настроить компилятор.
• использовать правильные расширения файлов.
• установить файлы объявлений для используемых библиотек;

Остановимся подробнее на каждом из этих моментов.

Использование TypeScript вместе с Create React App

Create React App поддерживает TypeScript по умолчанию.

Чтобы создать новый проект с поддержкой TypeScript, используйте следующую команду:

npx create-react-app my-app --template typescript

Можно добавить поддержку TypeScript в уже существующий проект, как показано здесь.

Примечание:

Дальше описывается ручная настройка TypeScript. Если вы используете Create React App, можете пропустить этот раздел.

Добавление TypeScript в проект

Всё начинается с одной единственной команды в терминале:

yarn add --dev typescript

npm install --save-dev typescript

Ура! Вы установили последнюю версию TypeScript. Теперь в вашем распоряжении новая команда — tsc . Но прежде, чем праздновать, давайте добавим соответствующий скрипт в файл package.json :

 // . "scripts":   "build": "tsc", // . >, // . >

Настройка компилятора TypeScript

Сам по себе компилятор бесполезен, пока мы не скажем, что именно ему нужно делать. Для этого есть специальный конфигурационный файл tsconfig.json . Создадим этот файл:

yarn run tsc --init

npx tsc --init

Сгенерированный файл tsconfig.json уже содержит несколько параметров, которые используются компилятором по умолчанию. Кроме того, можно указать множество опциональных параметров. Более детальная информация по каждому параметру находится здесь.

Из всех параметров больше всего сейчас нас интересуют rootDir и outDir . Очевидно, что компилятор берёт исходный TypeScript код, и компилирует его в JavaScript. И нам нужно, чтобы не возникло путаницы между исходными файлами и сгенерированным кодом.

Эту проблему можно решить в два шага:

• Во-первых, изменим структуру проекта. Все файлы с исходниками переместим в директорию src .

├── package.json ├── src │ └── index.ts └── tsconfig.json

• Затем, укажем компилятору откуда ему брать исходные файлы и куда сохранять скомпилированный код.

// tsconfig.json  "compilerOptions":  // . "rootDir": "src", "outDir": "build" // . >, >

Отлично! Теперь, если мы запустим скрипт сборки проекта, компилятор сохранит готовый JavaScript в директорию build . В TypeScript React Starter уже есть готовый tsconfig.json с неплохим набором параметров для дальнейшей тонкой настройки под себя.

Как правило, скомпилированный JavaScript-бандл не следует хранить в системе контроля версий, так что не забудьте добавить папку build в файл .gitignore .

В React мы почти всегда используем .js в качестве расширений файлов компонентов. В TypeScript лучше разделять файлы на два типа:

.tsx для файлов, содержащих разметку JSX , и .ts для всего остального.

Если всё было сделано правильно, можно попробовать скомпилировать TypeScript:

yarn build

npm run build

Если эта команда не вывела ничего в терминале, то процесс компиляции прошёл успешно.

Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы объявлений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript-библиотеки в проекте совместно с TypeScript.

Существует два основных способа получения файлов объявлений:

Bundled — библиотека устанавливается вместе с собственным файлом объявлений. Это прекрасный вариант для нас, так как всё, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл объявлений, поищите index.d.ts в её исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в package.json в секциях typings или types .

DefinitelyTyped — это внушительный репозиторий файлов объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно:

# yarn yarn add --dev @types/react # npm npm i --save-dev @types/react

Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого надо создать файл declarations.d.ts в корне директории, где лежат исходники вашего проекта. Файл объявлений может выглядеть примерно так:

declare module 'querystring'  export function stringify(val: object): string export function parse(val: string): object >

Вот и всё, вы готовы писать код на TypeScript! Чтобы познакомиться с ним поближе, рекомендуем посетить эти ресурсы:

• TypeScript Documentation: Everyday Types
• TypeScript Documentation: Migrating from JavaScript
• TypeScript Documentation: React and Webpack

Reason — это не новый язык, а новый синтаксис и набор инструментов для проверенного временем языка OCaml. Reason предоставляет синтаксис, ориентированный на JavaScript-программистов, и использует уже известный всем способ распространения через NPM/Yarn.

Reason был разработан в Facebook и используется в некоторых продуктах этой компании — например, в Messenger. Reason всё ещё считается довольно экспериментальным инструментом, но уже имеет библиотеку привязок для React, поддерживаемую Facebook, а также отзывчивое сообщество.

Kotlin — это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM и JavaScript.

JetBrains разрабатывает и поддерживает несколько библиотек специально для сообщества React: React bindings совместно с Create React Kotlin App. Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации.

Помните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, F#/Fable вместе с elmish-react. Для подробной информации переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел!

Как использовать Typescript с Create React App

Create React App предоставляет набор пакетов и конфигураций, необходимых для начала работы над приложением React. Версия 2.0 представила официальную поддержку TypeScript, что позволило пользователям JavaScript писать код во фронтенд среде React с применением соглашений TypeScript.

TypeScript – это мощный инструмент, который помогает писать более надежный и самодокументированный код и позволяет разработчикам быстрее обнаруживать ошибки.

В этом руководстве вы научитесь настраивать приложение React с помощью TypeScript и Create React App.

Требования

• Локальная установка Node.js. Инструкции по установке зависят от дистрибутива: Mac OS, Ubuntu, CentOS, Debian.
• Базовое знакомство с React.
• Некоторое знакомство с соглашениями TypeScript.
• Рекомендуется также установить современный редактор кода, поддерживающий подсказки. Например, Visual Studio Code предоставляет эту функцию через IntelliSense.

Это руководство было проверено на версиях Node v15.13.0, npm v7.8.0, react-scripts v4.0.3, response v17.0.2 и typescript v4.2.3.

Создание приложения в среде TypeScript+Create React App

Сначала откройте окно терминала и перейдите в каталог, в котором вы хотите создать свой проект.

Затем используйте команду create-response-app с флагом –template typescript:

npx create-react-app cra-typescript-example —template typescript

В терминале вы увидите сообщение:

Creating a new React app in [..]/cra-typescript-example. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template-typescript.

Флаг –template typescript сообщает Create React App, что ему нужно выполнить сборку с помощью шаблона cra-template-typescript. Это добавит главный пакет TypeScript.

Примечание: В предыдущих версиях Create React App можно было использовать флаг –typescript, но на сегодняшний день этот параметр устарел.

После завершения установки у вас будет новое приложение React с поддержкой TypeScript. Перейдите в каталог этого проекта и откройте его в редакторе кода.

Файл tsconfig.json

Возможно, вы обратили внимание, что в окне вашего терминала отображается следующее сообщение:

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you. Your tsconfig.json has been populated with default values.

Файл tsconfig.json используется для настройки проектов TypeScript, точно так же, как package.json используется для проектов JavaScript.

Файл tsconfig.json, автоматически созданный Create React App, будет выглядеть следующим образом:

< "compilerOptions": < "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" >, "include": [ "src" ] >

Эта конфигурация устанавливает несколько правил компиляции и версий ECMAScript.

Файл App.tsx

Теперь давайте откроем файл App.tsx:

import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() < return ( 
 
 className="App-logo" alt="logo" /> 
Edit src/App.tsx and save to reload.
 Learn React 
 
 ); > export default App;

Если вы раньше работали с Create React App, вы могли заметить, что этот файл очень похож на файл App.js, который Create React App генерирует и для других сборок, не связанных с TypeScript. То есть в получаете ту же базу, что и проекты JavaScript, отличие лишь в том, что здесь в конфигурацию встроена поддержка TypeScript.

Давайте теперь создадим компонент TypeScript и рассмотрим преимущества, которые он может дать.

Создание компонента TypeScript

Для начала добавим в файл App.tsx функциональный компонент:

function MyMessage(< message >) < return My message is: ; >

Этот код будет принимать значение message из props. Он отобразит div с текстом My message is: и значением сообщения.

Теперь давайте попробуем с помощью TypeScript сообщить этой функции, что ее параметр message должен быть представлен строкой.

Если вы уже знакомы с TypeScript, вы можете подумать, что вам следует добавить message: string в message. Однако в этой ситуации нужно определить типы для всех props как объекта.

Есть несколько способов добиться этого.

Например, можно определить встроенные типы:

function MyMessage(< message >: < message: string >) < return My message is: ; >

Определить объект props:

function MyMessage(props: < message: string >) < return My message is: ; >

Использовать отдельный интерфейс:

interface MyMessageProps < message: string; >function MyMessage(props: MyMessageProps) < return My message is: ; >

Также можно создать interface и переместить его в отдельный файл, чтобы типы могли храниться в другом месте.

Мы сказали этому компоненту, что в качестве значения для параметра message он может принимать только string. Теперь давайте попробуем использовать это внутри нашего компонента App.

Компоненты TypeScript

Давайте используем компонент MyMessage, добавив его в логику рендеринга.

Компонент начинается с:

Если ваш редактор кода поддерживает автозаполнение, вы заметите на экране подпись компонента, когда начнете вводить его.

Это поможет вам получить ожидаемые значения и типы без необходимости возвращаться к компоненту. Особенно это полезно при работе с несколькими компонентами в отдельных файлах.

Типы свойств

Теперь начните вводить свойства:

Обратите внимание: когда вы начнете вводить слово message, на экране появится подсказка. В нашем случае это будет (JSX attribute) message: string.

Типы ошибок

Попробуйте теперь передать в message числовое значение, а не строчное.

В таком случае TypeScript выдаст ошибку и поможет отследить проблему в коде.

React даже не скомпилируется, если в коде есть подобные ошибки. В данном случае он выдаст предупреждение:

Type 'number' is not assignable to type 'string'

Заключение

В этом руководстве мы рассказали, как настроить приложение React с помощью TypeScript и Create React App.

В TypeScript можно создавать типы для всех компонентов и свойств. А с помощью современных редакторов кода вы можете пользоваться автозаполнением и подсказками по коду. Кроме того, вы будете быстрее обнаруживать ошибки, поскольку TypeScript даже не позволяет проекту компилироваться, если видит проблемы с кодом.