Wprowadzenie do korzystania z TypeScript w React

TypeScript — nadzbiór JavaScriptu, bez wątpienia ma niesamowite zalety — statyczne pisanie, klasy, interfejsy i ulepszony intellisense, który może dawać silniejsze sugestie dotyczące autouzupełniania i obsługiwać potencjalne błędy przed kompilacją. Oznacza to, że Twój edytor kodu nie tylko poda inteligentniejsze sugestie dotyczące autouzupełniania, ale także pokaże błędy od razu, zamiast odkrywać, że coś nie działa poprawnie po przełączeniu się na przeglądarkę.

Jest kilka rzeczy, na które należy zwrócić uwagę, rozpoczynając pracę z TypeScript w React:

1. Pierwsze kroki z create-react-app i TypeScript:

Jeśli zaczynasz NOWY projekt za pomocą 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

Teraz, gdy używamy TypeScript w reakcji, będziesz używać rozszerzenia pliku .tsx zamiast standardowego .js dla JavaScript.

Inne rzeczy, które zobaczysz, to tsconfig.json, który ma pewne wartości domyślne ustawione dla konfiguracji TypeScript, oraz reakcja-app-env.d.ts, która odwołuje się do typów skryptów React i pomaga w takich rzeczach, jak zezwalanie na SVG import.

3. Komponenty i import:

Ze względu na to, jak rzeczy są statycznie wpisywane w TS, musimy zrobić kilka dodatkowych rzeczy podczas konfigurowania naszych komponentów. Będziesz musiał zaimportować kilka dodatkowych rzeczy na górze każdego komponentu (*lub możesz użyć React.<> gdzie <> jest typem lub zdarzeniem, które w innym przypadku chcesz zaimportować).

Niektóre typowe rzeczy, które zauważyłem, że importuję oprócz niektórych typowych hooków reakcji, takich jak useState i useEffect, to ChangeEvent i FC (komponent funkcjonalny) — autouzupełnianie za pomocą TS jest PRZYJEMNE podczas importowania rzeczy!

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

Ostatnią rzeczą, na której się dzisiaj skupimy, są proste definicje typów. Jedną z głównych funkcji TypeScript jest udokumentowana wiedza o tym, jakich typów używamy i gdzie je zmienić, a także automatyczne wczesne wykrywanie w celu zapobiegania błędom i błędom.

Istnieje kilka sposobów deklarowania typu. Jednym z nich jest użycie interfejsu:

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

Zwróć uwagę na kilka definicji typów:

1. „App: FC”, która definiuje naszą aplikację jako element funkcjonalny.
2. 'useState<string>( )', który deklaruje ten fragment stanu jako ciąg. Możesz to również zrobić, podając useState pusty ciąg: useState('')
3. 'event: ChangeEvent<HTMLInputElement>', który deklaruje jaki typ zdarzenia jest akceptowany w funkcji onSearchInput.

Pozdrawiam, niedługo wrócę z więcej!