DEV Community: Matteo Spreafico

Realizzare UI con Reat - 7. Composizione di Componenti

Matteo Spreafico — Sun, 20 Sep 2020 07:57:00 +0000

I componenti sono molto comodi, perché ci aiutano a suddividere la UI in pezzi più piccoli con chiare responsabilità ed interfacce ben definite. Questo è molto importante quando si lavora su un'applicazione di grandi dimensioni, perché ci permette di lavorare su piccoli pezzi dell'applicazione senza modificare inavvertitamente tutto il resto. Un altro grande vantaggio dei componenti è che ci incoraggiano ad usare la composizione invece dell'ereditarietà. Vediamo meglio cosa intendo per composizione.

Composizione con la Lista di Contatti

Ora prendiamo una nuova applicazione React creata con create-react-app come abbiamo appena visto ed inseriamoci l'esempio con la lista di contatti di cui abbiamo parlato in precedenza.

import React from 'react';
import './App.css';

const Contatti = () => {
  const persone = ['Matteo', 'Silvia', 'Daniele', 'Marco'];

  return (
    <ul>
      {persone.map((persona) => (
        <li key={persona}>{persona}</li>
      ))}
    </ul>
  );
};

function App() {
  return (
    <div className="App">
      <Contatti />
    </div>
  );
}

export default App;

App.js modificato con la lista di contatti

Come potete vedere è veramente semplice prendere il componente Contatti che abbiamo creato in precedenza ed usarlo all'interno di App. Incapsulare elementi all'interno di un componente ci offre diversi vantaggi. Per iniziare rende estremamente semplice il riuso di tutti questi elementi. Se ad esempio io volessi avere più copie della lista dei contatti, dovrei incollare più volte il componente Contatti

function App() {
  return (
    <div className="App">
      <Contatti />
      <Contatti />
      <Contatti />
    </div>
  );
}

Copie multiple di Contatti

Semplice Interfaccia dei Componenti

Un'altra caratteristica interessate è che i componenti ci offrono un'interfaccia chiara in modo da poter semplicemente configurare differenti componenti passandogli delle differenti proprietà.

Prendiamo la nostra lista di contatti e supponiamo di voler avere delle liste di contatti con delle persone diverse. In questo caso quindi vorrei poter configurare i componenti Contatti in modo indipendente uno dall'altro. Sarebbe comodo se Contatti avesse una proprietà in modo da passargli la lista di persone invece di averla inchiodata all'interno del componente.

Prendiamo quindi il nostro componente Contatti ed aggiungiamogli un parametro props che conterrà tutte le proprietà che passeremo al componente e prendiamo la lista di persone da questo oggetto.

const Contatti = (props) => {
  const { persone } = props;

  return (
    <ul>
      {persone.map((persona) => (
        <li key={persona}>{persona}</li>
      ))}
    </ul>
  );
};

Componente Contatti modificato per usare persone estratto da props

Ogni componente riceve un oggetto props che contiene tutte le proprietà che passeremo al componente.

Quindi ora possiamo passare una diversa lista di persone ed averemo una diversa lista di contatti! Modifichiamo ora la nostra applicazione per avere nella prima lista di contatti solo Matteo e Silvia, mentre nella seconda passiamo Daniele e Marco ed infine eliminiamo la terza.

Come vedete è estremamente semplice riusare questi componenti passandogli la configurazione attraverso props.

Questi sono i due aspetti chiave per comprendere come funziona la composizione di componenti in React:

La capacità di incapsulare elementi in una componente in modo da poterli riutilizzare
La capacità di configurare questi componenti in modo differente ed indipendente attraverso props

Qui potete trovare i sorgenti dell'applicazione

Realizzare UI con React - 6. Creare una Nuova React App

Matteo Spreafico — Wed, 16 Sep 2020 07:48:00 +0000

JSX è bellissimo, ma deve essere convertito in normale JavaScript prima di arrivare al browser e si può usare Babel per questa operazione. Possiamo chiamare Babel dal tool, come Webpack, che usiamo per impacchettare tutti i nostri file (JavaScript, CSS, immagini, etc.) per i progetti web.

Per semplificare la configurazione iniziale possiamo usare il pacchetto Create React App di Facebook che gestisce tutto questo per noi! È uno strumento molto comodo per iniziare a creare una applicazione React dato che configura tutto quello che serve senza chiedere nulla! Per installare Create React App si può usare npm da linea di comando come indicato di seguito:

npm install -g create-react-app

Installare globalmente Create React App

Se avete problemi ad installare il pacchetto globalmente, potete consultare la documentazione di npm, vi consiglio di verificare di avere i permessi corretti. Per sapere dove i pacchetti globali sono installati potete usare il seguente comando:

npm list -g

Verificare dove sono installati i pacchetti globali

Ora creiamo la nostra prima applicazione React chiamata contatti per usare il codice JSX che abbiamo creato in precedenza

create-react-app contatti

Creiamo l'applicazione React contatti

Come potete vedere eseguendo il comando, create-react-app installerà react e react-dom che abbiamo già visto ed anche il pacchetto react-scripts. Questo pacchetto contiene molte librerie utili. Installa Babel in modo da poter usare le ultime funzionalità di JavaScript oltre che JSX. Inoltre installa anche Webpack in modo da poter impacchettare le risorse per rilasciare la nostra applicazione ed il server di sviluppo Webpack che ci aiuta durante lo sviluppo e fornisce la funzionalità di aggiornamento automatico quando modifichiamo i sorgenti.

Qui potete trovare i sorgenti dell'applicazione React appena creata.

Yarn

Guardando il risultato di create-react-app vedrete che ci viene consigliato di usare yarn per gestire la nostra applicazione. Nel caso non lo conosciate, yarn è un gestore di pacchetti simile a npm, è stato creato da Facebook per migliorarne alcune funzionalità ed aggiungerne di nuove. Se non volete installare yarn, non è un problema, uno dei suoi punti di forza è che quasi tutti i suoi comandi possono essere eseguiti anche da npm. Quindi se il comando consigliato per eseguire il server di sviluppo è yarn start, possiamo usare npm start per ottenere lo stesso risultato!

Esploriamo l'applicazione React

Alla fine dell'esecuzione di create-react-app otteniamo una lista di comandi che ci permettono di eseguire la nostra applicazione, testarla e rilasciarla. Se diamo un'occhiata al codice creato, troveremo molti commenti nei vari files per spiegarci come funzionano e sono stati usati, provate a darci un'occhiata.

Ora spostiamoci nella cartella che contiene l'applicazione e facciamo partire il server di sviluppo col comando yarn start. Noterete che in automatico viene aperta una nuova finestra del browser con la nostra applicazione al suo interno. Decisamente comodo!

Applicazione React create con create-react-app

Provvediamo quindi ad aprire il file src/App.js nel nostro editor e vedremo il codice che è in esecuzione nel browser. Il codice che vedrete dovrebbe esservi abbastanza familiare a questo punto. Si tratta di un componente che disegna un div che a sua volta contiene un header con un immagine img, un paragrafo p ed un link a. Ricordatevi che nessuno di questi sono testo, ma ciascuno di questi elementi è creato tramite la chiamata alla funzione createElement() ed usiamo JSX per rendere la sintassi più concisa.

Una delle comodità di create-react-app è che configura automaticamente il reload dell'applicazione quando eseguiamo delle modifiche al sorgente. Quindi se ora modificate il testo del paragrafo in "Ciao Mondo!" e salvate la modifica, il browser si aggiornerà automaticamente mostrando i cambiamenti.

