React
Använda ReactJS med Typescript

ReactJS-komponent skriven i Typescript

Egentligen kan du använda ReactJSs komponenter i Typescript som i facebooks exempel. Byt bara ut "jsx" -filtillägget till "tsx":

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

Men för att kunna utnyttja Typeskript huvudfunktion (statisk typkontroll) till fullo bör man göra par saker:

1) konvertera React.createClass-exempel till ES6 Class:

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

2) nästa lägg till Props och State gränssnitt:

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

Nu visar Typscript ett fel om programmeraren glömmer att skicka rekvisita. Eller om de har lagt till rekvisita som inte är definierade i gränssnittet.

Stateless React Components in Typescript

Reagera komponenter som är rena funktioner i deras rekvisita och inte kräver något internt tillstånd kan skrivas som JavaScript-funktioner istället för att använda standardklasssyntaxen, som:

import React from 'react'

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

Samma kan uppnås i Typescript med klassen React.SFC :

import * as React from 'react';

class GreeterProps {
   name: string
}

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

Observera att namnet React.SFC är ett alias för React.StatelessComponent Så kan antingen användas.

Installation och installation

För att använda typskript med reagera i ett nodprojekt måste du först ha en projektkatalog initialiserad med npm. För att initialisera katalogen med npm init

Installera via npm eller garn

Du kan installera React med npm genom att göra följande:

npm install --save react react-dom

Facebook släppte sin egen paketchef som heter Yarn , som också kan användas för att installera React. När du har installerat Garn behöver du bara köra det här kommandot:

yarn add react react-dom

Du kan sedan använda React i ditt projekt på exakt samma sätt som om du hade installerat React via npm.

Installera definitioner av reaktionstyp i Typescript 2.0+

Lägg till / installera typdefinitionsfiler med npm eller garn för att sammanställa din kod med hjälp av typscript.

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

eller med hjälp av garn

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

Installera definitioner av reaktionstyp i äldre versioner av Typescript

Du måste använda ett separat paket som heter tsd

tsd install react react-dom --save

Lägga till eller ändra Typescript-konfigurationen

För att använda JSX , ett språk som blandar javascript med html / xml, måste du ändra typskriptets kompilatorkonfiguration. I projektets typskriptkonfigurationsfil (vanligtvis benämnd tsconfig.json ) måste du lägga till JSX-alternativet som:

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

Det kompilatoralternativet berättar i princip typskriptkompileraren att översätta JSX-taggarna i kod till javascriptfunktionssamtal.

Använd för att undvika typskriptkompilerare som konverterar JSX till vanliga javascriptfunktionssamtal

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

Statslösa och egendomslösa komponenter

Den enklaste reaktionskomponenten utan tillstånd och inga egenskaper kan skrivas som:

import * as React from 'react';

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

Den komponenten har emellertid inte åtkomst till this.props eftersom typskriptet inte kan se om det är en reaktionskomponent. För att komma åt dess rekvisita använder du:

import * as React from 'react';

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

Även om komponenten inte har uttryckligen definierade egenskaper kan den nu komma åt props.children eftersom alla komponenter i sig har barn.

En annan liknande bra användning av statslösa och egendomslösa komponenter är i enkel sidmallning. Följande är en examplinary enkel Page komponent, förutsatt att det är hypotetiska Container , NavTop och NavBottom komponenter som redan i projektet:

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>

I det här exemplet kan Page senare användas av alla andra faktiska sidor som basmall.