TypeScript には次のような React コンポーネントがあります。
interface FooDetails {
name: string
latitude: number,
longitude: number,
}
interface FooSelectorProps {
onDetailsChanged: Function,
}
class FooSelector extends React.Component<FooSelectorProps, any> {
constructor(props: FooSelectorProps, context) {
super(props, context);
}
onTravelTypeChange(event) {
this.setState({ travelType: event.target.value });
}
onDetailsChange(fooData) {
this.props.onDetailsChanged({
name: fooData.name,
latitude: fooData.latitude,
longitude: fooData.longitude,
});
}
render() {
return <div>...Foo selection UI...</div>
}
}
onDetailsChanged
propTypes( FooSelectorProps
) 内の関数がオブジェクトを受け取るように指定できるようにしたいのですFooDetails
が、その方法がわかりません。
ベストアンサー1
Function
type of にグローバル型を使用する代わりにonDetailsChanged
、型を記述することができます。次のようFooSelectorProps
に変更します。
interface FooSelectorProps {
onDetailsChanged: ((details: FooDetails) => void)
}
すると、コールバックの型チェックが行われますonDetailsChanged
。