Введение в использование TypeScript в React

TypeScript - надмножество JavaScript, несомненно, имеет некоторые удивительные преимущества - статическая типизация, классы, интерфейсы и улучшенный intellisense, который может давать более сильные предложения по автозаполнению и обрабатывать потенциальные ошибки перед компиляцией. Это означает, что ваш редактор кода не только будет делать более разумные предложения по автозаполнению, но и сразу же показывать вам ошибки, вместо того, чтобы обнаруживать, что что-то работает неправильно, когда вы переключаетесь в браузер.

Приступая к работе с TypeScript в React, следует обратить внимание на несколько вещей:

1. Начало работы с приложением create-response-app и TypeScript:

Если вы начинаете НОВЫЙ проект с помощью приложения create-react-app:

npx create-react-app [your app's name] --template typescript

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

Теперь, когда мы используем TypeScript в реакции, вы будете использовать расширение файла .tsx, а не стандартный .js для JavaScript.

Вы также увидите tsconfig.json, в котором для конфигурации TypeScript заданы некоторые значения по умолчанию, и файл response-app-env.d.ts, который ссылается на типы для сценариев реакции и помогает с такими вещами, как разрешение на использование SVG. импорт.

3. Компоненты и импорт:

Из-за того, как вещи статически типизированы в TS, нам нужно сделать пару дополнительных вещей при настройке наших компонентов. Вам нужно будет импортировать некоторые дополнительные вещи в верхней части каждого компонента (* или вы можете использовать React. <>, Где <> - это тип или событие, которое вы в противном случае импортируете).

Некоторые общие вещи, которые я импортировал, помимо некоторых обычных обработчиков реакции, таких как useState и useEffect, - это ChangeEvent и FC (функциональный компонент) - автозаполнение с помощью TS - ПРИЯТНО при импорте вещей!

import React, { useState, ChangeEvent, FC } from "react";

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

Есть несколько способов объявить тип. Один из них - использовать интерфейс:

export interface Props {   
   name: string;   
   age: number;
}

Обратите внимание на несколько определений типов:

1. «Приложение: FC», которое определяет наше приложение как функциональный компонент.
2. 'useState <string> ()', который объявляет эту часть состояния как строку. Вы также можете сделать это, указав useState пустую строку: useState ('')
3. 'event: ChangeEvent <HTMLInputElement>', который объявляет, какой тип события принимается в функции onSearchInput.

Ура, я скоро вернусь и принесу еще!