React => Installation React, Webpack & Typescript

Remarques

Pour obtenir une mise en évidence de la syntaxe dans votre éditeur (par exemple, le code VS), vous devez télécharger les informations de frappe pour les modules que vous utilisez dans votre projet.

Dites par exemple que vous utilisez React et ReactDOM dans votre projet, et que vous souhaitez mettre en évidence et Intellisense pour eux. Vous devrez ajouter les types à votre projet en utilisant cette commande:

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

Votre éditeur devrait maintenant saisir automatiquement ces informations de saisie et vous fournir une saisie semi-automatique et Intellisense pour ces modules.

webpack.config.js

module.exports = {
    entry: './src/index',
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    },
    resolve: {
        extensions: ['.ts', '.tsx']
    }
};

Les composants principaux sont (en plus de l’ entry standard, de la output et des autres propriétés du Webpack):

Le chargeur

Pour cela, vous devez créer une règle qui teste les extensions de fichier .ts et .tsx , spécifiez ts-loader comme chargeur.

Résoudre les extensions TS

Vous devez également ajouter les extensions .ts et .tsx dans le tableau de resolve ou les webpack ne les verront pas.

tsconfig.json

Ceci est un tsconfig minimal pour vous permettre de démarrer.

{
    "include": [
        "src/*"
    ],
    "compilerOptions": {
        "target": "es5",
        "jsx": "react",
        "allowSyntheticDefaultImports": true
    }
}

Passons en revue les propriétés une par une:

`include`

Ceci est un tableau de code source. Ici, nous n'avons qu'une seule entrée, src/* , qui spécifie que tout ce qui se trouve dans le répertoire src doit être inclus dans la compilation.

`compilerOptions.target`

Spécifie que nous voulons compiler vers la cible ES5

`compilerOptions.jsx`

Si vous définissez ceci sur true , TypeScript compilera automatiquement votre syntaxe tsx de <div /> à React.createElement("div") .

`compilerOptions.allowSyntheticDefaultImports`

Propriété pratique qui vous permettra d'importer des modules de nœuds comme s'ils étaient des modules ES6, donc au lieu de faire

import * as React from 'react'
const { Component } = React

tu peux juste faire

import React, { Component } from 'react'

sans aucune erreur vous indiquant que React n'a aucune exportation par défaut.

Mon premier composant

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


interface AppProps {
    name: string;
}
interface AppState {
    words: string[];
}

class App extends Component<AppProps, AppState> {
    constructor() {
        super();
        this.state = {
            words: ['foo', 'bar']
        };
    }

    render() {
        const { name } = this.props;
        return (<h1>Hello {name}!</h1>);
    }
}

const root = document.getElementById('root');
ReactDOM.render(<App name="Foo Bar" />, root);

Lorsque vous utilisez TypeScript with React, une fois que vous avez téléchargé les définitions de type React DefinitelyTyped ( npm install --save @types/react ), vous devez ajouter des annotations de type à chaque composant.

Vous faites cela comme ça:

class App extends Component<AppProps, AppState> { }

où AppProps et AppState sont des interfaces (ou des alias de type) pour les accessoires et l'état de vos composants, respectivement.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

React
Installation React, Webpack & Typescript

Recherche…