React
Utilizzo di ReactJS con Typescript

Componente ReactJS scritto in Typescript

In realtà puoi usare i componenti di ReactJS in Typescript come nell'esempio di facebook. Basta sostituire l'estensione del file 'jsx' a 'tsx':

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

Ma per sfruttare appieno la funzione principale di Typescript (controllo del tipo statico), è necessario fare alcune cose:

1) converti l'esempio React.createClass in classe ES6:

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

2) aggiungere i puntelli e le interfacce di stato:

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

Ora Typescript mostrerà un errore se il programmatore dimenticherà di passare oggetti di scena. O se hanno aggiunto oggetti di scena che non sono definiti nell'interfaccia.

Stateless React Components in Typescript

Reagire a componenti che sono pure funzioni dei loro oggetti di scena e non richiedono alcuno stato interno può essere scritto come funzione JavaScript invece di usare la sintassi della classe standard, come:

import React from 'react'

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

Lo stesso può essere ottenuto in Typescript usando la classe React.SFC :

import * as React from 'react';

class GreeterProps {
   name: string
}

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

Si noti che, il nome React.SFC è un alias per React.StatelessComponent Quindi, può essere utilizzato.

Installazione e configurazione

Per usare dattiloscritto con reagire in un progetto di nodo, è necessario prima avere una directory di progetto inizializzata con npm. Per inizializzare la directory con npm init

Installazione via npm o filato

È possibile installare React utilizzando npm attenendosi alla seguente procedura:

npm install --save react react-dom

Facebook ha rilasciato il proprio gestore di pacchetti denominato Yarn , che può essere utilizzato anche per installare React. Dopo aver installato Yarn è sufficiente eseguire questo comando:

yarn add react react-dom

Puoi quindi utilizzare React nel tuo progetto esattamente nello stesso modo in cui avevi installato React via npm.

Installare le definizioni del tipo di reazione in Typescript 2.0+

Per compilare il codice usando dattiloscritto, aggiungi / installa i file di definizione del tipo usando npm o filato.

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

oppure, usando il filo

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

Installare le definizioni del tipo di reazione nelle versioni precedenti di Typescript

Devi usare un pacchetto separato chiamato tsd

tsd install react react-dom --save

Aggiunta o modifica della configurazione di Typescript

Per usare JSX , una lingua che mescola javascript con html / xml, devi cambiare la configurazione del compilatore dattiloscritto. Nel file di configurazione del dattiloscritto del progetto (solitamente chiamato tsconfig.json ), sarà necessario aggiungere l'opzione JSX come:

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

Quella opzione del compilatore dice fondamentalmente al compilatore dattiloscritto di tradurre i tag JSX nel codice in chiamate di funzione javascript.

Per evitare che il compilatore di dattiloscritto converta JSX in semplici chiamate di funzione javascript, utilizzare

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

Componenti senza stato e senza proprietà

Il componente di reazione più semplice senza stato e senza proprietà può essere scritto come:

import * as React from 'react';

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

Quel componente, tuttavia, non può accedere a this.props poiché il typescript non può stabilire se si tratta di un componente react. Per accedere ai suoi oggetti di scena, utilizzare:

import * as React from 'react';

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

Anche se il componente non ha proprietà definite in modo esplicito, ora può accedere a props.children poiché tutti i componenti hanno intrinsecamente figli.

Un altro uso analogo di componenti senza stato e senza proprietà si trova nel semplice modello di pagina. Di seguito è riportato un componente di Page semplice, ad esempio, presupponendo che ci siano componenti ipotetici Container , NavTop e NavBottom già presenti nel progetto:

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>

In questo esempio, il componente Page può essere successivamente utilizzato da qualsiasi altra pagina effettiva come modello di base.