Typescript Stateless React 组件作为命名函数

Question

假设我有一个名为 Link 的 React 组件：

function Link(props) {
  return <a href={props.url}>{props.children}</a>
}

如何键入这个函数而不把它变成箭头函数？

这似乎不起作用：

interface ILink {
  url: string
}

function Link(props: React.FC<ILink>) { }

// Property 'url' does not exist on type 'FC<ILink>'.
// Property 'children' does not exist on type 'FC<ILink>'.

但作为箭头功能，它会立即起作用吗？

interface ILink {
  url: string
}

const Link: React.FC<ILink> = (props) => { }

// Compiles

Answer 1

你必须使用组合 React.PropsWithChildren 和 React.ReactElement 所以它变成：

function Link(props: PropsWithChildren<ILink>): ReactElement {}