JavaScript je slabě typovaný programovací jazyk. Z tohoto důvodu je velmi shovívavý a chyby v programování pravděpodobně během vývoje zůstanou bez povšimnutí. TypeScript, knihovna pro kontrolu typů JavaScriptu, řeší tento problém vynucováním typů na hodnotách. Tento článek vás naučí, jak vytvořit projekt React s TypeScriptem.

Vytvoření projektu React pomocí TypeScript

Příkaz create-react-app vám umožňuje vytvářet projekty Typescript pomocí --šablona volba.

Na vytvořit nový projekt React s TypeScriptem spusťte následující příkaz:

npx vytvořit-react-app app-název--šablona strojopis

Tento příkaz vytvoří nový projekt React and TypeScript od začátku. TypeScript můžete také přidat do existující aplikace React.

Chcete-li tak učinit, přejděte do projektu, do kterého chcete přidat TypeScript, a spusťte následující kód:

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

Poté zaměňte příponu souboru .js za .tsx pro soubory, které chcete převést na TypeScript. Jakmile to uděláte, získáte „

instagram viewer
React odkazuje na globální UMD, ale aktuální soubor je modul." chyba. Můžete to vyřešit importem React do každého souboru typu typescript, jako je tento:

import Reagovat z "reagovat"

Jako jednodušší řešení vytvořte tsconfig.json a nastavte jsx na response-jsx.

{
"možnosti kompilátoru": {
"jsx": "reagovat-jsx",
"cílová": "es6",
"modul": "esnext",
 },
}

Všechna nastavení konfigurace naleznete na Dokumenty TypeScript.

Vytvoření komponenty funkce React v TypeScript

Komponentu funkce React definujete stejným způsobem jako funkci JavaScript.

Níže je uveden příklad funkční komponenty s názvem Pozdravy.

vývoznívýchozífunkcePozdravy() {
vrátit se (
<div>Ahoj světe</div>
 )
}

Tato komponenta vrací řetězec „Hello world“ a TypeScript odvozuje jeho návratový typ. Můžete však anotovat jeho návratový typ:

vývoznívýchozífunkcePozdravy(): JSX.Živel{
vrátit se (
<div>Ahoj světe</div>
 )
}

TypeScript vyvolá chybu, pokud komponenta Greetings vrátí hodnotu, která není JSX.element.

Použití React Props s TypeScriptem

React umožňuje vytvářet opakovaně použitelné komponenty prostřednictvím rekvizit. Komponenta Greetings může například obdržet název podpěry, takže návratová hodnota je podle ní přizpůsobena.

Níže je upravená komponenta s názvem jako rekvizita. Všimněte si inline deklarace typu.

funkcePozdravy({jméno}: {jméno: řetězec}) {
vrátit se (
<div>Dobrý den, {name}</div>
 )
}

Pokud předáte jméno „Jane“, komponenta vrátí zprávu „Hello Jane“.

Místo zápisu deklarace typu do funkce ji můžete definovat externě takto:

typ S pozdravemProps = {
 jméno: řetězec;
};

Poté předejte definovaný typ komponentě následovně:

funkcePozdravy({jméno}: PozdravyProps) {
vrátit se (
<div>Dobrý den, {name}</div>
 )
}

Pokud exportujete tento typ a chcete jej rozšířit, použijte klíčové slovo rozhraní:

vývozní rozhraníZdravímProps{
 jméno: řetězec;
};

Všimněte si rozdílu v syntaxi mezi typem a rozhraním — rozhraní nemá rovnítko.

Rozhraní můžete rozšířit pomocí následujícího kódu:

import { GreetingsProps } z './Pozdravy'
rozhraníVítejtePropsrozšiřujeZdravímProps{
 čas: "tětiva"
}

Rozšířené rozhraní pak můžete použít v jiné komponentě.

funkceVítejte({jméno, čas}: WelcomeProps) {
vrátit se (
<div>
 Dobrý {time}, {name}!
</div>
 )
}

Použijte „?“ symbol s rozhraním rekvizit pro definování volitelných rekvizit. Zde je příklad rozhraní s volitelným názvem prop.

rozhraníZdravímProps{
 jméno?: řetězec;
};

