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

install typescript ts-loader --save-dev 

 "compilerOptions":  "outDir": "./dist/", "module": "es6", "target": "es5", "jsx": "react", "allowJs": true >, "include": ["./src/**/*"] > 

const path = require('path'); module.exports =  entry: './src/index.tsx', module:  rules: [  test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, >, ], >, resolve:  extensions: ['.tsx', '.ts', '.js'], >, output:  filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), >, >; 

import React from 'react'; import ReactDOM from 'react-dom'; interface AppProps  message: string; > const App: React.FCAppProps> = ( message >) =>  return h1>message>h1>; >; ReactDOM.render( App message='Hello, world!' />, document.getElementById('root') ); 

    charset="utf-8" /> React TypeScript   id="root">

Этот файл определяет HTML-разметку и подключает собранный JavaScript-файл.

• Запустить проект:

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

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¶

TypeScript — это язык, расширяющий JavaScript путем добавления определений типов. Новые проекты React Native по умолчанию используют TypeScript, но также поддерживают JavaScript и Flow.

Начало работы с TypeScript¶

Новые проекты, созданные с помощью React Native CLI или популярных шаблонов, таких как Ignite, по умолчанию будут использовать TypeScript.

TypeScript также можно использовать с Expo, который поддерживает шаблоны TypeScript или предложит вам автоматически установить и настроить TypeScript, когда файл .ts или .tsx будет добавлен в ваш проект.

npx create-expo-app --template 

Добавление TypeScript в существующий проект¶

1. Добавьте TypeScript, типы и плагины ESLint в свой проект.

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 

Эта команда добавляет последнюю версию каждой зависимости. Возможно, потребуется изменить версии, чтобы они соответствовали существующим пакетам, используемым в вашем проекте. Вы можете использовать такой инструмент, как React Native Upgrade Helper, чтобы посмотреть версии, поставляемые React Native.

2. Добавьте файл конфигурации TypeScript. Создайте tsconfig.json в корне вашего проекта:

1 2 3

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

3. Переименуйте файл JavaScript в *.tsx .

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

4. Запустите yarn tsc , чтобы проверить тип ваших новых файлов TypeScript.

Использование JavaScript вместо TypeScript¶

React Native по умолчанию устанавливает в новых приложениях TypeScript, но JavaScript все еще может использоваться. Файлы с расширением .jsx рассматриваются как JavaScript, а не TypeScript, и не будут проверяться. Модули JavaScript по-прежнему могут импортироваться модулями TypeScript, равно как и наоборот.

Как работает TypeScript и React Native¶

Исходные тексты TypeScript преобразуются Babel при компоновке. Мы рекомендуем использовать компилятор TypeScript только для проверки типов. Это поведение tsc по умолчанию для вновь создаваемых приложений. Если вы переносите существующий код TypeScript на React Native, есть одна или две оговорки в использовании Babel вместо TypeScript.

Как выглядит React Native + TypeScript¶

Вы можете предоставить интерфейс для Props и State React Component через React.Component , который обеспечит проверку типов и автозавершение редактора при работе с этим компонентом в JSX.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

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; 

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

Где найти полезные советы¶

• Справочник по TypeScript
• документация React по TypeScript.
• React + TypeScript Cheatsheets содержит хороший обзор того, как использовать React с TypeScript.

Использование пользовательских псевдонимов путей с помощью TypeScript¶

Чтобы использовать пользовательские псевдонимы путей с TypeScript, необходимо настроить псевдонимы путей для работы как в Babel, так и в TypeScript. Вот как это сделать:

1. Отредактируйте ваш tsconfig.json , чтобы иметь ваши пользовательские сопоставления путей. Установите, чтобы все, что находится в корне src , было доступно без предшествующей ссылки на путь, и разрешите доступ к любому тестовому файлу с помощью tests/File.tsx :

 1 2 3 4 5 6 7 8 9 10 11 12

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

2. Добавьте babel-plugin-module-resolver в качестве пакета разработки в свой проект:

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.