実装
typescript
1type SchoolGrades = English | Mathmatic | Art | Physical 2 3type Status = type TableStateType<T extends SchoolGrades> { 4 point: 'A' | 'B' | 'C' 5 average: number 6 something: T 7}
react
1type Props = { 2 point: 'A' | 'B' | 'C' 3 average: number 4 fn: (status: Status<English | Mathmatic>) => void 5} 6 7export const Report = ({point, average, fn}: Props) => { 8 const status = {} // something object 9 fn(status) 10 return ( 11 <> 12 <div>{ point }<div> 13 <div>{ average }<div> 14 </> 15 ) 16}
上記のコンポーネントを、以下のように使用するとtype errorになります。
react
1type Props = { 2 .... 3 setEnglishStatus: (status: Status<English>) => void 4} 5 6export const ReportCard = ({..., fn}: Props) => { 7 // something process 8 return ( 9 <> 10 {/* ...something component */} 11 <Report 12 point={'A'} 13 average={80} 14 fn={setEnglishStatus} // type error 15 /> 16 </> 17 ) 18}
エラー
Type 'Status<English | Mathmatic | Art | Physical>' is not assignable to type 'Status<English>'.
やりたいこと
Report
コンポーネントのfn
には、用途によって引数の型が違う関数を使いたいので、union typeを使用しているのですが、上記のようなエラーが出てしまいます。
このような状況の場合、どこを修正するべきなのか教えていただきたいです。
よろしくお願いします。
あなたの回答
tips
プレビュー