TypeScript 傳遞道具給孩子

Question

我是 TypeScript 的新手，我正在嘗試向children發送一些props ，通常我會這樣做，-也許這不是最好的方法。

應用程序.js

import React form 'react'
import Component from './component'

const App = () => {

  const myfunc1 = () => 'some function 1'
  const myfunc2 = () => 'some function 2'
  const myfunc3 = () => 'some function 3'
  const var1 = 'some variable 1'
  const var2 = 'some variable 2'

  return (
    <Component 
      myfunc1={myfunc1}
      myfunc2={myfunc2}
      myfunc3={myfunc3}
      var1={var1}
      var2={var2}
    />
  )

}

組件.js

import React from 'react'

const Component = ({
  myfunc1,
  myfunc2,
  myfunc3,
  var1,
  var2,
}) => (
   <>
    // Use the props on the component
   </>
)

export default Component

但是當使用 TypeScript 時，它要求對Component上的所有props進行類型聲明。

有沒有更好更簡單的方法來傳遞props ，所以我不必在所有props上聲明類型？

Answer 1

import { FunctionComponent } from 'react';


type Props = {
  // types...
}

const Component: FunctionComponent<Props> = ({
  myfunc1,
  myfunc2,
  myfunc3,
  var1,
  var2,
}) => (
<>
</>
)