React
ReactJS gebruiken met Typescript

ReactJS-component geschreven in Typescript

Eigenlijk kun je de componenten van ReactJS in Typescript gebruiken zoals in het voorbeeld van Facebook. Vervang gewoon de extensie van het 'jsx'-bestand naar' tsx ':

//helloMessage.tsx:
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

Maar om volledig gebruik te kunnen maken van de hoofdfunctie van Typescript (statische typecontrole) moet een aantal dingen worden gedaan:

1) converteer React.createClass-voorbeeld naar ES6-klasse:

//helloMessage.tsx:
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);

2) voeg vervolgens Props en State interfaces toe:

interface IHelloMessageProps {
    name:string;
}

interface IHelloMessageState {
  //empty in our case
}

class HelloMessage extends React.Component<IHelloMessageProps, IHelloMessageState> {
  constructor(){
    super();
  }  
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);

Nu geeft Typescript een foutmelding als de programmeur vergeet om rekwisieten door te geven. Of als ze rekwisieten hebben toegevoegd die niet in de interface zijn gedefinieerd.

Stateless React Components in Typescript

Reageren componenten die pure functies van hun rekwisieten zijn en geen interne status vereisen, kunnen worden geschreven als JavaScript-functies in plaats van de syntaxis van de standaardklasse te gebruiken, zoals:

import React from 'react'

const HelloWorld = (props) => (
    <h1>Hello, {props.name}!</h1>
);

Hetzelfde kan worden bereikt in Typescript met de klasse React.SFC :

import * as React from 'react';

class GreeterProps {
   name: string
}

const Greeter : React.SFC<GreeterProps> = props =>
    <h1>Hello, {props.name}!</h1>;

Merk op dat de naam React.SFC een alias is voor React.StatelessComponent dus worden gebruikt.

Installatie en instellingen

Om typescript te gebruiken met reageren in een knooppuntproject, moet u eerst een projectmap hebben die is geïnitialiseerd met npm. De map initialiseren met npm init

Installeren via npm of garen

U kunt React installeren met behulp van npm door het volgende te doen:

npm install --save react react-dom

Facebook heeft zijn eigen pakketbeheerder genaamd Yarn uitgebracht , die ook kan worden gebruikt om React te installeren. Na het installeren van Yarn hoeft u alleen deze opdracht uit te voeren:

yarn add react react-dom

Je kunt React vervolgens in je project gebruiken op precies dezelfde manier alsof je React via npm had geïnstalleerd.

Definities van reacttypen installeren in Typescript 2.0+

Om uw code met behulp van typescript te compileren, voegt u typedefinitiebestanden met npm of garen toe.

npm install --save-dev @types/react @types/react-dom

of met garen

yarn add --dev @types/react @types/react-dom

Definities van reacttypen installeren in oudere versies van Typescript

U moet een afzonderlijk pakket met de naam tsd gebruiken

tsd install react react-dom --save

Typeconfiguratie toevoegen of wijzigen

Als u JSX wilt gebruiken, een taal die javascript combineert met html / xml, moet u de configuratie van de typescript-compiler wijzigen. In het tsconfig.json het project (meestal tsconfig.json genoemd) moet u de JSX-optie toevoegen als:

"compilerOptions": {
    "jsx": "react"
},

Die compileroptie vertelt de typcript-compiler in feite om de JSX-tags in code te vertalen naar javascript-functieaanroepen.

Om te voorkomen dat de typescript-compiler JSX omzet in gewone javascript-functie-aanroepen, gebruikt u

"compilerOptions": {
    "jsx": "preserve"
},

Staatloze en eigenschaploze componenten

De eenvoudigste reactiecomponent zonder status en zonder eigenschappen kan worden geschreven als:

import * as React from 'react';

const Greeter = () => <span>Hello, World!</span>

Die component heeft echter geen toegang tot this.props omdat typescript niet kan zien of het een react-component is. Gebruik voor toegang tot de rekwisieten:

import * as React from 'react';

const Greeter: React.SFC<{}> = props => () => <span>Hello, World!</span>

Zelfs als de component geen expliciet gedefinieerde eigenschappen heeft, heeft deze nu toegang tot props.children omdat alle componenten inherent kinderen hebben.

Een ander soortgelijk goed gebruik van componenten zonder staat en zonder eigendom is in eenvoudige paginasjablonen. Het volgende is een voorbeeldige eenvoudige Page component, ervan uitgaande dat er al hypothetische componenten voor Container , NavTop en NavBottom zijn in het project:

import * as React from 'react';

const Page: React.SFC<{}> = props => () => 
    <Container>
        <NavTop />
        {props.children}
        <NavBottom />
    </Container>

const LoginPage: React.SFC<{}> = props => () =>
    <Page>
        Login Pass: <input type="password" />
    </Page>

In dit voorbeeld kan het onderdeel Page later door elke andere werkelijke pagina worden gebruikt als basissjabloon.