javascript - วิธีการส่ง props ที่เป็นตัวเลือกแบบมีเงื่อนไขไปยังคอมโพเนนต์เมื่อเราใช้ React กับ Typescript?

เมื่อเราใช้ React กับ Typescript เราสามารถกำหนด props แบบไม่บังคับได้:

interface SomeProps {
  required: string
  optional?: number
}

const SomeComponent = ({ required, optional }: SomeProps): JSX.Element => { ...

เมื่อเราใช้มันในภายหลัง เราสามารถส่งผ่านหรือเว้นคุณสมบัติที่เป็นทางเลือกได้:

<SomeComponent required="abc" />
<SomeComponent required="def" optional={1} />

เมื่อเราต้องการทำสิ่งนั้นแบบไดนามิกด้วย React โดยไม่ใช้ Typescript เราสามารถส่งค่า undefined ให้กับคุณสมบัติเชิงเลือกได้:

<SomeComponent required="ghi" optional={optionalValue ? optionalValue : undefined } />

แต่กับ Typescript วิธีนั้นใช้ไม่ได้ ตัวแปลง Typescript จะแจ้งเตือนเราว่าชนิด number | undefined ไม่สามารถกำหนดค่าให้กับ number ได้ แน่นอนว่าเราสามารถห่อมันด้วยคำสั่ง if และใช้ SomeComponent ซ้ำได้ แต่ก็ไม่ใช่วิธีที่สวยงามที่สุด...

เราสามารถส่ง props แบบเลือกได้ไปยังคอมโพเนนต์แบบมีเงื่อนไขเมื่อเราใช้ React กับ Typescript ได้อย่างไร?

อัปเดต

ขออภัยครับ ผมผิด วิธีนี้แน่นอนว่าทำงานได้กับ Typescript ด้วย ผมไม่ได้สังเกตบางส่วนภายในโค้ดของผม (ซึ่งไม่ได้เป็นส่วนหนึ่งของคำถาม)

คำตอบ #1

import React from 'react'

interface SomeProps {
  required: string
  optional?: number
}

const SomeComponent = ({ required, optional }: SomeProps) => null

const x = <SomeComponent required="abc" />
const y = <SomeComponent required="def" optional={1} />

const Foo = (optional?: number) =>
  <SomeComponent required="ghi" optional={optional ? optional : undefined} />

มันใช้งานได้ใน Playground

คำตอบ #2

คุณสามารถเพิ่มหลายประเภทสำหรับ prop optional ได้ ในกรณีของคุณ ประเภทที่เป็นไปได้คือ number และ undefined ดังนั้นคุณสามารถกำหนด prop optional ได้ดังนี้:

interface SomeProps {
      required: string
      optional?: number | undefined
    }