React
ReactJS mit Typescript verwenden

ReactJS-Komponente in Typescript geschrieben

Tatsächlich können Sie die ReactJS-Komponenten in Typescript wie in Facebook verwenden. Ersetzen Sie einfach die Dateierweiterung "jsx" in "tsx":

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

Um jedoch die Hauptfunktion von Typescript (statische Typprüfung) voll ausnutzen zu können, sollten einige Dinge ausgeführt werden:

1) Konvertieren Sie das React.createClass-Beispiel in die ES6-Klasse:

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

2) Als nächstes fügen Sie Props und Statusschnittstellen hinzu:

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);

Jetzt zeigt Typescript einen Fehler an, wenn der Programmierer vergisst, Requisiten zu übergeben. Oder wenn sie Requisiten hinzugefügt haben, die nicht in der Schnittstelle definiert sind.

Stateless React-Komponenten in Typescript

Reagieren Sie Komponenten, die reine Funktionen ihrer Requisiten sind und keinen internen Status erfordern, können Sie als JavaScript-Funktionen schreiben, anstatt die Standardklassensyntax zu verwenden:

import React from 'react'

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

Dasselbe kann in Typescript mit der React.SFC Klasse erreicht werden:

import * as React from 'react';

class GreeterProps {
   name: string
}

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

Beachten Sie, dass der Name React.SFC ein Alias ​​für React.SFC ist. React.StatelessComponent können verwendet werden.

Installation und Einrichtung

Um Typescript mit reagieren in einem Knotenprojekt verwenden zu können, müssen Sie zunächst ein Projektverzeichnis mit npm initialisieren. Um das Verzeichnis mit npm init zu initialisieren

Einbau über NPM oder Garn

Sie können React mit npm installieren, indem Sie folgende Schritte ausführen :

npm install --save react react-dom

Facebook hat seinen eigenen Paketmanager namens Yarn veröffentlicht , mit dem auch React installiert werden kann. Nach der Installation von Yarn müssen Sie nur diesen Befehl ausführen:

yarn add react react-dom

Sie können React dann in Ihrem Projekt genauso verwenden, als wenn Sie React über npm installiert hätten.

Installation von Definitionstypen in Typescript 2.0+

Um Ihren Code mithilfe von Typoskript zu kompilieren, fügen Sie Typendefinitionsdateien mit npm oder gar ein.

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

oder unter Verwendung von Garn

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

Installieren von Definitionstypen in älteren Versionen von Typescript

Sie müssen ein separates Paket mit dem Namen tsd verwenden

tsd install react react-dom --save

Hinzufügen oder Ändern der Typescript-Konfiguration

Um JSX , eine Sprache, die Javascript mit HTML / XML mischt, zu verwenden, müssen Sie die TypScript-Compiler-Konfiguration ändern. In der tsconfig.json Konfigurationsdatei des Projekts (normalerweise tsconfig.json ) müssen Sie die JSX-Option hinzufügen:

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

Diese Compileroption weist den Typescript-Compiler grundsätzlich an, die JSX-Tags im Code in Javascript-Funktionsaufrufe zu übersetzen.

Um zu vermeiden, dass der TypScript-Compiler JSX in einfache JavaScript-Funktionsaufrufe konvertiert, verwenden Sie

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

Zustandslose und eigenschaftsfreie Komponenten

Die einfachste Reaktionskomponente ohne Zustand und ohne Eigenschaften kann wie folgt geschrieben werden:

import * as React from 'react';

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

Diese Komponente kann jedoch nicht auf this.props zugreifen, da this.props nicht this.props kann, ob es sich um eine reagierende Komponente handelt. Um auf die Requisiten zuzugreifen, verwenden Sie:

import * as React from 'react';

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

Selbst wenn die Komponente keine explizit definierten Eigenschaften hat, kann sie jetzt auf props.children zugreifen, da alle Komponenten von Natur aus props.children sind.

Eine andere ähnliche gute Verwendung von zustandslosen und eigenschaftslosen Komponenten ist die einfache Seitenvorlage. Im Folgenden ist eine examplinary einfache Page Komponente, vorausgesetzt , es gibt hypothetische Container , NavTop und NavBottom Komponenten bereits im Projekt:

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 diesem Beispiel kann die Page Komponente später von jeder anderen tatsächlichen Seite als Basisvorlage verwendet werden.