- 5 minuten
Expert talks | React type checking: wat is het en waarom heb je het nodig?
JavaScript is gedefinieerd als een "zwak getypeerde" of "ongetypeerde" taal, wat betekent dat je niet hoeft te specificeren welk type gegevens aan een bepaalde variabele zal worden of is gedeclareerd. Het zal automatisch het type bepalen op basis van de waarde die je aan deze variabele geeft. Dit wordt als slim beschouwd, omdat het kan uitzoeken welk type gegevens je hebt en aanpassingen kan maken, zodat je je verschillende typen gegevens niet opnieuw hoeft te definiëren.
Variabelen in JavaScript zijn niet direct geassocieerd met een bepaald waardetype, en aan elke variabele kunnen waarden van alle typen worden toegekend.
let foo = 42; // foo is now a number
foo = 'bar'; // foo is now a string
foo = true; // foo is now a boolean
Hoe zit het met React?
Hoewel JavaScript, een slimme en zwak getypeerde taal, in veel gevallen erg nuttig is en intuïtief voor beginnende JS Devs, is het niet wat je React child components nodig hebben. Bij het bouwen van je React applicatie, hebben de child components bepaalde verwachtingen over welke types van data ze moeten ontvangen om de functionaliteiten die je hen hebt gegeven af te handelen. Gelukkig is er een oplossing: type checking!
Wat is type checking?
Type checking zorgt ervoor dat je de juiste waarden meegeeft aan je functionaliteit, terwijl je de typefouten tot een minimum beperkt en je code makkelijker leesbaar maakt.
Voordelen:
- typefouten worden in een vroeg stadium ontdekt
- geoptimaliseerde en gemakkelijker te lezen code
Voor we verder gaan over type checking moet je dit weten: er is geen goede of foute manier om type checking correct uit te voeren. Het gaat erom wat je persoonlijke voorkeuren zijn en wat voor jou het beste werkt.
Bij type checking zijn er 2 varianten: statisch en dynamisch. Het belangrijkste verschil tussen de twee is dat statische typecontrole gebeurt tijdens het compileren, het controleert de types voordat de applicatie wordt uitgevoerd. Terwijl dynamische typecontrole gebeurt tijdens runtime, het controleert de types tijdens het uitvoeren van de code. Een nadeel van dynamische type checking is dat het resulteert in minder geoptimaliseerde code en dat het vatbaarder is voor runtime typefouten omdat het runtime controles forceert elke keer dat de code wordt uitgevoerd. Zoals we al eerder zeiden: welke je kiest is gebaseerd op voorkeur.
Met al dit theoretische gepraat over type checking willen we allemaal weten hoe het in het echt wordt uitgevoerd en hoe het eruit ziet.
Wat kunnen we in onze React-applicatie gebruiken voor typecontrole?
Tools voor statische typecontrole:
- Flow
- TypeScript
- ...
Flow
Flow controleert je code op fouten door middel van statische type-annotaties. Met deze types kun je Flow vertellen hoe je wilt dat je code werkt, en Flow zal ervoor zorgen dat het ook zo werkt.
Flow is een code linter gemaakt door Facebook voor eenvoudig te gebruiken typecontrole in React. Het is aanpasbaar en gemakkelijk te verwijderen of toe te voegen aan je project. De documentatie van Flow is echt compact, maar het heeft precies alles wat je moet weten. Om er meer over te leren, bezoek de documentatie of neem een kijkje in deze cheat sheet.
Het volgende eenvoudige voorbeeld komt hier overigens ook rechtstreeks uit.
/* @flow */
function square (n: number) {
return n * n
}
const four = square(2)
TypeScript
TypeScript voegt extra syntaxis toe aan JavaScript om een strakkere integratie met je editor te ondersteunen. Vang fouten in je editor in een vroeg stadium op.
TypeScript is geen linter zoals Flow, maar een codetaal die door Microsoft is ontwikkeld om extra syntaxis aan JavaScript toe te voegen. Het biedt een extra laag op je JavaScript code om consequent te controleren of je types correct zijn. Het markeert onverwacht gedrag waardoor de kans op een bug afneemt. Om er meer over te weten te komen verwijzen we je naar de docs.
De relatie tussen TypeScript (TS) en JavaScript (JS) is vrij uniek onder de moderne programmeertalen.
Persoonlijk vind ik deze taal het leukst. Hoewel het in het begin moeilijk is om je aan te passen aan de strikte controle van types, krijg je het na veel rommelen onder de knie en is het resultaat geweldig.
const firstStringExample: string = 'This example is of the type string';
const stringExample = (person: string) => {
return `Hello, ${person}`;
}
stringExample('Jane');
interface Person {
firstName: string;
lastName: string;
age: number;
hasWebsite: boolean;
}
const objectExample = (person: Person) => {
return `Hello, ${person.firstName}`;
}
objectExample({ firstName: 'Jane', lastName: 'Doe', age: 30, hasWebsite: true });
interface Person {
firstName: string;
lastName: string;
age: number;
hasWebsite: boolean;
}
const arrayExample = (persons: Person[]) => {
persons.forEach((person: Person, key: number) => {
return `Hello, ${person.firstName} - ${person.age}`;
})
}
const personsArray = [
{ firstName: 'Jane', lastName: 'Doe', age: 30, hasWebsite: false },
{ firstName: 'John', lastName: 'Doe', age: 30, hasWebsite: false },
{ firstName: 'React', lastName: 'Doe', age: 30, hasWebsite: false },
{ firstName: 'Flavor', lastName: 'Doe', age: 30, hasWebsite: false },
{ firstName: 'Jane', lastName: 'Doe', age: 30, hasWebsite: false },
{ firstName: 'Jane', lastName: 'Doe', age: 30, hasWebsite: false },
{ firstName: 'Jane', lastName: 'Doe', age: 30, hasWebsite: false },
];
arrayExample(personsArray);
Hulpmiddel(en) voor dynamische typecontrole
- PropTypes
PropTypes
React (en mogelijk andere bibliotheken) zullen de props die aan je componenten worden doorgegeven controleren aan de hand van deze definities, en tijdens de ontwikkeling waarschuwen als ze niet overeenkomen.
React heeft zijn eigen ingebouwde type checker, voor de laatste versie van React heeft het de PropTypes verplaatst naar een stand alone package. Deze PropTypes hebben een reeks van validators die gebruikt kunnen worden bij het controleren van de props in je React applicatie. Als de types niet overeenkomen krijg je een foutmelding of waarschuwing in je JavaScript console. Voor een lijst van alle geëxporteerde types kun je de documentatie bekijken.
Hier in Esign gebruiken we PropTypes in veel van onze React projecten, voornamelijk voor Streamic.
import PropTypes from 'prop-types';
// your React component code
Example.propTypes = {
firstName: PropTypes.string;
lastName: PropTypes.string;
age: PropTypes.number;
hasWebsite: PropTypes.bool;
};
Recap
Type checking is een handige methode om functioneler te werk te gaan en minder variabele typefouten te maken. Er zijn heel wat mogelijkheden om tot typecontrole over te gaan, en er is dan ook geen goede of foute methode. Uiteindelijk gaat het maar om 2 zaken: jouw persoonlijke voorkeuren en het eindresultaat.
