user.settings.notifications.newMessages
zugreifen, sollten wir zuvor prüfen, ob user
überhaupt ein Objekt und nicht null
ist, anschließend sollten wir prüfen, ob das gleiche für settings
zutrifft, usw. Andernfalls könnten wir es mit einem Type Error zu tun haben:prop-types
-Package ausgelagert. Während man seine PropTypes vorher mittels bspw. React.PropTypes.string
direkt in der Core-Library definieren konnte, erfolgt der Zugriff nun über das zuvor importierte PropTypes
-Modul: PropTypes.string
.devDependency
installiert werden muss. Auf der Kommandozeile reicht dafür ein simples:process.env.NODE_ENV=production
gebaut wurde, bekommen wir diese Warnungen nicht mehr zu sehen!propTypes
der Komponente:EventOverview
-Komponente die beiden Props date
und title
haben muss, darüber hinaus die beiden Props description
und ticketsUrl
haben kann. Ob eine Prop vorausgesetzt wird, kann mittels des angehängten .isRequired
gekennzeichnet werden. Die date
-Prop muss dabei in unserem Beispiel eine Instanz des nativen JavaScript Date
-Objekts sein, title
muss ein string
sein. Die beiden optionalen Props description
und ticketsUrl
müssen nicht übergeben werden; werden sie allerdings übergeben, müssen auch sie vom Typ string
sein.static propTypes
Eigenschaft definieren können. Hier können wir einfach der Funktion selbst eine propTypes
-Eigenschaft hinzufügen. Das sieht dann so aus:defaultProps
. Diese werden ähnlich verwendet wie die propTypes
, nämlich als statische Eigenschaft. Aber schauen wir uns ein schnelles Beispiel an:name
-Prop der Komponente als string.isRequired
, wir erwarten also, dass die Prop immer übergeben wird und dass sie auch immer ein String ist. Anschließend definieren wir einen Standardwert für die name
-Prop. Dieser wird immer dann verwendet, wenn kein Wert für die entsprechende Prop übergeben wird.name
-Prop hingegen den defaultValue
, in diesem Fall Gast und zeigt in beiden Fällen an: Hallo Gast! React ist dabei klug genug bei fehlender aber als isRequired
markierter Prop zu erkennen ob ein defaultValue
existiert und zeigt eine Warnung nur dann an, wenn eine Prop fehlt und auch nicht gleichzeitig ein defaultValue
definiert wurde.propType
-Definitionen aus dem Build entfernt werden, da diese ohnehin nur im Development-Modus berücksichtigt werden.babel-preset-react
-Pakets, wurde also sozusagen zur Verwendung mit React „mit-installiert“ und konnte ohne jeglichen zusätzlichen Aufwand einfach verwendet werden.npm install @babel/preset-flow
(bzw. analog dazu yarn add @babel/preset-flow
) installieren lässt. Anschließend muss dann lediglich noch das entsprechende @babel/preset-flow
als Preset in die Babel-Config eingetragen werden. Das Preset wird benötigt, um die Flow-Syntax, die kein valides JavaScript wäre, im Build-Prozess aus dem entsprechenden Files zu entfernen, sodass es beim Aufruf im Browser nicht zu Syntax-Fehlern kommt.npm install flow-bin
(bzw. yarn add flow-bin
) installieren lässt. Die Flow Executable führt dann das eigentliche Typechecking durch../node_modules/flow init
im Terminal in eurem Projektverzeichnis../node_modules
voranzustellen wenn Flow aufgerufen werden soll, könnt ihr euch einen Eintrag in den script
-Teil eurer package.json
machen:flow init
aufgerufen habt, solltet ihr in eurem Projektverzeichnis eine neue Datei .flowconfig
sehen, die erst einmal ziemlich leer aussieht, von Flow aber benötigt wird. In diese Datei könnt ihr später Optionen setzen oder angeben, welche Dateien mit Flow geprüft werden sollen oder welche eben nicht.flow-bin
Package in euer Projekt installiert und die .flowconfig
angelegt? Super. Dann kann es richtig losgehen. Um zu verifizieren, dass alles korrekt eingerichtet wurde, könnt ihr einmal flow aufrufen. Wenn ihr den flow-Eintrag von oben in eurer package.json
hinzugefügt habt, könnt ihr das mit dem Befehl yarn flow
in eurem Terminal. Ist alles korrekt eingerichtet, seht ihr eine Meldung wie die folgende:PropsT
. Der Name kann hier grundsätzlich frei gewählt werden. Oft werden T
oder Type
an den Namen der Type-Definitions angehängt, um es für Entwickler gleich ersichtlich zu machen, dass es sich dabei um eben solche handelt. Aber rein aus technischer Sicht ist das nicht notwendig. Den eben definierten Type übergeben wir dann in Form eines sogenannten „Generic Type“ an die Komponente:date
-Prop, die aus einer Date
-Instanz bestehen muss und erforderlich ist. Als nächstes dann description
und ticketsUrl
, die durch ein ?
nach ihrem Namen als optional gekennzeichnet wurden und jeweils, sollten sie übergeben werden, vom Typ string
sein müssen. Zuletzt wird eine title
-Prop erwartet, die ebenfalls ein string
sein muss, aber nicht optional ist. Anders als bei PropTypes müssen hier nicht die erforderlichen Props mittels isRequired
gekennzeichnet werden, sondern im Gegenteil die optionalen Props mittels Fragezeichen als optional markiert werden..ts
Datei-Endung haben, enthält eine Datei auch JSX, muss die Datei zwingend mit .tsx
enden.tsc
) sondern kann in Form eines Babel-Plugins verwendet werden. Das Plugin wird mit dem Babel Preset @babel/preset-typescript
installiert. Genaue Informationen wie TypeScript in Verbindung mit React verwendet werden kann, liefert die offizielle TypeScript-Dokumentation unter https://www.typescriptlang.org/docs.