Aggiornamento automatico

Una cosa che non è presente nel file src/App.js è il riferimento a ReactDOM od a come questo elemento è inserito nel DOM della pagina. Se esploriamo la cartella che contiene questo file ne troviamo un altro interessate src/index.js, proviamo a darci un'occhiata. index.js importa App dal file ./App e disegna l'applicazione nell'elemento root che è già presente nel documento. Ora vi starete chiedendo allo stesso modo da dove viene l'elemento root. Per rispondere a questa domanda, date un'occhiata al file public/index.html. Qui potete vedere il codice HTML dove viene eseguito il JavaScript e troverete il div con id root.

Quando eseguiamo la build, Webpack genererà un pacchetto con tutto il nostro JavaScript ed inserirà uno script tag nella pagine proprio dopo questo div, in questo modo l'applicazione prende vita.

Per avere più informazione su come funziona create-react-app, vi consiglio di leggere il file README.md che contiene delle istruzioni e delle guide dettagliate su come usarlo al meglio e modificarlo a seconda delle proprie esigenze.

La documentazione completa di create-react-app è disponibile sul sito https://create-react-app.dev/

Realizzare UI con React - 5. Creare Elementi e JSX

Matteo Spreafico — Sat, 05 Sep 2020 08:09:00 +0000

In React usiamo degli oggetti JavaScript chiamati Elementi per descrivere come vogliamo che sia la pagina e poi React si occupa di applicare le modifiche al DOM per ottenere il risultato.

Disegnare Elementi React nel DOM

Invece di usare template per descrivere l'interfaccia utente, React usa gli elementi. Vediamo cos'è un elemento in React con il seguente esempio dove a sinistra potete vedere il codice ed a destra il risultato nel browser.

Esempio di elemento in React

Nell'editor ho creato un nuovo elemento in React usando React.CreateElement. Questa è un API di primo livello di React per creare elementi, assomiglia al metodo per creare elementi dell'oggetto document ma è leggermento diverso. Il primo argomento è il nome del tag dell'elemento che vogliamo usare, nel nostro caso "div". Il secondo argomento lo vedremo in seguito ed il terzo è il testo che vogliamo inserire all'interno del div.

Ma come inseriamo questo elemento nella pagina? Per fare questo dobbiamo usare ReactDOM. In React, il processo per decidere cosa disegnare è completamente separato da quello che effettivamente si occupa di disegnarlo. Questa separazione rende possibile generare le pagine sul server oppure nativamente sui dispositivi mobile ed anche nella realtà virtuale. In questo esempio usiamo ReactDOM perché siamo lavorando nel browser. Nel esempio, uso il metodo ReactDOM.render posso disegnare il mio elemento nella pagina, nell'elemento del DOM chiamato root.

Per vedere cosa è effettivamente l'elemento React che ho creato, potete usare console.log(elemento). Come potete notare, si tratta semplicemente do un oggetto JavaScript, con una serie di diverse proprietà.

{
    type: "div",
    key: null,
    ref: nul,
    props: Object,
    children: "Ciao Mondo!",
    _owner: null,
    _store: Object
}

Risultato di console.log(elemento)

Quando abbiamo deciso di inserire nella pagina il nostro elemento React, abbiamo usato l'elemento del DOM chiamato root, ma da dove arriva questo elemento?

Solitamente le applicazioni React hanno un elemento DOM nella pagina chiamato root, un HTML di esempio è il seguente:

<div id="root"></div>

Esempio di HTML che ospita un'applicazione React

Passando a ReactDOM questo elemento del DOM usando il metodo getElementById(), React è in grado di prendere il controllo del suo contenuto.

Ora vediamo come aggiungere una classe CSS al nostro elemento. Usiamo il secondo argomento di React.createElement che prima abbiamo saltato, come potete vedere nel seguente esempio

Esempio di elemento in React con classe CSS

Come potete vedere, non ho usato la parola class per descrivere la classe CSS, ma invece la proprietà si chiama className. Questo potrebbe generare della confusione, ma dobbiamo tenere a mente che stiamo descrivendo nodi del DOM e non HTML. Se ora esploriamo il codice HTML generato, vedremo che questo contiene un div con un attributo class

<div class="messaggio-di-benvenuto">Ciao Mondo!</div>

HTML generato dal elemento React con classe CSS

Probabilmente avrete già sentito il termine DOM Virtuale ( Virtual DOM ) mentre stavate cercando informazioni su React. Quello che questo termine significa è che questi elementi React che stiamo creando, non sono veri elementi del DOM, sono invece oggetti che descrivono elementi del DOM. Quando quindi chiamiamo React.createElement non abbiamo ancora creato niente nel DOM. Solo quando chiamiamo ReactDom.render il browser create gli elementi DOM necessari.

`React.createElement()` restituisce un Elemento React

Abbiamo usato il metodo React.createElement() per creare e restituire un nuovo elemento React, vediamo qual è la sua dichiarazione:

React.createElement(
  type,
  [props],
  [...children]
)

Dichiarazione di React.createElement()

Accetta tre argomenti:

type: può essere il nome di un tag (ad esempio 'div' o 'span') o un componente React,
props: può essere null oppure un oggetto con degli attributi HTML o dati per l'elemento,
...children: qualunque cosa venga passata qui, sarà usata come contenuto dell'elemento. Possiamo usare stringhe, JavaScript od anche altri elementi React.

Vediamo quindi come annidare un elemento React dentro l'altro in questo esempio:

Esempio di elementi React annidati

Abbiamo cambiamo il tag da 'div' ad 'ul' per creare una lista e sostituito la stringa "Ciao Mondo!" con un array che contiene degli elementi React creati con React.createElement() che usano il tag 'li' per gli elementi della lista.

Se notate, c'è un avviso nella Console, React si sta lamentando che gli elementi nell'array non hanno una proprietà key univoca. Cosa vuol dire?

Come quando abbiamo aggiunto la classe CSS all'elemento, possiamo aggiungere ad ogni elemento React nel secondo argomento di React.createElement(). Qualcosa di unico per ognuno di questi elementi, in questo caso potremmo usare il nome.

Stiamo anche duplicando il codice al momento, per ogni elemento annidato usiamo la stessa chiamata a React.createElement() con una persona diversa. Potremmo usare JavaScript per generare questi elementi usando il metodo .map() su una array che contiene le persone. Non ci serve un sistema di template o una sintassi speciale, possiamo usare direttamente JavaScript senza dover imparare nulla di nuovo. Vediamo il risultato:

Esempio di elementi React annidati con Array.map()

Anche JSX restituisce un Elemento

Abbiamo visto come creare elementi e come annidarli, ma se dovessimo usare queste chiamate per creare un'applicazione non banale, sarebbe alquanto problematico. Servirebbe una sintassi diversa, pensata per descrivere relazione tra elementi in modo più naturale... come ad esempio HTML! Fa esattamente questo!

Come possiamo far sembrare il nostro metodo React.createElement() più simile ad HTML? JSX è un'estensione di JavaScript che fa esattamente questo. Ci permette di scrivere del codice JavaScript che sembra HTML lo rende più stringato e facile da leggere.

Modifichiamo il nostro esempio per usare JSX

Esempio di elementi React con JSX

