React PropTypes deprecated! – czyli zmiany w typecheck

PropTypes w React.js, do czego służą, co się zmieniło oraz alternatywy.

Programując w językach statycznie typowanych, nie musimy przejmować się typami danych, ponieważ typ określany jest przy deklaracji zmiennych. Co jednak w przypadku języka javascript, który statycznie typowany nie jest? W jaki sposób możemy uniknąć błędów w aplikacjach związanych z różnymi typami danych? W przypadku React.js z pomocą przyjdą nam PropTypes, ale w formie innej niż dotychczas.

Na początek czym w ogóle są PropTypes? PropTypes to wbudowana w bibliotekę React.js opcja weryfikacji typów dla props (więcej o props tutaj). Do tej pory aby mieć pewność, że przekazane props do danego komponentu są tym czego oczekujemy, musieliśmy ufać samemu sobie 🙂 lub skorzystać właśnie z potencjału React.PropTypes.

Ich użycie jest bardzo proste i przyjemne. Dla każdego props przekazanego do komponentu tworzymy propTypes, który definiuje jego typ np. string, number, fn itd.

Do tej pory, a dokładnie do wersji 15.4 propTypes były integralną częścią React.js i ich użycie odbywało się poprzez obiekt React. Poniżej wersji 15.5 użycie propTypes wyglądało jak na przykładzie poniżej:

// Before (15.4 and below) 
import React from 'react';

class Component extends React.Component { 
  render() { 
    return return 
      <div>{this.props.text}</div>;
  }
}

Component.propTypes = { 
  text: React.PropTypes.string.isRequired, 
}

7 kwietnia 2017 biblioteka ukazała się w nowej wersji 15.5, w której propTypes zostały wyodrębnione do osobnej paczki. W nowej odsłonie React.js użycie propTypes jest nadal bardzo proste, z tą różnicą, że musimy je osobno zainstalować, więcej szczegółów odnośnie instalacji tutaj

npm install --save prop-types

 

Samo użycie w kodzie znacząco się nie zmieniło, pozbywamy się jedynie obiektu React, ponieważ importujemy paczkę bezpośrednio:

// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: PropTypes.string.isRequired,
};

Kompletną dokumentację propTypes można poczytać na stronie react.js, znajdziemy tam m.in. opis wszystkich możliwych walidatorów.

Alternatywami dla propTypes dającymi więcej możliwości dzięki sprawdzaniu typów dla całej aplikacji są Flow lub TypeScript, ale to temat na osobny post. Ciekawskich odsyłam do dokumentacji oficjalnej.

0

Zostaw komentarz