JavaScript jest słabo typowanym językiem programowania. Z tego powodu jest bardzo łagodny, a błędy programistyczne prawdopodobnie pozostaną niezauważone podczas tworzenia. TypeScript, biblioteka do sprawdzania typów JavaScript, rozwiązuje ten problem, wymuszając typy na wartościach. W tym artykule dowiesz się, jak stworzyć projekt React za pomocą TypeScript.

Tworzenie projektu React za pomocą TypeScript

Polecenie create-react-app pozwala tworzyć projekty Typescript za pomocą --szablon opcja.

Do stworzyć nowy projekt React z TypeScript uruchom następujące polecenie:

npx Stwórz-aplikacja-react-app-Nazwa--szablon maszynopisu

To polecenie tworzy od podstaw nowy projekt React i TypeScript. Możesz także dodać TypeScript do istniejącej aplikacji React.

Aby to zrobić, przejdź do projektu, do którego chcesz dodać TypeScript i uruchom następujący kod:

npm install --zapisz maszynopis @typy/node @typy/react @typy/react-dom @typy/jest

Następnie zamień rozszerzenie pliku .js na .tsx dla plików, które chcesz przekonwertować na TypeScript. Gdy to zrobisz, otrzymasz „

instagram viewer
React odnosi się do globalnego UMD, ale bieżący plik to moduł.” błąd. Możesz to rozwiązać, importując Reacta do każdego pliku maszynopisu w ten sposób:

import Reagować z "reagować"

Prostszym rozwiązaniem jest utworzenie pliku tsconfig.json i ustawienie jsx na reakcję-jsx.

{
"Opcje kompilatora": {
"jsx": "Reaguj-jsx",
"cel": "es6",
"moduł": "następny",
 },
}

Wszystkie ustawienia konfiguracyjne można znaleźć w Dokumentacja TypeScript.

Tworzenie komponentu funkcji React w TypeScript

Komponent funkcji React definiuje się w taki sam sposób, jak funkcję JavaScript.

Poniżej znajduje się przykład komponentu funkcji o nazwie Pozdrowienia.

eksportdomyślnafunkcjonowaćPozdrowienia() {
zwrócić (
<div>Witaj świecie</div>
 )
}

Ten składnik zwraca ciąg „Hello world”, a TypeScript wnioskuje o jego typ zwracany. Możesz jednak opisać jego typ zwrotu:

eksportdomyślnafunkcjonowaćPozdrowienia(): JSX.Element{
zwrócić (
<div>Witaj świecie</div>
 )
}

TypeScript zgłosi błąd, jeśli składnik Greetings zwróci wartość, która nie jest elementem JSX.

Używanie React Props z TypeScript

React umożliwia tworzenie komponentów wielokrotnego użytku za pomocą rekwizytów. Na przykład składnik Greetings może otrzymać właściwość nazwy taką, że zwracana wartość jest na jej podstawie dostosowywana.

Poniżej znajduje się edytowany komponent z nazwą jako rekwizyt. Zwróć uwagę na deklarację typu wbudowanego.

funkcjonowaćPozdrowienia({imię}: {imię: ciąg}) {
zwrócić (
<div>Witaj {imię}</div>
 )
}

Jeśli podasz imię „Jane”, komponent zwróci komunikat „Hello Jane”.

Zamiast pisać deklarację typu w funkcji, możesz zdefiniować ją zewnętrznie w ten sposób:

rodzaj PozdrowieniaRekwizyty = {
 nazwa: ciąg;
};

Następnie przekaż zdefiniowany typ do komponentu w następujący sposób:

funkcjonowaćPozdrowienia({imię}: PozdrowieniaRekwizyty) {
zwrócić (
<div>Witaj {imię}</div>
 )
}

Użyj słowa kluczowego interface, jeśli eksportujesz ten typ i chcesz go rozszerzyć:

eksport interfejsPozdrowieniaRekwizyty{
 nazwa: ciąg;
};

Zwróć uwagę na różnicę składni między typem a interfejsem — interfejs nie ma znaku równości.

Możesz rozszerzyć interfejs za pomocą następującego kodu:

import { PozdrowieniaRekwizyty } z './Pozdrowienia'
interfejsWitamyRekwizytyrozciąga sięPozdrowieniaRekwizyty{
 czas: "strunowy"
}

Następnie możesz użyć rozszerzonego interfejsu w innym komponencie.

funkcjonowaćPowitanie({imię, czas}: WelcomeRekwizyty) {
zwrócić (
<div>
 Dobry {czas}, {imię}!
</div>
 )
}

Użyj "?" symbol z interfejsem rekwizytów, aby zdefiniować opcjonalne rekwizyty. Oto przykład interfejsu z opcjonalną nazwą prop.