Al posto del primo React.createElement() abbiamo usato <ul> ed al suo interno abbiamo usato le parentesi graffe per indicare che un blocco di JavaScript puro, senza JSX, dove abbiamo la chiamata a .map(). Per ogni persona poi usiamo ancora JSX con un <li> per gli elementi della lista e di nuovo usiamo le parentesi graffe per indicare dei valori JavaScript, sia per la proprietà key che prima passavamo come secondo parametro che per il contenuto dell'elemento stesso.

Molte persone restano disorientate la prima volta che vedono questa sintassi, ma non dovete preoccuparvi, è una reazione molto comune, notate piuttosto come il codice è molto più snello.

Quando scriviamo JSX dobbiamo però ricordarci che deve restituire un singolo elemento. Possiamo avere un qualunque numero di elementi annidati, ma alla radice deve esserci un singolo elemento.

const message = (
 <div>
 <h1>JSX in sintesi:</h1>
 <ul>
 <li>JSX</li>
 <li>è</li>
 <li>stupendo!</li>
 </ul>
 </div>
);

Esempio di JSX

L'esempio di JSX precedente è valido perché c'è singolo nodo <div> che contiene tutti gli altri, mentre il seguente esempio NON è valido:

const message = (
 <h1>JSX in sintesi:</h1>
 <ul>
 <li>JSX</li>
 <li>è</li>
 <li>stupendo!</li>
 </ul>
);

Esempio di JSX NON valido

In questo esempio potete notare che sia l'elemento <h1> che l'elemento <ul> sono al livello radice. Questo codice non funzionerà e avrete un messaggio di questo tipo:

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

Dato che sappia che JSX non è che un'estensione di React.createElement() questo errore ha senso, perché questo metodo accetta come primo parametro un singolo nome per il tag.

Componenti

Per ora abbiamo visto come usare React.createElement() e JSX per creare HTML, ma in React solitamente si usano i Componenti per costruire l'interfaccia utente. I Componenti sono dei blocchi di codice riutilizzabili che sono responsabili di restituire del HTML usato per disegnare la pagina. Molto spesso i Componenti React sono scritti usando JSX.

Dato che l'obiettivo principale di React è realizzare l'interfaccia utente, c'è solo un metodo che è assolutamente necessario in ogni Classe Componente React: render(). Si possono usare anche i Componenti Funzioni in React, in modo del tutto equivalente alle Classi Componente; in questo caso la funzione deve ovviamente restituire l'HTML da usare per disegnare la pagina.

Disegnare Elementi React nel DOM con Classe Componente

Disegnare Elementi React nel DOM con Componente Funzione

Ricordiamoci che React si occupa solo della livello di presentazione della nostra applicazione, quello che l'utente vede e con cui interagisce. I Componenti rappresentano la modularità e riusabilità di React e dovrebbero seguire il principio di singola responsabilità e fare solo una cosa.

Perché React? - 4. React è "solo JavaScript"

Matteo Spreafico — Wed, 02 Sep 2020 08:00:00 +0000

Se già conoscete JavaScript sarà molto facile imparare React, se al contrario siete alle prime armi con JavaScript, React vi aiuterà a diventare degli sviluppatori JavaScript migliori.

Ѐ solo JavaScript

Uno degli aspetti positivi di React è che gran parte di quello che userete, sarà normale JavaScript. Prendiamo ad esempio To make sure you're ready to move forward, please take a look at the following code:

const appuntamentiPersonali = [
  { appuntamento: 'Tintoria', ore: '19:00', giorno: 'martedi' },
  { appuntamento: 'Palestra', ore: '19:00', giorno: 'lunedi' },
];
const appuntamentiLavoro = [
  { appuntamento: 'Banca', ore: '11:00', giorno: 'lunedi' },
  { appuntamento: 'Cliente XYZ', ore: '9:00', giorno: 'martedi' },
];
const listaAppuntamenti = [...appuntamentiPersonali, ...appuntamentiLavoro];

const filtro = (appuntamenti) => (giorno) =>
  appuntamenti.filter((a) => {
    return a.giorno === giorno;
  });

const filtraPer = filtro(listaAppuntamenti);
const appuntamentiMartedi = filtraPer('martedi');

Esempio di codice JavaScript

Se questo codice non vi risulta chiaro, vi consiglio di fare un ripasso di ES6 prima di proseguire con React.

Nel corso degli ultimi anni la programmazione funzionale ha avuto un grande impatto sulla comunità e l'ecosistema JavaScript. La programmazione funzionale in JavaScript è un argomento complesso, sono stati scritti centinaia di libri in merito e siamo qui per parlare di React, quindi limitiamoci a dire che React è costruito usando molte delle tecniche di programmazione funzionale, che vedremo di volta in volta mentre approfinderemo i vari aspetti di React. Vediamo solo un paio di importanti funzioni JavaScript che sono fondamentali per quello che andremo ad approfondire: i metodi .map() e .filter() di Array.

Il Metodo `.map()` di Array

Se non conosci il metodo JavaScript .map() di Array, viene chiamato su un array esistente e restituisce un nuovo array creato a partire da cosa restituisce la funzione che gli viene passata come argomento. Vediamo un esempio:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

const saluti = nomi.map((nome) => `Ciao ${nome}!`);

Esempio del metodo .map() di Array

Vediamo cosa sta succedendo. Il metodo .map() lavora sugli array, quindi abbiamo un array da cui partire:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

Array di partenza

Quindi chiamiamo .map() sul array nami e gli passiamo una funzione come argomento:

nomi.map((nome) => `Ciao ${nome}!`);

Chiamata alla funzione .map() di Array

La funzione a freccia (arrow function) che è passata a .map() viene chiamata per ogni elemento nell'array nomi! La funzione a freccia riceve il primo nome nel array, lo salva nella variabile nome e la usa per costruire e restituisce una nuova stringa Ciao ${nome}!. Poi fa lo stesso con i restanti due nomi.

Infine .map() restituisce un nuovo array con i valori restituiti dalla funzione a freccia:

const saluti = nomi.map((nome) => `Ciao ${nome}`);

.map() restituisce un nuovo Array

saluti sarà un nuovo array ["Ciao Matteo!", "Ciao Silvia!", "Ciao Daniele!"]. Questo è un passaggio fondamentale da comprendere: il metodo.map() restituisce un nuovo array, non viene modificato l'array originale.

Per fare pratica con il metodo .map(), potete provare a sostituire dei cicli for presenti in del vostro codice preesistente con la chiamata a .map().

Il Metodo `.filter()` di Array

Il metodo JavaScript .filter() di Array è simile al metodo .map():

viene chiamato su un array
accetta una funzione come argomento
restituisce un nuovo array

La differenza è che la funzione passata a .filter() è usata come un test, solo gli elementi che passano il test sono inclusi nel nuovo array. Vediamo un esempio:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

const nomiCorti = nomi.filter((nome) => nome.length <= 6);

Esempio del Metodo .filter() di Array

Come prima, abbiamo un array iniziale:

const nomi = ['Matteo', 'Silvia', 'Daniele'];

Array di partenza

Chiamiamo .filter() sull'array nomi e passiamo una funzione come argomento:

nomi.filter((nome) => nome.length <= 6);

Chiamata alla funzione .filter() di Array

Allo stesso modo di .map() la funzione a freccia passata a .filter() viene chiamata per ogni elemento nell'array nomi. Il primo elemento ('Matteo') è salvato nella variabile nome. Poi viene eseguito il test, ovvero eseguiamo il filtro. Viene controllata la lunghezza del nome. Se è più di 6 viene escluso e non incluso nel nuovo array, se invece la lunghezza del nome è 6 o meno, ovvero name.length <= 6 restituisce true allora il nome è incluso nel nuovo array.