Pokud nezadáte název prop, TypeScript nevyvolá žádnou chybu.

Použití React State s TypeScriptem

V prostém JavaScriptu definujete háček useState(). jak následuje:

const [jméno zákazníka, setCustomerName] = useState("");

V tomto příkladu může TypeScript snadno odvodit typ firstName jako řetězec, protože výchozí hodnotou je řetězec.

Někdy však nemůžete inicializovat stav na definovanou hodnotu. V těchto případech musíte zadat typ hodnoty stavu.

Zde je několik příkladů, jak definovat typy v háku useState().

const [jméno zákazníka, setCustomerName] = useState<tětiva>("");
const [věk, setAge] = useState<číslo>(0);
konst [isSubscribed, setIsSubscribed] = useState<booleovský>(Nepravdivé);

Můžete také použít rozhraní v háku useState(). Můžete například přepsat výše uvedený příklad a použít rozhraní zobrazené níže.

rozhraníIZákazník{
 customerName: string ;
 věk: číslo ;
 isSubscribed: booleovský ;
}

Použijte vlastní rozhraní v háku takto:

const [customer, setCustomer] = useState<IZákazník>({
 Jméno zákazníka: "Jane",
 věk: 10,
 isSubscribed: Nepravdivé
 });

Použití událostí s TypeScript

Události jsou zásadní, protože umožňují uživatelům interakci s webovou stránkou. V TypeScript můžete zadat události nebo obslužné rutiny událostí.

Pro demonstraci zvažte následující komponentu přihlášení pomocí událostí onClick() a onChange().

import { useState } z 'reagovat';
vývoznívýchozífunkcePřihlásit se() {
 const [e-mail, setEmail] = useState('');
konst handleChange = (událost) => {
setEmail(událost.cílová.hodnota);
 };


konst handleClick = (událost) => {
 console.log('Odesláno!');
 };
vrátit se (
<div>
<typ vstupu ="e-mailem" value={email} onChange={handleChange} />
<button onClick={() => kliknout na kliku}>Předložit</button>
</div>
 );
}

Takto byste zpracovávali události v prostém JavaScriptu. TypeScript však očekává, že budete definovat typ parametru události ve funkcích obsluhy události. Naštěstí React poskytuje několik typů událostí.

Použijte například typ changeEvent pro obslužnou rutinu události handleChange().

import { ChangeEvent, useState } z 'reagovat';
const handleChange = (událost: ChangeEvent<HTMLInputElement>) => {
setEmail(událost.cílová.hodnota);
};

Typ changeEvent se používá pro změnu hodnot prvků input, select a textarea. Je to obecný typ, což znamená, že musíte předat prvek DOM, jehož hodnota se mění. V tomto příkladu jste předali vstupní prvek.

Výše uvedený příklad ukazuje, jak zadat událost. Níže uvedený kód ukazuje, jak můžete místo toho zadat obslužnou rutinu události.

import { ChangeEventHandler, useState } z 'reagovat';
const handleChange: ChangeEventHandler<HTMLInputElement> = (událost) => {
setEmail(událost.cílová.hodnota);
};

Pro událost handleClick() použijte MouseEvent().

import { useState, MouseEvent } z 'reagovat';
konst handleClick = (událost: MouseEvent) => {
 console.log('Odesláno!');
};

Opět můžete připojit typ k samotné obsluze události.

import { useState, MouseEventHandler } z 'reagovat';
konst handleClick: MouseEventHandler = (událost) => {
 console.log('Odesláno!');
 };

Pro další typy událostí se podívejte na Reagovat TypeScript cheat sheet.

Pokud vytváříte velké formuláře, je to lepší použijte knihovnu formulářů, jako je Formik, protože je vytvořen pomocí TypeScript.

Proč byste měli používat TypeScript?

Můžete dát pokyn novému projektu React, aby použil TypeScript nebo převedl existující. Můžete také použít TypeScript s komponentami funkce React, stavem a událostmi React.

Psaní komponent Reactu může někdy připadat jako psaní zbytečného standardního kódu. Čím více jej však používáte, tím více oceníte jeho schopnost zachytit chyby před nasazením kódu.