React
Installazione di React, Webpack e Typescript
Ricerca…
Osservazioni
Per ottenere l'evidenziazione della sintassi nell'editor (ad es. VS Code) è necessario scaricare le informazioni di digitazione per i moduli che si utilizzano nel progetto.
Supponi ad esempio di utilizzare React e ReactDOM nel tuo progetto e desideri ottenere l'evidenziazione e Intellisense per loro. Dovrai aggiungere i tipi al tuo progetto usando questo comando:
npm install --save @types/react @types/react-dom
Ora il tuo editor dovrebbe rilevare automaticamente queste informazioni di digitazione e fornirti il completamento automatico e Intellisense per questi moduli.
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']
}
};
I componenti principali sono (oltre alla entry standard, output e altre proprietà del pacchetto Web):
Il caricatore
Per questo è necessario creare una regola per .tsx le estensioni di file .ts e .tsx , specificare ts-loader come loader.
Risolvi le estensioni TS
È inoltre necessario aggiungere le estensioni .ts e .tsx nell'array di resolve , altrimenti il webpack non le vedrà.
tsconfig.json
Questo è un tsconfig minimo per farti funzionare.
{
"include": [
"src/*"
],
"compilerOptions": {
"target": "es5",
"jsx": "react",
"allowSyntheticDefaultImports": true
}
}
Passiamo attraverso le proprietà una ad una:
include
Questa è una matrice di codice sorgente. Qui abbiamo solo una voce, src/* , che specifica che tutto nella directory src deve essere incluso nella compilazione.
compilerOptions.target
Specifica che vogliamo compilare il target ES5
compilerOptions.jsx
Impostando su true , TypeScript compila automaticamente la sintassi tsx da <div /> a React.createElement("div") .
compilerOptions.allowSyntheticDefaultImports
Proprietà maneggevole che ti consentirà di importare i moduli nodo come se fossero moduli ES6, quindi invece di farlo
import * as React from 'react'
const { Component } = React
puoi solo farlo
import React, { Component } from 'react'
senza errori che ti dicono che React non ha un'esportazione predefinita.
Il mio primo componente
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);
Quando si utilizza TypeScript con React, dopo aver scaricato le definizioni di tipo React DefinitelyTyped ( npm install --save @types/react ), ogni componente richiederà l'aggiunta di annotazioni di tipo.
Lo fai in questo modo:
class App extends Component<AppProps, AppState> { }
dove AppProps e AppState sono interfacce (o digitano alias) per i puntelli e lo stato dei componenti rispettivamente.