Alla fine, proprio come .map() il metodo .filter() restituisce un nuovo array invece di modificare quello originale:

const nomiCorti = nomi.filter((nome) => nome.length <= 6);

.filter() restituisce un nuovo Array

Quindi nomiCorti sarà il nuovo array ['Matteo', 'Silvia']. Da notare che contiene solo due nomi, perché 'Daniele' ha 7 caratteri ed è stato filtrato.

Per prendere confidenza con questo metodo, potete provare a modificare del vostro codice preesistente sostituendo gli if con chiamate a .filter().

Usiamo `.map()` e `.filter()` insieme

Quello che rende .map() e .filter() molto potenti è che possono essere usati insieme perché entrambi restituiscono array quindi possiamo usarli a catena in modo che il nuovo array restituito da un metodo sia usato per la chiamata seguente.

const nomi = ['Matteo', 'Silvia', 'Daniele'];

const salutiCorti = nomi
  .filter((nome) => nome.length <= 6)
  .map((nome) => `Ciao ${nome}`);

Esempio di .map() e .filter() insieme

Vediamo cosa succede, l'array nomi è filtrato dal metodo .filter(), quindi un nuovo array viene restituito, ma poi .map() è chiamato sul nuovo array e restituisce a sua volta un nuovo array. Questo nuovo array restituito da .map() è quello che viene salvato in salutiCorti.

`.filter()` per primo!

Solitamente vorrete eseguire i metodi in questo ordine: .filter() prima e dopo .map(). Questo perché .map() esegue la funzione per ogni elemento dell'array, e quindi questo è più veloce se l'array su cui viene eseguito è già filtrato.

Perché React? - 3. Flusso Dati Unidirezionale

Matteo Spreafico — Sun, 30 Aug 2020 08:00:00 +0000

Prima di React, una tecnica molto popolare per gestire i cambiamenti di stato nel tempo nelle applicazioni era l'uso dei data-bindings in modo quando i dati fossero cambiati, quelle modifiche sarebbero state applicate automaticamente nelle altre parti dell'applicazione ed ogni parte dell'applicazione che avesse avuto quei dati, li avrebbe anche potuti cambiare. Tuttavia col crescere dell'applicazione questa tecnica rende difficile individuare come un cambiamento in un posto, automaticamente ed implicitamente impatta il resto dell'applicazione.

Data-Binding in altri Frameworks

Altri front-end frameworks come Angular e Ember fanno uso di data-bindings bidirezionale. Col il data-bindings bidirezionale, i dati sono tenuti in sincrono in tutta l'applicazione a prescindere da dove sono aggiornati. Se il modello cambia i suoi valori, i dati sia aggiornano nella presentazione. Allo stesso modo, se i dati sono aggiornati nella presentazione, il modello viene aggiornato. Il data-binding è molto potente, ma rende più difficile capire dove e perché i dati sono aggiornati.

Flusso Dati in React

I dati si spostano in modo diverso in React grazie al suo Flusso Dati Unidirezionale. In React i dati si muovono componente padre al componente figlio.

Flusso Dati Unidirezionale dall'elemento padre all'elemento figlio. Gli aggiornamenti sono mandati all'elemento padre che si occupa di eseguirli.

Nell'immagine precedente, ci sono due componenti:

un componente padre
un componente figlio

I dati vivono nel componente padre e sono passati al componente figlio. Anche se i dati vivono nel componente padre, sia il componente padre che il figlio possono usare i dati. Se però i dati devono essere aggiornati, solo il componente padre dovrebbe eseguire l'aggiornamento. Se il componente figlio vuole fare dei cambiamenti, dovrà mandare l'aggiornamento al componente padre che si occuperà di eseguire effettivamente l'aggiornamento dei dati. Una volta che il cambiamento è eseguito, il componente figlio riceverà i dati (che sono appena stati aggiornati).

Questa sembra un inutile lavoro in più, ma avere i dati che scorrono in una direzione ed avere un solo posto dove i dati sono modificati, rende molto più semplice capire come l'applicazione funziona.

<TabellaProdotti>
  <RigaCategoriaProdotto />
  <RigaProdotto />
</TabellaProdotti>

Esempio di componente padre con più componenti figli

In React, i dati passano solo in una direzione, dal padre al figlio. Se i dati sono condivisi tra più componenti figli, allora i dati devono essere saltati nel componente padre e passati a tutti i componenti figli che ne hanno bisogno.

Perché React? - 2. Codice Dichiarativo

Matteo Spreafico — Tue, 25 Aug 2020 08:54:51 +0000

Proviamo a spiegare chiaramente la differenza che probabilmente avete già sperimentato. Pensiamo di essere in auto e voler viaggiare ad una velocità costante di 50km/h. In auto ci son due pedali, un acceleratore ed un freno. Io devo fare un lavoro imperativo, devo premere sui pedali per regolare la velocità e mantenerla costante a 50km/h. Ora supponiamo di avere un'auto nuova, che ha il controllo di velocità che mi permette semplicemente di dichiarare a che velocità voglio viaggiare al posto di dovere usare i pedali per regolare la velocità. Devo semplicemente selezionare lo stato in cui voglio essere, viaggiare a 50 km/h e la macchina si occupa del lavoro imperativo per me.

React ti permette di fare la stessa cosa col tuo codice. Tu dichiari lo stato ed il markup e React esegue il lavoro imperativo per mantenere il DOM aggiornato con la tua applicazione.

Codice Imperativo

Una gran parte di JavaScript è codice imperativo. Se non sai cosa significa "imperativo", potresti avere qualche problema, quindi proviamo a capirlo. Secondo il dizionario "imperativo" significa:

Che contiene o esprime comando.

Quando il codice JavaScript è scritto in modo imperativo, noi diciamo in JavaScript esattamente cosa fare e come farlo. Prova a pensare come se dassimo a JavaScript dei comandi su come eseguire esattamente ogni passaggio. Ad esempio in questo semplice ciclo for:

const colori = ['Verde', 'Bianco', 'Rosso', 'Giallo', 'Azzurro', 'Viola']
const coloriChiari = []

for (let i = 0; i < colori.length; i++) {
 coloriChiari[i] = colori[i] + ' chiaro'
}

Codice Imperativo

Se avete già provato a scrivere JavaScript, questo codice dovrebbe essere abbastanza chiaro. Stiamo ciclando su ogni elemento dell'array colori, aggiungendo ' chiaro' alla fine e salvando la nuova stringa risultante in una nuovo array coloriChiari. Abbastanza semplice, giusto?

Questo è codice imperativo! Stiamo dicendo a JavaScript cosa fare in ogni singolo passaggio. Questi sono i comandi che stiamo dando:

Imposta il valore iniziale per l'iteratore - (let i = 0)
Diciamo al ciclo for quando deve fermarsi - (i < colori.length)
Prendiamo il colore alla posizione corrente e ci aggiungiamo ' chiaro' - (colori[i] + ' chiaro')
Salviamo il risultato nella posizione i-esima del nuovo array - (coloriChiari[i])
Aumentiamo di uno il valore di i - (i++)

