Introduzione
Typescript è un overset di Javascript, quindi se conosci javascript sei già a metà strada! Ciò che Typescript porta in tavola è un codice facilmente documentabile e privo di errori per via del controllo del tipo durante il runtime.
Questo articolo è per gli sviluppatori che già conoscono React e javascript e vogliono passare a Typescript, quindi non mi concentrerò su nessun concettobase di React. Questo è un corso accelerato sulla comprensione delle basi dell’uso di Typescript con React.
In questo articolo creeremo una semplice lista di controllo personale che registra i film che inserisci prendendone il nome, la valutazione e la recensione.
SETUP
Iniziamo con l’inizializzazione del nostro progetto. Sto nominando il mio progetto typescript-with-react ma puoi tranquillamente cambiare il nome come più ti piace.
npx create-react-app –template typescript typescript-with-react
Ora cambia directory per entrare nella cartella del tuo progetto e procedi normalmente come fai con qualsiasi progetto di React.
cd typescript-with-react/
code .
npm start
La struttura del tuo codice dovrebbe essere simile a questa.
Nota come i file hanno estensione .ts o .tsx. Ciò denota che quei file sono trascritti in Typescript.
Ok, ora entriamo nel vivo di Typescript!
Handling state
In Typescript è necessario menzionare le definizioni di tipo di tutte le variabili, funzioni e cosa esse restituiscono.
- Per gestire lo stato in React devi prima creare un’interfaccia in cui menzioni il tipo di dati delle variabili.
- Nell’esempio seguente, abbiamo creato un’interfaccia chiamata IState (puoi chiamarla come preferisci).
- L’interfaccia IState è dove scriveremo la nostra definizione del tipo di come vogliamo che siano le variabili di stato, in questo caso è un array di oggetti. Per indicare che aggiungiamo la parentesi quadra dopo le definizioni del tipo. Mentre usi useState, aggiungi <IState[“form”]> il quale indica che lo stato dovrebbe accettare valori solo nel formato specificato (formato IState in questo caso sta prendendo l’oggetto ‘form’ come formato di input).
Abbiamo esportato IState in modo da poterlo utilizzare in un altro file in seguito.
Un metodo in linea alternativo per aggiungere lo stato sarebbe il seguente:
const [counter, setCounter] = useState<{name:string,rate:number,review?:string}[]>([])
Nel nostro progetto, vogliamo che la recensione sia un campo facoltativo mentre il nome del film e la valutazione del film siano campi obbligatori.
Quindi per la revisione abbiamo fatto review?:string dove il punto interrogativo indica che il valore di review potrebbe essere una stringa o non definito. Tuttavia, per nome e tariffa abbiamo definizioni di tipo rigorose che non accetteranno nulla a parte le definizioni di tipo assegnate.
Puoi aggiungere più di una definizione di tipo a una variabile nel modo seguente:
inputValue:number | string | null
Qui la variabile inputValue può essere un tipo number, string o anche un valore null
Nota: null e undefined non sono gli stessi tipi di dati.
Handling Props
Per gestire le props in React, sia la parte di invio che di recezione del componente dovrebbero fare una dichiarazione esplicita del tipo e del numero di variabili o funzioni coinvolte. Typescript darà un errore se manca qualcosa sul lato di invio o di ricezione.
- Questo è lato invio.
<List form={form} />
<Form form={form} setForm={setForm} />
Da App.tsx stiamo inviando un oggetto, ad es. modulo a List.tsx
- Diamo ora un’occhiata al lato di ricezione del componente Elenco.
import { IState as IProps } from “../App”
const List: React.FC<IProps> = ({ form }) => {
…
}
- List è un componente funzionale di React che accetta props. In Typescript per mostrare che aggiungiamo React.FC<IProps> dopo la dichiarazione del componente List.
- Possiamo importare l’IState sotto l’alias IProps poiché sappiamo che le definizioni del tipo del form dell’oggetto sono esattamente le stesse dell’oggetto IState.
- Possiamo quindi destrutturare la forma nei parametri e utilizzarla nella componente funzione.
Nel secondo esempio, da App.tsx stiamo inviando un oggetto, ad es. form e una funzione, ovvero da.setForm a Form.tsx
Diamo ora un’occhiata al lato di ricezione del componente Form.
Come puoi vedere qui, anche in questo componente abbiamo importato IState sotto l’alias Props, tuttavia abbiamo apportato alcune modifiche personalizzate qui.
- Qui abbiamo creato una nuova interfaccia chiamata IProps che specifica la definizione del tipo di props in ingresso poiché dovevamo specificare il tipo di setForm.
- Dichiariamo form: Props[“form”] che significa che al form deve essere assegnata la definizione del tipo di IState che viene importato sotto l’alias Props.
E poi in modo simile ora lo faremo per setForm
Suggerimento: per conoscere le definizioni del tipo di qualcosa di cui non hai idea, passa il mouse su quell’elemento in questo modo e copia le definizioni del tipo.
- Poiché abbiamo già dichiarato le definizioni del tipo di props come Props[“form”], possiamo abbreviare la definizione del tipo di setForm e scriverla in questo modo.
setForm: React.Dispatch<React.SetStateAction<Props[“form”]>>
- Then simply destructure form and setForm in the parameters of the Form function and use it in the component.
Handling Functions
In react-typescript, devi menzionare il tipo di output che sta restituendo la funzione.
- In questo esempio abbiamo chiamato la funzione mapList() per mappare attraverso l’array di list e fornire la riga della tabella come output, che è un elemento JSX.
- Per nominare il tipo di output di questa funzione, aggiungi: JSX.Element[] dopo i parametri, il che indica che la funzione dovrebbe restituire un array di elementi JSX.
- Una cosa interessante da notare è che abbiamo scritto un’istruzione return annidata perché il primo return punta verso la funzione di mappatura.
- Tuttavia, non dovremmo restituire la funzione di mappatura e quindi Typescript darebbe un errore se avessimo solo un’istruzione di ritorno poiché abbiamo menzionato il nostro tipo di ritorno come JSX.Element[].
- Abbiamo fatto un’istruzione return nidificata all’interno della funzione map in modo che restituisca specificamente un elemento JSX puro, ad es. una riga di tabella in questo caso.
Suggerimento: se non sei sicuro di quale sarà il tipo restituito, passa il mouse sopra la funzione.
In alternativa, se una funzione non restituisce nulla, menziona il tipo di ritorno null come: void dopo i parametri in questo modo:
const randomFunction = (): void => {
…
}
Handling Events
Per la gestione degli eventi con react typescript, daremo un’occhiata ai seguenti eventi DOM chiamati dai seguenti elementi JSX nel componente Form:
<input className=”inputBox” type=’text’ name=”name” value={input.name} onChange={(e) => handleChange(e)} />
<textarea className=”inputBox” name=”review” value={input.review} onChange={(e) => handleChange(e)}></textarea>
Qui il tag di input ha una proprietà DOM chiamata onChange che chiama handleChange quando viene attivato un evento.
Per questo creiamo una funzione che sa che riceverà un elemento HTML nei parametri.
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
setInput({
…input,
[e.target.name]: e.target.value
})
}
- Qui stiamo dichiarando che e sarà di tipo React.ChangeEvent<HTMLInputElement> che è ciò che il tag di input invierà.
- E poiché per il campo della recensione del film stiamo usando un tag textarea invece di un tag di input, la e potrebbe anche essere React.ChangeEvent<HTMLTextAreaElement>.
- Quindi l’intera definizione del tipo di e può essere scritta come: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>.
- Aggiungeremo: void per specificare che questa funzione non restituirà nulla.
Nel secondo esempio daremo un’occhiata all’evento onClick chiamato dal pulsante di invio del modulo.
<button className=”button” type=”submit” onClick={(e) => handleClick(e)}>Submit</button>
const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
e.preventDefault();
if (!input.name || !input.rate) {
return
}
setForm([…form, {
name: input.name,
rate: parseInt(input.rate),
review: input.review
}])
}
Simile alla funzione handleChange, la funzione handleClick accetta una definizione di tipo appropriata di e che in questo caso è React.MouseEvent<HTMLButtonElement>.
Conclusione
Questo è tutto per questo corso accelerato! Spero che questo ti dia un’idea abbastanza corretta di come usare Typescript in React. Continua ad imparare e ad arricchire le tue competenze!
