In meiner React- und Typoskript-App verwende ich : onChange={(e) => data.motto = (e.target as any).value}
.
Wie definiere ich die Typisierungen für die Klasse richtig, damit ich mich nicht mit dem Typensystem herumhacken muss any
?
export interface InputProps extends React.HTMLProps<Input> {
...
}
export class Input extends React.Component<InputProps, {}> {
}
Wenn ich target: { value: string };
sage, bekomme ich:
ERROR in [default] /react-onsenui.d.ts:87:18
Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'.
Types of property 'target' are incompatible.
Type '{ value: string; }' is not assignable to type 'string'.
reactjs
typescript
types
typescript-typings
wilde Augen
quelle
quelle
currentTarget
. In diesem Fall ja, es funktioniert, aber die Frage war übertarget
target
wird in den meisten Fällen eine falsche Verwendung verwendet. Darüber hinaus muss das Ziel uns nichtT
zwingen, richtig zu schreibenReact.ChangeEvent<HTMLInputElement>
eher auf ein FormEvent übertragen.Die korrekte Verwendung in TypeScript ist
Folgen Sie der gesamten Klasse, es ist besser zu verstehen:
quelle
lib: ["dom"]
zucompilerOptions
intsconfig.json
as HTMLInputElement
funktioniert bei mirquelle
Das, was
target
Sie hinzufügen wollten,InputProps
ist nicht das gleiche, dastarget
Sie wolltenReact.FormEvent
Die Lösung, die ich finden konnte, bestand darin, die ereignisbezogenen Typen zu erweitern, um Ihren Zieltyp hinzuzufügen:
Sobald Sie diese Klassen haben, können Sie Ihre Eingabekomponente als verwenden
ohne Kompilierungsfehler. Tatsächlich können Sie auch die ersten beiden oben genannten Schnittstellen für Ihre anderen Komponenten verwenden.
quelle
Zum Glück finde ich eine Lösung. du kannst
und dann schreibe Code wie:
e:ChangeEvent<HTMLInputElement>
quelle
Hier ist ein Weg mit der ES6-Objektzerstörung, getestet mit TS 3.3.
Dieses Beispiel ist für eine Texteingabe.
quelle
Dies ist, wenn Sie mit einem
FileList
Objekt arbeiten:quelle
Und stellen Sie sicher, dass Sie
"lib": ["dom"]
in Ihrem habentsconfig
.quelle
Bei Verwendung der untergeordneten Komponente überprüfen wir den Typ wie folgt.
Übergeordnete Komponente:
Untergeordnete Komponente:
quelle
Eine Alternative, die noch nicht erwähnt wurde, besteht darin, die onChange-Funktion anstelle der empfangenen Requisiten einzugeben. Verwenden von React.ChangeEventHandler:
quelle
Danke @haind
Ja
HTMLInputElement
hat für das Eingabefeld funktioniertDiese
HTMLInputElement
Schnittstelle wirdHTMLElement
geerbt, von derEventTarget
auf Stammebene geerbt wird. Daher können wir mit demas
Operator behaupten, bestimmte Schnittstellen entsprechend dem Kontext zu verwenden, wie in diesem Fall, den wirHTMLInputElement
für Eingabefelder verwenden, andere Schnittstellen usw. seinHTMLButtonElement
könnenHTMLImageElement
.Weitere Informationen finden Sie hier
quelle