Tornando all'esempio iniziale di viaggiare a 50km/h con la mia vecchia automobile, usavo il pedale dell'acceleratore e del freno per regolare la velocità. Quando la velocità era troppo alta, dovevo premere sul pedale del freno per rallentare, ma se rallentava troppo, dovevo di nuovo premere il pedale dell'acceleratore per aumentare la velocità. Inevitabilmente la velocità aumentava troppo e dovevo di nuovo premere il pedale del freno per rallentare. Dovevo gestire la velocità per gestire ogni variazione. Non vi sembra una situazione imperativa? Vediamo se possiamo migliorare le cose!

Codice Dichiarativo

In contrasto al codice imperativo, esiste il codice dichiarativo. Col codice dichiarativo, non dobbiamo specificare ogni singolo passaggio per ottenere il risultato finale. Invece, dichiariamo quello che vogliamo fare, e JavaScript si occuperà di farlo. Mi rendo conto che la spiegazione è un po' astratta, quindi vediamo un esempio. Prendiamo il ciclo for imperativo che abbiamo appena visto e riscriviamolo per renderlo più dichiarativo.

Con il codice imperativo eseguiamo tutti i passaggi per ottenere il risultato finale, ma qual è il risultato finale che veramente vogliamo? Il punto d'inizio era solo un array di colori:

const colori = ['Verde', 'Bianco', 'Rosso', 'Giallo', 'Azzurro', 'Viola']

Array iniziale di colori

L'obiettivo finale che vogliamo ottenere è un array con gli stessi colori, ma con la scritta ' chiaro' alla fine:

['Verde chiaro', 'Bianco chiaro', 'Rosso chiaro', 'Giallo chiaro', 'Azzurro chiaro', 'Viola chiaro']

Obiettivo finale di colori

Per ottenere questo risultato, possiamo prendere l'array iniziale ed usare la funzione JavaScript .map() per dichiarare quello che vogliamo.

const coloriChiari = colori.map(name => name + ' chiaro')

Esempio di codice dichiarativo

Fatto! Con questo codice, non dobbiamo:

Creare un iteratore
Dire al ciclo quando deve fermarsi
Usare un iteratore per selezionare un elemento dell'array colori
Salvare ogni nuovo valore nell'array coloriChiari

Tutte queste operazioni sono eseguite dal metodo .map() degli Array JavaScript.

React è Dichiarativo

Scriveremo codice React presto, ma vediamo meglio cosa significa che è dichiarativo.

<button onClick={attivareVentilatore}>Attivare Ventilatore</button>

Esempio di codice React Dichiarativo

Sembrerà strano, ma questo è un frammento valido di codice React e dovrebbe essere semplice da capire. C'è solo un attributo onClick sul bottone e non stiamo usando .addEventListener() per gestire l'evento con tutti i passaggi necessari. Invece, stiamo solo dichiarando che vogliamo che la funzione attivareVentilatore sia eseguita quando si clicca sul buttone.

Riepilogo

Il codice imperativo dice a JavaScript come eseguire ogni singolo passaggio. Con il codice dichiarativo, noi diciamo a JavaScript cosa vogliamo sia fatto e lasciamo che JavaScript si occupi di eseguire i passaggi.

React è dichiarativo perché scriviamo il codice che vogliamo, e Reach si occupa di prendere il nostro codice dichiarativo ed eseguire tutti i passaggi necessari per ottenere il risultato desiderato in JavaScript/DOM.

Perché React? - 1. La Composizione

Matteo Spreafico — Sun, 23 Aug 2020 08:00:00 +0000

Intro

Prima di vedere la sintassi di React, facciamo un passo indietro e vediamo cosa rende React speciale.

Il suo modello compositivo, la sua natura dichiarativa, il modo in cui i dati scorrono attraverso un componente.

E React è veramente solo JavaScript.

Cos'è la Composizione?

Partiamo dalla definizione:

combinare funzioni semplici per costruirne di più complesse

Quindi ora vediamo come realizzare funzioni complesse soltanto combinando insieme semplici funzioni.

Sei probabilmente familiare con l'idea di funzioni, quando usare una funzione e quando non usarne una probabilmente è abbastanza naturale per te. Una degli aspetti più interessi di React è che puoi usare la stessa intuizione che usi con le funzioni per decidere quando creare componenti React. Mentre una funzione prendere degli argomenti e restituisce un valore, la tua funzione prenderà alcuni argomenti e restituirà UI.

Ora, vediamo del codice.

function getBookCover(isbn) {
  return `http://covers.openlibrary.org/b/${isbn}-M.jpg`;
}

function getBookInfo(isbn) {
  return `http://openlibrary.org/isbn/${isbn}`;
}

function getBookData(isbn) {
  return {
    cover: getBookCover(isbn),
    info: getBookInfo(isbn),
  };
}

getBookData('9780385533225');

Composizione di funzioni che restituisce dei dati

Ci sono tre funzioni ed una invocazione di funzione. Il codice è organizzato e chiaro perché ogni funzione ha il suo specifico scopo. Stiamo componendo le nostre funzioni insieme per creare una funzione getBookData usando le altre due funzioni getBookCover e getBookInfo. Quando ora chiamiamo getBookData otteniamo un oggetto che rappresenta il nostro libro.

Ora invece di avere queste funzioni che ci restituiscono un oggetto con dei dati, proviamo a modificarle per ottenere UI.

function BookCover(isbn) {
  return (
    <img
      alt={`${isbn} cover`}
      src={`http://covers.openlibrary.org/b/${isbn}-M.jpg`}
    />
  );
}

function BookInfo(isbn) {
  return (<a href={`http://openlibrary.org/isbn/${isbn}`}>{isbn} info</a>);
}

function BookData(isbn) {
  return (
    <div className="book">
      <BookCover isbn={isbn} />
      <BookInfo isbn={isbn} />
    </div>
  );
}

<BookData isbn="9780385533225" />

Composizione di funzioni che restituisce UI

Niente panico, vedremo la sintassi più avanti, ma per ora notiamo che in React invece di comporre funzioni per ottenere valori, abbiamo ottenuto UI.

I Vantaggi della Composizione

Il concetto di composizione è uno degli aspetti principali di React ed oltre a renderlo incredibilmente potente è anche fantastico lavorarci. Ricorda che la composizione è solo unire insieme semplici funzioni per crearne di complesse.

Ci sono un paio di concetti che non vogliamo scordare, ovvero:

funzioni semplici
unite per creare un'altra funzione

La composizione è fondata su funzioni semplici. Vediamo un esempio:

function getBookCover(isbn) {
  return `http://covers.openlibrary.org/b/${isbn}-M.jpg`;
}

Funzione semplice

Questa funzione è incredibilmente semplice! È solo una riga! Allo stesso modo getBookInfo è solo una riga:

function getBookInfo(isbn) {
  return `http://openlibrary.org/isbn/${isbn}`;
}

Un'altra funzione semplice

Queste sono sicuramente funzioni semplici, quindi per comporle, dobbiamo solo unirle all'interno di un'altra funzione:


function getBookData(isbn) {
  return {
    cover: getBookCover(isbn),
    info: getBookInfo(isbn),
  };
}

Unione di funzioni

Avremmo anche potuto scrivere getBookData senza usare la composizione:

function getBookData(isbn) {
  return {
    cover: `http://covers.openlibrary.org/b/${isbn}-M.jpg`,
    info: `http://openlibrary.org/isbn/${isbn}`,
  };
}

Funzione senza composizione

Non c'è niente di sbagliato nel farlo, il codice Javascript è perfettamente corretto; ma non si tratta di composizione. Ci sono anche dei potenziali problemi nella versione che non usa la composizione. Se il link al libro è richiesto altrove, il codice dovrà essere duplicato. Una buona funzione dovrebbe seguire la regola "DOT":

