最新の@types/react
(v15.0.6
)は、setState
のタイプスクリプト2.1で追加された機能、つまりPick<S, K>
を使用します。更新タイピングが "知らなかった"前にsetState
がそれを置き換えるのではなくthis.state
にマージしているので、これは良いことです。ピック<S, K>ダイナミック/計算キー付きタイプ
また、Pick
を使用すると、setState
は許可入力の点で非常に厳しいものになります。 。React.Component
の第二の汎用コンポーネント定義(で定義されていないstate
にプロパティを追加することはもはや
可能ではありません。しかし、動的更新ハンドラを定義することも困難です。たとえば:。
import * as React from 'react';
interface Person {
name: string;
age: number|undefined;
}
export default class PersonComponent extends React.Component<void, Person> {
constructor(props:any) {
super(props);
this.state = {
name: '',
age: undefined
};
this.handleUpdate = this.handleUpdate.bind(this);
}
handleUpdate (e:React.SyntheticEvent<HTMLInputElement>) {
const key = e.currentTarget.name as keyof Person;
const value = e.currentTarget.value;
this.setState({ [key]: value });
}
render() {
return (
<form>
<input type="text" name="name" value={this.state.name} onChange={this.handleUpdate} />
<input type="text" name="age" value={this.state.age} onChange={this.handleUpdate} />
</form>
);
}
}
setState
機能は、次のエラー
key
のタイプは
"name" | "age"
であっても
[ts] Argument of type '{ [x: string]: string; }' is not assignable
to parameter of type 'Pick<Person, "name" | "age">'.
Property 'name' is missing in type '{ [x: string]: string; }'.
をスローします。
別のupdateName
とupdateAge
機能を持っている以外は、解決策が見つかりません。誰も動的なキー値でPick
を使用する方法を知っていますか?