在 TypeScript 中为 React SFC 函数声明分配类型答案

【问题标题】：Assigning type to a React SFC function declaration in TypeScript在 TypeScript 中为 React SFC 函数声明分配类型
【发布时间】：2018-07-09 17:41:18
【问题描述】：

因此，您可以将 React.FC<PropsType> 类型分配给变量，以便将其理解为 React 无状态功能组件，如下所示：

//Interface declaration
interface ButtonProps {
  color: string,
  text: string,
  disabled?: boolean
}

// Function Component
let Button: React.FC<ButtonProps> = function(props){
  return <div> ... </div> ;
}

但是，我无法理解如何将相同类型分配给作为函数声明构建的 FC：

//Props interface already declared
function Button(props){
  render <div> ... </div>;
}

我可以将类型分配给props 参数，它会部分帮助，因为它会显示我期望从调用者那里得到什么（减去children 属性），但我认为这不会有帮助来自调用上下文的任何智能感知。我也不知道要设置什么作为第二个示例的返回类型。

谢谢！

【问题讨论】：

你试过function Button(props: ButtonProps){return <div> ... </div>;}我在呼叫现场得到了完整的智能感知，不知道你还想要什么:)
嗯，你知道。我一定不是很细心。不过，出于好奇或代码样式的目的，有没有办法将类型分配给函数声明？
你可以尝试写const Button: ComponentType<ButtonProps> = (props) => <div>...</div>;

标签： javascript reactjs typescript

【解决方案1】：

不确定您现在是否找到了答案，但是将静态类型添加到 命名函数 几乎与您在初始示例中所做的相同

根据您的示例：

//Props interface already declared
function Button(props): React.ReactElement<Props> {
  render <div> ... </div>;
}

// Or you could store the function in a named variable
const ButtonComponent: React.FunctionComponent<Props> = function Button(props): React.ReactElement<Props> {
  render <div> ... </div>;
}

// Using shorthand type
const ButtonComponent: React.FC<Props> = function Button(props) {
  render <div> ... </div>;
}

您可以在 article 中阅读更多关于添加类型以响应组件的信息

注意：最佳做法是使用 React.FC 而不是 React.SFC，因为它现在在最新版本的 React 中已被弃用

【讨论】：

感谢您对React.FC 的更正，我已经在示例中更正了！
关于您的答案，我在CodeSandbox 上进行了尝试以确保，但您给我的示例不是将 Button 组件输入为 React 元素，而是输入 Button 的返回对象作为一个 React 元素。请注意，在示例中，编辑器将函数的返回语句标记为错误。
你是对的，对于误导性类型，我已经更新了我的答案，并使用命名函数的正确返回类型。关于将 React.FC 类型应用于 命名函数 的原始问题，我认为在这种情况下没有必要，因为您已经通过使用明确说明了它的类型函数关键字