React
Utiliser ReactJS avec Typescript

Composant ReactJS écrit en Typescript

En fait, vous pouvez utiliser les composants de ReactJS dans Typescript comme dans l'exemple de Facebook. Remplacez simplement l'extension du fichier 'jsx' par 'tsx':

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

Mais pour utiliser pleinement la fonctionnalité principale de Typescript (vérification de type statique), il faut faire deux choses:

1) convertir l'exemple React.createClass en classe ES6:

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

2) ajouter ensuite les interfaces Props et State:

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

Maintenant, Typescript affichera une erreur si le programmeur oublie de transmettre des accessoires. Ou s'ils ont ajouté des accessoires qui ne sont pas définis dans l'interface.

Composants réactifs sans état dans Typescript

Les composants en réaction qui sont des fonctions pures de leurs accessoires et qui ne nécessitent aucun état interne peuvent être écrits en tant que fonctions JavaScript au lieu d'utiliser la syntaxe de classe standard, comme suit:

import React from 'react'

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

La même chose peut être obtenue dans Typescript en utilisant la classe React.SFC :

import * as React from 'react';

class GreeterProps {
   name: string
}

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

Notez que le nom React.SFC est un alias pour React.StatelessComponent So, soit peut être utilisé.

Installation et configuration

Pour utiliser typecript avec react dans un projet de noeud, vous devez d'abord avoir un répertoire de projet initialisé avec npm. Pour initialiser le répertoire avec npm init

Installation via npm ou yarn

Vous pouvez installer React en utilisant npm en procédant comme suit:

npm install --save react react-dom

Facebook a publié son propre gestionnaire de paquets nommé Yarn , qui peut également être utilisé pour installer React. Après avoir installé Yarn, il vous suffit d'exécuter cette commande:

yarn add react react-dom

Vous pouvez ensuite utiliser React dans votre projet exactement comme si vous aviez installé React via npm.

Installer les définitions de type de réaction dans Typescript 2.0+

Pour compiler votre code en utilisant dactylographié, ajoutez / installez des fichiers de définition de type en utilisant npm ou yarn.

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

ou, en utilisant du fil

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

Installation des définitions de type de réaction dans les anciennes versions de Typescript

Vous devez utiliser un paquet séparé appelé tsd

tsd install react react-dom --save

Ajouter ou modifier la configuration de TypeScript

Pour utiliser JSX , un langage mélangeant le javascript avec html / xml, vous devez modifier la configuration du compilateur de typecript. Dans le fichier de configuration dactylographié du projet (généralement appelé tsconfig.json ), vous devrez ajouter l'option JSX en tant que:

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

Cette option du compilateur demande essentiellement au compilateur typecript de traduire les balises JSX dans le code en appels de fonction javascript.

Pour éviter que le compilateur de typecript convertisse JSX en appels de fonctions javascript, utilisez

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

Composants sans état et sans propriété

Le composant de réaction le plus simple sans état et sans propriétés peut être écrit comme suit:

import * as React from 'react';

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

Ce composant, cependant, ne peut pas accéder à this.props car this.props ne peut pas dire s'il s'agit d'un composant de réaction. Pour accéder à ses accessoires, utilisez:

import * as React from 'react';

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

Même si le composant ne possède pas de propriétés explicitement définies, il peut désormais accéder à props.children car tous les composants ont des enfants par nature.

Un autre bon usage similaire des composants sans état et sans propriété réside dans la modélisation simple des pages. Ce qui suit est un composant Page simple, en supposant qu'il existe des composants Container , NavTop et NavBottom hypothétiques dans le projet:

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>

Dans cet exemple, le composant Page peut ensuite être utilisé par toute autre page réelle en tant que modèle de base.