Do One Thing (Fai una cosa)

Questa funzione fa un paio di cose sempli: crea due differenti URLs, li salva come proprietà di un oggetto e ritorna l'oggetto. Nella versione con la composizione, ogni funzione fa solo una cosa:

getBookCover – costruisce una stringa con l'URL della copertina del libro
getBookInfo – costruisce una stringa con l'URL della pagina del libro
getBookData – restituisce il nuovo oggetto

React e Composizione

React fa largo uso delle composizione! React costruisce pezzi di UI usando componenti. Vediamo un esempio con tre componenti:

<Pagina />
<Articolo />
<BarraLaterale />

Tre componenti

Ora prendiamo questi semplici componenti ed uniamoli insieme per creare un nuovo componente più complicato, ovvero usiamo la composizione:

<Pagina>
 <Articolo />
 <BarraLaterale />
</Pagina>

Composizione di componenti

Ora il componente Pagina ha al suo interno i componenti Articolo e BarraLaterale. Esattamente con nell'esempio precedente dove getBookData aveva getBookPic e getBookInfo all'interno.

Approfondiremo il concetto di componenti nei prossimi articoli, per ora ricorda che la composizione ha un ruolo enorme nel costruire componenti in React.

Annunciato TypeScript 4.0 RC

Matteo Spreafico — Sun, 09 Aug 2020 17:06:09 +0000

Un paio di giorni Microsoft ha annunciato la Release Candidate della nuova major version di Typescript, la 4.0.

Solitamente un cambio di major version è accompagnato da sostanziali novità e modifiche non retrocompatibili, ma il team di Typescript ha fatto il possibile per minimizzare le incompatibilità, così come avevano fatto per la Typescript 3.9.

Per iniziare subito ad usare la RC basta installarla tramite npm

npm install typescript@rc

Ma vediamo l'elenco delle novità:

Tipi variadici di Tuple
Elementi della Tupla etichettati
Proprietà delle Classi determinate dai Costruttori
Operatori di assegnazione composti con cortocircuito
unknown per i parametri del blocco catch
JSX Factories personalizzate
Velocità migliorata per build con --noEmitOnError
--incremental con --noEmit
/** @deprecated */ Supportato
Modifiche non retrocompatibili

Tipi variadici di Tuple

Consideriamo una funzione in JavaScript chiamata concat che prende due array o tuple e li concatena insieme in un nuovo array.

function concat(arr1, arr2) {
    return [...arr1, ...arr2];
}

Inoltre consideriamo tail, che accetta un array o tupla e restituisce tutti gli elementi tranne il primo.

function tail(arg) {
    const [_, ...result] = arg;
    return result
}

Come possiamo tipizzare queste funzioni in TypeScript?

Per concat, l'unica cosa possibile nelle vecchie versioni del linguaggio era provare a scrivere alcuni overloads.

function concat<>(arr1: [], arr2: []): [A];
function concat<A>(arr1: [A], arr2: []): [A];
function concat<A, B>(arr1: [A, B], arr2: []): [A, B];
function concat<A, B, C>(arr1: [A, B, C], arr2: []): [A, B, C];
function concat<A, B, C, D>(arr1: [A, B, C, D], arr2: []): [A, B, C, D];
function concat<A, B, C, D, E>(arr1: [A, B, C, D, E], arr2: []): [A, B, C, D, E];
function concat<A, B, C, D, E, F>(arr1: [A, B, C, D, E, F], arr2: []): [A, B, C, D, E, F];)

... sono sette overloads per quando il secondo array è sempre vuoto. Aggiungiamone altri per quando arr2 ha un argomento.

function concat<A2>(arr1: [], arr2: [A2]): [A2];
function concat<A1, A2>(arr1: [A1], arr2: [A2]): [A1, A2];
function concat<A1, B1, A2>(arr1: [A1, B1], arr2: [A2]): [A1, B1, A2];
function concat<A1, B1, C1, A2>(arr1: [A1, B1, C1], arr2: [A2]): [A1, B1, C1, A2];
function concat<A1, B1, C1, D1, A2>(arr1: [A1, B1, C1, D1], arr2: [A2]): [A1, B1, C1, D1, A2];
function concat<A1, B1, C1, D1, E1, A2>(arr1: [A1, B1, C1, D1, E1], arr2: [A2]): [A1, B1, C1, D1, E1, A2];
function concat<A1, B1, C1, D1, E1, F1, A2>(arr1: [A1, B1, C1, D1, E1, F1], arr2: [A2]): [A1, B1, C1, D1, E1, F1, A2];

Mi sembra ovvio che non ha senso questa soluzione. Sfortunatamente lo stesso tipo di problema si incontra con funzioni simili a tail.

Questo è anche chiamato “morte per mille overloads” e non risolvere il problema in maniera generica è limitato al numero di overload che vogliamo effettivamente scrivere. Se volessimo una definizione generica dovremmo scrivere qualcosa simile a:

function concat<T, U>(arr1: T[], arr2, U[]): Array<T | U>;

Ma questo non ci dice nulla sulla lunghezza degli dei parametri in ingresso o sull'ordine dei sui elementi quando usiamo le tuple.

TypeScript 4.0 contiene 2 modifiche sostanziali, per rendere questi tipi possibili.

La prima modifica consiste nel fatto che lo spread nei tipi delle tuple può essere un generic. Questo significa che possiamo rappresentare operazione di ordine superiore nelle tuple e negli array anche quando non sappiamo l'effettivo tipo su cui stiamo operando. Quando uno generic spread è istanziato (or sostituito con un tipo concreto) in questi tipi di tuple, generano dei nuovi gruppo di tipi di array e tuple.

Per esempio, questo significa che possiamo assegnare un tipo alle funzioni come tail, senza il problema della “morte per mille overloads”.

function tail<T extends any[]>(arr: readonly [any, ...T]) {
    const [_ignored, ...rest] = arr;
    return rest;
}

const myTuple = [1, 2, 3, 4] as const;
const myArray = ["hello", "world"];

// type [2, 3, 4]
const r1 = tail(myTuple);

// type [2, 3, ...string[]]
const r2 = tail([...myTuple, ...myArray] as const);

La seconda modifica è che l'elemento di spread può essere in qualunque posizione all'interno di una tupla, non solo alla fine!

type Strings = [string, string];
type Numbers = [number, number];

// [string, string, number, number]
type StrStrNumNum = [...Strings, ...Numbers];

In precedenza, TypeScript avrebbe dato il seguente errore.

A rest element must be last in a tuple type.

Ma ora il linguaggio può gestire gli spreads in ogni posizione.

Quando facciamo lo spread di un tipo senza una lunghezza nota, il tipo risultante diventa illimitato a sua volta e tutti gli elementi seguenti sono raccolti nel risultante tipo dell'elemento restante.

type Strings = [string, string];
type Numbers = number[]

// [string, string, ...Array<number | boolean>]
type Unbounded = [...Strings, ...Numbers, boolean];

Combinando entrambi questi comportamenti, possiamo scrivere un solo tipo per concat:

type Arr = readonly any[];

function concat<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U] {
    return [...arr1, ...arr2];
}

Nonostante la definizione sia leggermente lunga, è solo una ed è stata scritta una sola volta e fornisce un comportamento predicibile per gli array e le tuple.

