React, TypeScript e Redux: configurazione di TypeScript, TSLint e installazione di Redux

Dopo aver creato il progetto seguendo la guida React, TypeScript e Redux: Come creare una web app proseguiamo con la configurazione di TypeScript, TSLint e installazione di Redux. Installeremo tutto ciò che ci serve per fare i test, Redux per gestire lo state globale dell’applicazione ed infine metteremo mano ad alcuni file di configurazione.

React, TypeScript e Redux: configurazione di TypeScript, TSLint e installazione di Redux

Per prima cosa è necessario che ti posizioni con il terminale all’interno della cartella del tuo progetto.

Enzyme

Procediamo con l’installazione di enzyme, dei suoi @types (necessari perché usiamo TypeScript) e di react-addons-test-utils. Scrivi quindi nel terminale:

yarn add enzyme @types/enzyme react-addons-test-utils --dev

Dunque, sempre da terminale, digita:

yarn add enzyme-adapter-react-16 @types/enzyme-adapter-react-16 --dev

Nota bene: i pacchetti @types non fanno altro che fornirci dei file con estensione .d.ts. Sono file dichiarativi che aiutano TypeScript a capire come può utilizzare Enzyme (che contiene codice JavaScript).

Redux

Per utilizzare Redux abbiamo bisogno invece di digitare da terminale:

yarn add redux react-redux @types/react-redux

Configurazione

Ora procediamo con la configurazione del nostro progetto.

I file che ci interessano si trovano nella root del progetto. Il primo è la configurazione di TypeScript e si chiama tsconfig.json il quale al suo interno contiene:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Assicurati che sia identico così da non avere una situazione differente e così da poter seguire la guida senza problemi. Come vedi è presente un file tra gli “exclude” che si trova in src e si chiama setupTests.ts.

Deep Learning Specialization on Coursera

Crea un file in src chiamandolo quindi setupTests.ts, se non esiste già, ed al suo interno scrivi:

import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

Questo file verrà eseguito sempre prima di tutti gli altri tests ed esegue la configurazione di Enzyme.

Infine apri il file nella root del progetto che si chiama tslint.json. Assicurati che contenga questa configurazione:

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts"
    ]
  },
  "rules": {
     "interface-name":[false], //interface starting with I (i maiusc) is not mandatory
     "member-access": [true, "no-public"], // render, componentDidMount, ecc. are public by default without specify it,
     "no-console": false,
     "ordered-imports": [true, {//necessary for import order. we don't need it
      "import-sources-order": "any",
      "named-imports-order": "any"
    }],
    "object-literal-sort-keys": false
  }
}

Quello che ci interessa e che potresti avere diverso è “rules”, ovvero le regole che vogliamo dare al linter. Vediamo in ordine le regole impostate:

interface-name – se impostato a true è necessario che tutte le interfacce comincino con la lettera “i” maiuscola
member-access – determina se dobbiamo specificare private, protected e public. Visto che non vogliamo scrivere public su ogni singola funzione che di default è pubblica impostiamo questa regola con valore “no-public” (maggiori informazioni quì)
no-console – è impostato a false perché vogliamo usare liberamente la console
ordered-imports – specifichiamo che non siamo interessati ad avere gli import in ordine (personalmente preferisco suddividerli per area: components, services, utils, ecc.)
object-literal-sort-keys – impostiamo questo valore a false così che i nostri oggetti possano avere le proprietà nell’ordine che preferiscono

React, TypeScript e Redux: configurazione di TypeScript, TSLint e installazione di Redux

Bene ora siamo quasi pronti per creare qualcosa di fantastico! Nei prossimi articoli, raccolti nello step principale della guida, vedremo di impostare il routing della web app e creeremo i nostri primi componenti.

Mentre attendi potrebbero esserti utili alcuni libri quali:

Learning React: Functional Web Development with React and Redux

Ed alcuni corsi Udemy quali:

Non ti perdere anche la guida su React Native.

Se vuoi rimanere aggiornato sugli articoli del blog ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?

Per dubbi o domande non esitare a scrivermi nei commenti ?

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).

Commenti