React
Installation von React, Webpack & Typescript
Suche…
Bemerkungen
Um die Hervorhebung der Syntax in Ihrem Editor (z. B. VS-Code) zu erhalten, müssen Sie die Typinformationen für die Module herunterladen, die Sie in Ihrem Projekt verwenden.
Nehmen Sie beispielsweise an, Sie verwenden React und ReactDOM in Ihrem Projekt, und Sie möchten Hervorhebungen und Intellisense für sie erhalten. Sie müssen die Typen mit diesem Befehl zu Ihrem Projekt hinzufügen:
npm install --save @types/react @types/react-dom
Ihr Editor sollte nun diese Typinformationen automatisch aufgreifen und Ihnen Autovervollständigung und Intellisense für diese Module zur Verfügung stellen.
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']
}
};
Die Hauptkomponenten sind (zusätzlich zu der Standard - entry , output und anderen Eigenschaften webpack):
Der Lader
Dazu müssen Sie eine Regel erstellen, die die .tsx .ts und .tsx prüft. .tsx als Lader ts-loader an.
TS-Erweiterungen auflösen
Sie müssen auch die Erweiterungen .ts und .tsx zum resolve hinzufügen, da das Webpack sie nicht erkennt.
tsconfig.json
Dies ist eine minimale Tsconfig, um Sie zum Laufen zu bringen.
{
"include": [
"src/*"
],
"compilerOptions": {
"target": "es5",
"jsx": "react",
"allowSyntheticDefaultImports": true
}
}
Gehen wir die Eigenschaften einzeln durch:
include
Dies ist ein Array von Quellcode. Hier haben wir nur einen Eintrag, src/* , der angibt, dass alles im src Verzeichnis in die Kompilierung einbezogen werden soll.
compilerOptions.target
Gibt an, dass wir das Ziel auf ES5 kompilieren möchten
compilerOptions.jsx
Wenn Sie diese Option auf true , kompiliert TypeScript Ihre tsx-Syntax automatisch von <div /> in React.createElement("div") .
compilerOptions.allowSyntheticDefaultImports
Praktische Eigenschaft, die es Ihnen ermöglicht, Knotenmodule als ES6-Module zu importieren
import * as React from 'react'
const { Component } = React
Sie können es einfach tun
import React, { Component } from 'react'
ohne Fehlermeldungen, dass React keinen Standardexport hat.
Meine erste Komponente
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);
Wenn Sie TypeScript mit React verwenden, müssen Sie nach dem Herunterladen der Typdefinitionen von React DefinitelyTyped ( npm install --save @types/react ) npm install --save @types/react hinzufügen.
Das machst du gerne so:
class App extends Component<AppProps, AppState> { }
AppProps und AppState sind Schnittstellen (oder Typ-Aliasnamen) für die Requisiten und den Status Ihrer Komponenten.