使用 Typescript 在 React 函数组件中定义 Props
介绍
本指南将为您提供正确定义进入组件的 props 所需的语法，比较和对比将 props 定义为类或接口类型，并在您需要为可选 props 提供默认值时为您提供有用的提示。
我应该使用哪个关键词？
Typescript 带来了一些很棒的功能，可以以强大的方式扩展 JavaScript，包括以多种方式定义对象结构的能力。在寻找定义对象的最佳方法时，您无疑会遇到各种选项，其中类和接口是最常见的。如果您查看Typescript 的文档，您可以自己研究这些常见对象定义器之间的区别。本指南将为您提供简短版本。
当你想要定义的不仅仅是对象的结构时，可以使用类：
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter('world')
接口用于当你想强制执行结构化契约（即你想要传入的内容或想要返回的内容）时：
interface FullName{
firstName: string;
lastName: number;
}
const fullNameObj:FullName = {
firstName: "Jon",
lastName: "Snow"
}
那么你应该使用哪个来定义 prop？如果你说的是interface，那你就对了。
定义 Props
无论您是刚开始使用 Typescript 和 React，还是经验丰富的老手，希望通过引入钩子向代码库添加更多功能组件，了解定义 props 的不同方法都很重要。
简单而有效
定义 props 的方法之一就是简单地在函数的参数列表中定义它们，如上所示。
例如：
interface FullName {
firstName: string;
lastName: string;
}
function FunctionalComponent(props:FullName){
// props.firstName
// props.lastName
}
更灵活的方式
在大多数情况下，简单的方法就可以了。但是，如果你想定义默认 props（如果未传入）该怎么办？或者你只是想在组件中使用更简洁的语法？
对于这些情况，你可以利用 JavaScript 语法特性，即解构。这可以让你更灵活地定义你的 props。
// Using the same FullName interface from the last example
function FunctionalComponent({firstName, lastName}:FullName){
// firstName
// lastName
}
如果你想添加中间名怎么办？不是每个人都有中间名，所以你想让它可选。解构可以为这个问题提供一个干净的解决方案。
interface OptionalMiddleName {
firstName: string;
middleName?: string;
lastName: string;
}
function Component({firstName, middleName = "N/A", lastName}:OptionalMiddleName){
// If middleName wasn't passed in, value will be "N/A"
}
现在，每当您需要引用middleName时，如果它不存在，您将获得一个默认值“N/A”。
使用非解构语法实现相同的功能大致如下：
// using the same OptionalMiddleName interface from above
function Component(props:OptionalMiddleName){
if(!props.middleName){
props.middleName = "N/A"
}
}
不算太糟糕，但也不算太好。
不过，一如既往，漂亮的代码有时存在于旁观者的眼中。
使用 React.FC
定义 props 的另一种方法是导入并使用 React 的函数组件类型（简称FC） 。
使用React.FC更加冗长，但确实有一些额外的好处：。
- 返回类型明确
- 提供静态属性的类型检查和自动完成（即displayName，defaultProps）
- 提供children的隐式定义：
const ReactFCComponent: React.FC<{title:string}> = ({children, title}) => {
return <div title={title}>{children}</div>
}
您可以在此处阅读有关React.FC 的更多优势
你应该使用哪一个？React 社区通常不赞成使用React.FC，因为它太冗长，而且它的好处不值得你为之付出努力和阅读难度。
结论
希望本指南能为您提供良好的参考。一般来说，我喜欢解构进入组件的所有 props，因为它提供了简洁有效的语法。祝您在 Typescript React 之旅中好运！
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~