Defining props in React function component with TypeScript
Learn how to define props for function components in React projects with Typescript. We cover several different methods, including destructuring and React.FC.
Aug 25, 2020 • 5 Minute Read
This guide will help you properly define the props entering your function components. You'll also learn when defining props as a class or interface type is best and how to provide default values to optional props.
class vs interface in TypeScript
TypeScript extends JavaScript features in powerful ways, including the ability to define the structure of an object.
In your search for the best way to define objects, you will undoubtedly encounter a variety of options, with class and interface being the most common.
If you take a look at TypeScript's documentation, you can research for yourself the difference between these common object definers. This guide will give you the short version.
Use class when you want to define more than just the structure of an object:
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter('world')
Use interface when you want to enforce structural contracts (i.e. what you want passed in or what you want returned back):
interface FullName{
firstName: string;
lastName: number;
}
const fullNameObj:FullName = {
firstName: "Jon",
lastName: "Snow"
}
So which should you use to define a prop? If you said interface, you would be correct.
Defining props: 3 methods
Whether you're coming in fresh to using TypeScript with React or are a grizzled veteran looking to add more functional components to your codebase by introducing hooks, it's important to know the different ways to define props.
Method 1: Define props in the parameter list
One of the ways you can define props is simply by defining them in the parameter list of a function as demonstrated above.
For example:
interface FullName {
firstName: string;
lastName: string;
}
function FunctionalComponent(props:FullName){
// props.firstName
// props.lastName
}
Method 2: Leverage destructuring
In most cases, the simple way is fine. But what if you want to define default function component props if they aren't passed in? Or you just want to have cleaner syntax within your component?
For those cases, you can leverage a JavaScript syntax feature known as destructuring. This allows more flexibility in how you can define your props.
// Using the same FullName interface from the last example
function FunctionalComponent({firstName, lastName}:FullName){
// firstName
// lastName
}
What if you wanted to add a middle name? Not everyone has a middle name, so you want to make it optional. Destructuring can provide a clean solution to that problem.
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"
}
Now whenever you need to reference middleName, you get a nice default "N/A" if it doesn't exist.
Accomplishing the same functionality using the non-destructured syntax would look something like this:
// using the same OptionalMiddleName interface from above
function Component(props:OptionalMiddleName){
if(!props.middleName){
props.middleName = "N/A"
}
}
Not awful, but not exactly nice either.
As always, though, beautiful code is in the eye of the beholder (sometimes).
Method 3: Use React.FC
Another way to define props is to import and use React's Functional Component type or FC for short.
Using React.FC is more verbose, but it does have some added benefits:
- Explicit with its return type
- Provides type checking and autocomplete for static properties (i.e. displayName, defaultProps)
- Provides an implicit definition of children
const ReactFCComponent: React.FC<{title:string}> = ({children, title}) => {
return <div title={title}>{children}</div>
}
Which should you use? It's up to you, but the React community generally frowns upon using React.FC due to its verbosity. They say its benefits aren't worth the trouble. You can read more about the benefits of React.FC here.
Conclusion: Recommendations for defining props
Hopefully this simple guide provides a good reference for you to work from. In general, I like to destructure all my props entering the component, as it provides a clean and effective syntax to work with. Good luck in your TypeScript React journeys!
Learn more about React
Explore these React courses from Pluralsight to continue learning:
Advance your tech skills today
Access courses on AI, cloud, data, security, and more—all led by industry experts.