interfejsPozdrowieniaRekwizyty{
 nazwa?: ciąg;
};

Jeśli nie przekażesz właściwości nazwy, TypeScript nie zgłosi żadnego błędu.

Używanie React State z TypeScript

W zwykłym JavaScript definiujesz hak useState() następująco:

const [NazwaKlienta, setNazwaKlienta] = useState("");

W tym przykładzie TypeScript może łatwo wywnioskować typ FirstName jako ciąg, ponieważ wartością domyślną jest ciąg.

Czasami jednak nie można zainicjować stanu do zdefiniowanej wartości. W takich przypadkach należy podać typ wartości stanu.

Oto kilka przykładów definiowania typów w haczyku useState().

const [NazwaKlienta, setNazwaKlienta] = UseState<strunowy>("");
const [wiek, setAge] = useState<numer>(0);
stały [jestsubskrybowany, ustawjestsubskrybowany] = useState<logiczne>(fałszywy);

Możesz również użyć interfejsu w zaczepie useState(). Na przykład możesz przepisać powyższy przykład, aby użyć interfejsu pokazanego poniżej.

interfejsIKlient{
 nazwa klienta: ciąg ;
 wiek: liczba ;
 jestSubskrybowany: logiczne ;
}

Użyj niestandardowego interfejsu w haczyku w ten sposób:

const [klient, setCustomer] = useState<IKlient>({
 nazwa klienta: "Jane",
 wiek: 10 lat,
 jestSubskrybowany: fałszywy
 });

Używanie zdarzeń z TypeScript

Zdarzenia są niezbędne, ponieważ umożliwiają użytkownikom interakcję ze stroną internetową. W TypeScript można wpisywać zdarzenia lub programy obsługi zdarzeń.

Aby to zademonstrować, rozważ następujący składnik logowania przy użyciu zdarzeń onClick() i onChange().

import { stan użycia } z 'reagować';
eksportdomyślnafunkcjonowaćZaloguj sie() {
 const [email, setEmail] = useState('');
stały handleChange = (zdarzenie) => {
ustaw e-mail(wydarzenie.cel.wartość);
 };


stały handleClick = (zdarzenie) => {
 konsola.log('Złożony!');
 };
zwrócić (
<div>
<typ wejścia="e-mail" value={email} onChange={handleChange} />
<przycisk onClick={() => uchwytKliknij}>Składać</button>
</div>
 );
}

W ten sposób możesz obsługiwać zdarzenia w zwykłym JavaScript. TypeScript oczekuje jednak zdefiniowania typu parametru zdarzenia w funkcjach obsługi zdarzeń. Na szczęście React udostępnia kilka typów wydarzeń.

Na przykład użyj typu changeEvent dla procedury obsługi zdarzeń handleChange().

import { ChangeEvent, useState } z 'reagować';
const handleChange = (zdarzenie: ChangeEvent<HTMLInputElement>) => {
ustaw e-mail(wydarzenie.cel.wartość);
};

Typ changeEvent służy do zmiany wartości elementów input, select i textarea. Jest to typ ogólny, co oznacza, że ​​musisz przekazać element DOM, którego wartość się zmienia. W tym przykładzie przekazałeś element input.

Powyższy przykład pokazuje, jak wpisać zdarzenie. Poniższy kod pokazuje, jak można wpisać program obsługi zdarzeń.

import { ChangeEventHandler, useState } z 'reagować';
const handleChange: ChangeEventHandler<HTMLInputElement> = (zdarzenie) => {
ustaw e-mail(wydarzenie.cel.wartość);
};

Dla zdarzenia handleClick() użyj MouseEvent().

import { useState, MouseEvent } z 'reagować';
stały handleClick = (zdarzenie: MouseEvent) => {
 konsola.log('Złożony!');
};

Ponownie możesz dołączyć typ do samego programu obsługi zdarzeń.

import { useState, MouseEventHandler } z 'reagować';
stały handleClick: MouseEventHandler = (zdarzenie) => {
 konsola.log('Złożony!');
 };

W przypadku innych typów wydarzeń sprawdź Ściągawka z React TypeScript.

Jeśli tworzysz duże formularze, lepiej użyj biblioteki formularzy, takiej jak Formik, ponieważ jest zbudowany za pomocą TypeScript.

Dlaczego powinieneś używać TypeScript?

Możesz poinstruować nowy projekt React, aby używał TypeScript lub konwertował istniejący. Możesz również używać języka TypeScript ze składnikami funkcji React, stanem i zdarzeniami React.

Wpisywanie komponentów React może czasem sprawiać wrażenie pisania niepotrzebnego kodu wzorcowego. Jednak im częściej go używasz, tym bardziej docenisz jego zdolność do wychwytywania błędów przed wdrożeniem kodu.