Ich versuche, die Props einer React-Komponente statisch einzugeben. Nach der Einbeziehung der Definitionen für ReagierenIch habe eine typisierte Variation von definiert React.createClass genannt component.
interface Component<P> {
(props: P, ...children: any[]): React.ReactComponent<P, any>
}
function component<P, S>(spec: React.ReactComponentSpec<P, S>): Component<P> {
return React.createClass(spec);
}
Wenn ich ein definiere Label Komponente mit einer Anmerkung, die besagt, dass es a text Fadenstütze,
var Label: Component<{text: string}> = component({
render: function() {
return React.DOM.div(null, this.props.text);
}
});
var App = React.createClass({
render: function() {
return React.DOM.div(null, Label({text: "Hello"}));
}
});
Der Compiler überprüft dies Label heißt mit a text Eigenschaft und dass es eine Zeichenfolge ist.
Der nächste Schritt ist die Überprüfung des Compilers this.props.text Verwendet Innerhalb das Label Methoden. Wie es geht?
Ich verwende das Reagieren-Typoskript bridge, die eine Basisklasse definiert, die in TypeScript verwendet werden kann:
class HelloMessage extends ReactTypescript.ReactComponentBase<{ name: string; }, {}> {
render() {
return React.DOM.div(null, 'Hello ' + this.props.name);
}
}
Da die Basisklasse generisch ist, this.props ist richtig getippt als { name: string; } im obigen Beispiel.
Im Wesentlichen möchten Sie Interfaces für Ihre Props und State erstellen und sie als den Typ der neuen Klasse weitergeben, die erweitert wird React.Component. Wenn Sie die React-Typdefinition verwenden, müssen Sie keine Typen für andere als die neuen Klassen hinzufügen, die Sie erstellen. Sie können dies im folgenden Muster sehen.
(Ich habe einen Blogeintrag darüber geschrieben Hier)
/// <reference path='../typings/react/react.d.ts' />
import React = require('react');
interface P {
name?: string;
}
interface S {
complete?: boolean;
}
class Goal extends React.Component<P, S> {
state: S = {
complete: false
}
private _toggleCompletion = () => {
this.setState({complete: !this.state.complete});
}
render() {
var status = 'Status: ' + (this.state.complete ? 'complete' : 'incomplete');
return React.DOM.div({
children: [
React.DOM.div({}, this.props.name + ' - ' + status),
React.DOM.button({
onClick: this._toggleCompletion
}, 'Toggle completion')
]
});
}
}
React.render(React.createElement(Goal, {name: 'Learn React and TypeScript'}), document.getElementById('react'));