Questa funzionalità è molto interessante, ma ci sono anche degli scenari più complessi. Ad esempio, consideriamo una funzione che applica parzialmente gli argomenti e la chiamiamo partialCall. partialCall prende una funziona insieme agli argomenti che quella funzione di aspetta e poi ritorna una nuova funzione che prende tutti gli altri argomenti che quella funzione si aspetta e la chiama.

function partialCall(f, ...headArgs) {
    return (...tailArgs) => f(...headArgs, ...tailArgs)
}

TypeScript 4.0 migliora il processo di inferenza di tipo per i restanti parametri e gli elementi della tupla restante in modo da generare un tipo che "semplicemente funziona".

type Arr = readonly unknown[];

function partialCall<T extends Arr, U extends Arr, R>(f: (...args: [...T, ...U]) => R, ...headArgs: T) {
    return (...b: U) => f(...headArgs, ...b)
}

In questo caso, partialCall capisce quali parametri può o non può inizialmente ricevere e ritorna funzioni che di conseguenza accettano o rifiutano i rimanenti.

const foo = (x: string, y: number, z: boolean) => {}

// Questo non funziona perchè stiamo passando il tipo sbagliato per 'x'.
const f1 = partialCall(foo, 100);
// ~~~
// error! Argument of type 'number' is not assignable to parameter of type 'string'.

// Questo non funziona perchè stiamo passando troppi argomenti
const f2 = partialCall(foo, "hello", 100, true, "oops")
// ~~~~~~
// error! Expected 4 arguments, but got 5.

// Questo funziona! Il suo tipo è '(y: number, z: boolean) => void'
const f3 = partialCall(foo, "hello");

// Cosa possiamo fare con f3?

f3(123, true); // funziona!

f3();
// error! Expected 2 arguments, but got 0.

f3(123, "hello");
// ~~~~~~~
// error! Argument of type '"hello"' is not assignable to parameter of type 'boolean'.

I tipi variadici di Tuple permettono dei nuovi scenari, specialmente nella composizione di funzioni.

Elementi della Tupla etichettati

Migliorare l'utilizzo dei tipi tupla è importante perché ci permette di avere la validazione del tipo anche in comuni costrutti Javascript come quando si manipola la lista degli argomenti per passarli ad altre funzioni.

Ad esempio, questa funziona usa una tupla per gli argomenti restanti

function foo(...args: [string, number]): void {
    // ...
}

e dovrebbe essere del tutto equivalente a

function foo(arg0: string, arg1: number): void {
    // ...
}

per chiunque chiami foo

foo("ciao", 42); // funziona

foo("ciao", 42, true); // errore
foo("ciao"); // errore

C'è però una differenza evidente: la leggibilità! Nel primo esempio, non abbiamo un nome dei parametri per il primo ed il secondo elemento. Anche non c'è nessuna differenza nel controllo dei tipi, la mancanza di etichette nella tupla le può rendere più difficili da usare e comprendere.

Per questo motivo, in TypeScript 4.0, i tipi tupla possono fornire le etichette.

type Intervallo = [inizio: number, fine: number];

Per rendere ancora più evidente il legame tra liste di parametri e tipi tupla, abbiamo reso la sintassi per i restanti elementi e gli elementi facoltativi simile a quella delle liste di parametri.

type Foo = [primo: number, secondo?: string, ...resto: any[]];

Quando si aggiunge un'etichetta ad un elemento della tupla, tutti gli altri elementi della tupla devono essere etichettati

type Bar = [primo: string, number];
// ~~~~~~
// error! Tuple members must all have names or all not have names.

Vale la pena notare che le etichette non ci obbligano a dare un nome differente alle variabili quando destrutturiamo. Servono unicamente come documentazione.

function foo(x: [primo: string, secondo: number]) {
// ...

// nota: non dobbiamo chiamare queste 'primo' e 'secondo'
let [a, b] = x;

// ...
}

Per saperne di più potete vedere la pull request per i labeled tuple elements.

Proprietà delle Classi determinate dai Costruttori

Typescript 4.0 ora può usare l'analisi del flusso di controllo per determinare il tipo delle proprietà nelle classi quando noImplicitAny è abilitato.

class Quadrato {
    // Precedentemente: any implicito
    // Ora: determinato `number`
    area;
    lunghezzaLato;

    constructor(lunghezzaLato: number) {
        this.lunghezzaLato = lunghezzaLato;
        this.area = lunghezzaLato ** 2;
    }
}

Quando non tutti i percorsi del costruttore assegnano un valore, la proprietà è considerata potenzialmente undefined.

class Quadrato {
    lunghezzaLato;

    constructor(lunghezzaLato: number) {
        if (Math.random()) {
            this.lunghezzaLato = lunghezzaLato;
        }
    }

    get area() {
        return this.lunghezzaLato ** 2;
        // ~~~~~~~~~~~~~~~
        // error! Object is possibly 'undefined'.
    }
}

Operatori di assegnazione composti con cortocircuito

JavaScript, come molti altri linguaggi, supporto un gruppo di operatori chiamati operatori di assegnazione composti. Questi operatori, applicano un'operazione a due argomenti e poi assegnano il risultato a sinistra. Li avrete probabilmente già visti:

// Somma
// a = a + b
a += b;

// Sottrazione
// a = a - b
a -= b;

// Moltiplicazione
// a = a * b
a *= b;

// Divisione
// a = a / b
a /= b;

// Elevamento a potenza
// a = a ** b
a **= b;

// Bit Shift a sinisstra
// a = a << b
a <<= b;

Molti operatori in JavaScript hanno il corrispondente operatore di assegnazione composto! Ma ci sono tre importanti eccezioni: and logico (&&), or logico (||), and coalescenza nulla (??).

Per questo motivo, TypeScript 4.0 supporta la promettente proposta di includere questi nuovi operatori: &&=, ||=, and ??=.

Questi operatori sono utili in ogni caso un utente voglia scrivere codice come il seguente:

a = a && b;
a = a || b;
a = a ?? b;

Questi sono alcuni esempi di utilizzo dove si utilizza il lazy initialization.

let valori: string[];

// Prima
(valori ?? (valori = [])).push("ciao");

// Dopo
(valori ??= []).push("ciao");

Nel raro caso in cui tu usi getters o setters con effetti collaterali, ricorda che questi operatori eseguono l'assegnamento solo se necessario. In questo senso l'assegnamento è cortocircuitato, che rappresenta una differenza rispetto agli altri operatori di assegnazione composti.

a ||= b;

// equivalente a

a || (a = b);

Per altre informazioni, potete vedere la pull request.

`unknown` per i parametri del `catch`

Da sempre i parametri dei blocchi catch hanno sempre avuto il tipo any. Questo vuol dire che TypeScript ti lascia fare qualunque cosa con loro.

try {
    // ...
}
catch (x) {
    // x ha come tipo 'any' - buon divertimento!
    console.log(x.message);
    console.log(x.toUpperCase());
    x++;
    x.yadda.yadda.yadda();
}

Dato che i parametri del blocco catch hanno il tipo any in automatico, la mancanza del controllo di tipo non ci aiuta ad evitare di introdurre altri errori nel blocco di codice dedicato alla gestione degli errori!

Per questo motivo TypeScript 4.0 ora ti lascia indicare il tipo di ogni variabile del blocco catch come unknown. unknown è più sicuro di any perché ti ricorda che devi controllare il tipo prima di eseguire ogni operazione sui nostri valori.

