React => React, Webpack & Typescript installation

Anmärkningar

För att få syntaxmarkering i din redigerare (t.ex. VS-kod) måste du ladda ner typinformation för de moduler du använder i ditt projekt.

Säg till exempel att du använder React och ReactDOM i ditt projekt, och du vill få markering och Intellisense för dem. Du måste lägga till typerna till ditt projekt med det här kommandot:

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

Din redaktör bör nu automatiskt hämta in den här skrivinformationen och förse dig med autocomplete och Intellisense för dessa moduler.

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']
    }
};

De huvudsakliga komponenterna är (utöver standard entry , output och andra Webpack egenskaper):

Lastaren

För detta måste du skapa en regel som tester för .ts och .tsx filändelser anger ts-loader som lastaren.

Lös TS-tillägg

Du måste också lägga till .ts och .tsx förlängningar i resolve array eller Webpack kommer inte att se dem.

tsconfig.json

Detta är en minimal tsconfig för att komma igång.

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

Låt oss gå igenom egenskaperna en efter en:

`include`

Detta är en matris med källkod. Här har vi bara en post, src/* , som anger att allt i src katalogen ska inkluderas i sammanställningen.

`compilerOptions.target`

Anger att vi vill sammanställa till ES5-mål

`compilerOptions.jsx`

Ställa detta true blir skrivmaskin sammanställa automatiskt TSX syntax från <div /> till React.createElement("div") .

`compilerOptions.allowSyntheticDefaultImports`

Praktisk egendom som gör att du kan importera nodmoduler som om de är ES6-moduler, så istället för att göra

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

du kan bara göra

import React, { Component } from 'react'

utan några fel som säger att React inte har någon standardexport.

Min första komponent

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

När du använder TypeScript med React, när du har laddat ner definitionerna av React DefinitelyTyped-typ ( npm install --save @types/react ), kommer varje komponent att kräva att du lägger till typanteckningar.

Du gör så här:

class App extends Component<AppProps, AppState> { }

där AppProps och AppState är gränssnitt (eller typ alias) för respektive komponenters rekvisita och tillstånd.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

React
React, Webpack & Typescript installation

Sök…