try {
    // ...
}
catch (e: unknown) {
    // errore!
    // La proprietà 'toUpperCase' non esiste nel tipo 'unknown'.
    console.log(e.toUpperCase());

    if (typeof e === "string") {
        // funziona!
        // Abbiamo verificaro che 'e' ha il tipo 'string'.
        console.log(e.toUpperCase());
    }
}

Il tipo automatico dei parametri dei blocchi catch non cambia, ma potrebbe essere aggiunta una nuova opzione --strict in futuro per abilitare questo comportamento. Nel frattempo, dovrebbe esser possibile scrivere una regola di validazione per richiedere che i parametri dei blocchi catch abbiano il tipo annotato esplicitamente a : any o : unknown.

JSX Factories personalizzate

Quando si usa JSX, un fragment è un tipo di elementi JSX che ti permette restituire diversi elementi figlio. Quando fragment è stato implementato per la prima volta in TypeScript, non era chiaro come le altre librerie lo avrebbero utilizzato.

In TypeScript 4.0, gli utenti possono personalizzare la fragment factory attraverso la nuova opzione jsxFragmentFactory.

Ad esempio, il seguente tsconfig.json dice a TypeScript di trasformare JSX in un modo compatibile con React, ma sostituisce ogni chiamata a React.createElement con h, e usa Fragment invece di React.Fragment.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

Nel caso in cui ti serva avere una diversa JSX factory per ogni file, puoi usare il commento /** @jsxFrag */. Ad esempio…

// Nota: per usare questi commenti, devono essere scritti
// usando lo stile JSDoc su più linee.
/** @jsx h */
/** @jsxFrag Fragment */

import { h, Fragment } from "preact";

let stuff = <>
    <div>Hello</div>
</>;

… e verrà trasformato in questo JavaScript…

// Nota: per usare questi commenti, devono essere scritti
// usando lo stile JSDoc su più linee.
/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
let stuff = h(Fragment, null,
    h("div", null, "Hello"));

Velocità migliorata per `build` con `--noEmitOnError`

Precedentemente, la compilazione di programma che precedentemente aveva degli errori usando --incremental sarebbe risultata estremamente lenta usando il parametro --noEmitOnError. Questo perché nessuna delle informazioni dell'ultima compilazione sarebbero state salvate nel .tsbuildinfo file per via del parametro --noEmitOnError.

TypeScript 4.0 modifica questo comportamento ottenendo un grande miglioramento delle prestazioni in questi scenari, e di conseguenza migliora gli scenari con --build (che implica sia --incremental che --noEmitOnError).

Per altri dettagli, potete far riferimento alla pull request.

`--incremental` con `--noEmit`

TypeScript 4.0 permette di usare il parametro --noEmit quando si usa --incremental. Questo non era precedentemente permesso poiché --incremental richiede la creazione del .tsbuildinfo file; ma avere delle build più veloci è molto importante ed è stato abilitato per tutti gli utenti.

Al solito, potete vedere l'implementazione della nella pull request.

/** @deprecated */ Supportato

TypeScript ora riconosce quando una dichiarazione è stata decorata con il commneto JSDoc /** @deprecated *. L'informazione è passata alla lista dei suggerimenti per l'autocompletamento in modo che che l'editor possa gestirla opportunamente. In VS Code ad esempio i valori deprecati sono mostrati col testo sbarrato, ~~come questo~~.

Modifiche non Retrocompatibili

Modifiche a `lib.d.ts`

Le dichiarazioni in lib.d.ts sono cambiate, più precisamente i tipi per il DOM sono cambiati. La modifica più rilevante è l'eliminazione di document.origin che funzionava solo in vecchie versioni di IE e Safari MDN raccomanda di passare a self.origin.

Proprietà che ridefiniscono le funzione di accesso (ed il contrario) è un Errore

Precedentemente, era un errore solo quando una proprietà ridefiniva una funzione di accesso o il contrario, quando veniva usato useDefineForClassFields; ora invece TypeScript genererà sempre un errore.

class Base {
    get foo() {
        return 100;
    }
    set foo() {
        // ...
    }
}

class Derived extends Base {
    foo = 10;
// ~~~
// errore!
// 'foo' è definito come una funzione di accesso nella classe 'Base',
// ma è ridefinito nella classe 'Derived' come proprietà.
}

class Base {
    prop = 10;
}

class Derived extends Base {
    get prop() {
    // ~~~~
    // errore!
    // 'prop' è definito come una proprietà nella Classe 'Base',
    // ma è ridefinito in 'Derived' come una funziona di accesso.
        return 100;
    }
}

Gli operandi per `delete` devono essere facoltativi.

Quando si usa l'operatore delete in strictNullChecks, l'operando deve ora essere any, unknown, never, o essere facoltativo (ovvero contenere il tipo undefined). Altrimenti l'uso dell'operatore delete è un errore.

interface Cosa {
    prop: string;
}

function f(x: Cosa) {
    delete x.prop;
    // ~~~~~~
    // errore! L'operatando dell'operatore 'delete' deve essere facoltativo.
}

L'uso del Node Factory di TypeScript è deprecato

Attualmente TypeScript fornisce una gruppo di funzioni “factory” per produrre AST Nodes; ma ora TypeScript 4.0 offre una nuova node factory API. Di conseguenza con TypeScript 4.0 abbiamo preso la decisione di deprecare le vecchie funzioni in favore delle nuove.

La versione originale di questo annuncio è disponibile sul sito Microsoft

DEV Community: Matteo Spreafico

Realizzare UI con Reat - 7. Composizione di Componenti

Composizione con la Lista di Contatti

Semplice Interfaccia dei Componenti

Realizzare UI con React - 6. Creare una Nuova React App

Yarn

Esploriamo l'applicazione React

Realizzare UI con React - 5. Creare Elementi e JSX

Disegnare Elementi React nel DOM

React.createElement() restituisce un Elemento React

Anche JSX restituisce un Elemento

Componenti

Perché React? - 4. React è "solo JavaScript"

Ѐ solo JavaScript

Il Metodo .map() di Array

Il Metodo .filter() di Array

Usiamo .map() e .filter() insieme

.filter() per primo!

Perché React? - 3. Flusso Dati Unidirezionale

Data-Binding in altri Frameworks

Flusso Dati in React

Perché React? - 2. Codice Dichiarativo

Codice Imperativo

Codice Dichiarativo

React è Dichiarativo

Riepilogo

Perché React? - 1. La Composizione

Intro

Cos'è la Composizione?

I Vantaggi della Composizione

React e Composizione

Annunciato TypeScript 4.0 RC

Tipi variadici di Tuple

Elementi della Tupla etichettati

Proprietà delle Classi determinate dai Costruttori

Operatori di assegnazione composti con cortocircuito

unknown per i parametri del catch

JSX Factories personalizzate

Velocità migliorata per build con --noEmitOnError

--incremental con --noEmit

/** @deprecated */ Supportato

Modifiche non Retrocompatibili

Modifiche a lib.d.ts

Proprietà che ridefiniscono le funzione di accesso (ed il contrario) è un Errore

Gli operandi per delete devono essere facoltativi.

L'uso del Node Factory di TypeScript è deprecato

`React.createElement()` restituisce un Elemento React

Il Metodo `.map()` di Array

Il Metodo `.filter()` di Array

Usiamo `.map()` e `.filter()` insieme

`.filter()` per primo!

`unknown` per i parametri del `catch`

Velocità migliorata per `build` con `--noEmitOnError`

`--incremental` con `--noEmit`

Modifiche a `lib.d.ts`

Gli operandi per `delete` devono essere facoltativi.