How to specify (optional) default props with TypeScript for stateless, functional React components?

I've found the easiest method is to use optional arguments. Note that defaultProps will eventually be deprecated on functional components.

Example:

interface TestProps {
    title?: string;
    name?: string;
}

const Test = ({title = 'Mr', name = 'McGee'}: TestProps) => {
    return (
        <p>
            {title} {name}
        </p>
    );
}

Here's how I like to do it:

type Props = { foo: Foo } & DefaultProps
type DefaultProps = Partial<typeof defaultProps>
const defaultProps = {
  title: 'Mr',
  name: 'McGee'
}

const Test = (props: Props) => {
  props = {...defaultProps, ...props}
  return (
    <Text>
      {props.title} {props.name}
    </Text>
  )
}

export default Test

Update 2022

For function components, there is indeed a possible deprecation of defaultProps field. I don't believe this will happen so soon due to the sheer amount of code already written with it, but a warning being displayed in the console is very likely.

I'm using the solution below, which provides the correct behavior and proper TypeScript validation. It works with mixed defined/undefined properties, and also with properties with/without default values – that is, it covers all cases:

interface Props {
  name: string;
  surname?: string;
  age?: number;
}

const defaultProps = {
  surname: 'Doe',
};

function MyComponent(propsIn: Props) {
  const props = {...defaultProps, ...propsIn};

  return <div>{props.surname}</div>;
}

And VSCode autocomplete is spot on:

It has been tested with TypeScript 4.7.

as of react version 18.2 the following will do the trick.

Notice ? sign. The property can either have a value based on the type defined or its value can be undefined.

type TestProps {
  title?: string;
  name?: string;
}

export const Test = ({
  title = 'Mr', 
  name = 'McGee'
}: TestProps) => {
  return (
    <p>
      {title} {name}
    </p>
  )
}

Usage

<Test /> // Mc Gee
<Test title="Sir" name="Lancelot" /> // Sir Lancelot

Adding my solution to the pot, I think it adds an additional level of readability and elegance onto the existing solutions.

Let's say you have a component MyComponent with a mix of required and optional props. We can separate these required and optional props into two interfaces, combining them for the full prop interface of the component, but only using the optional one to set the default props:

import * as React from "react";

// Required props
interface IMyComponentRequiredProps {
  title: string;
}

// Optional props
interface IMyComponentOptionalProps {
  color: string;
  fontSize: number;
}

// Combine required and optional props to build the full prop interface
interface IMyComponentProps
  extends IMyComponentRequiredProps,
    IMyComponentOptionalProps {}

// Use the optional prop interface to define the default props
const defaultProps: IMyComponentOptionalProps = {
  color: "red",
  fontSize: 40,
};

// Use the full props within the actual component
const MyComponent = (props: IMyComponentProps) => {
  const { title, color, fontSize } = props;
  return <h1 style={{ color, fontSize }}>{title}</h1>;
};

// Be sure to set the default props
MyComponent.defaultProps = defaultProps;

export default MyComponent;

using @rodrigocfd answer i came up with this method,
it's useful in case inheritance is also involved (for instance i needed className being available in my components ,and not encapsulate them in div!)

// base.ts
export interface BaseProps {
  className?: string
}

export const basePropsDefault = {
  className: ''
}

export function setDefaultProps<T, P extends BaseProps>(t: T, defaultProps: P): T {
  // @ts-ignore
  t.defaultProps = {...basePropsDefault, ...defaultProps}
  return t
}


// Card.tsx
import {ReactElement} from "react";
import {setDefaultProps, BaseProps} from "../base";

export interface CardProps extends BaseProps {
  children: ReactElement
  internalPadding?: number,
}

const defaults = {
  internalPadding: 2,
} as CardProps

function Card(props: CardProps) {
  return (
    <>
      <div className={`shadow-lg container p-${props.internalPadding} ${props.className}`}>
        {props.children}
      </div>
    </>
  )
}

export default setDefaultProps(Card, defaults)

You can do it simply without dealing with Typescript Interfaces, just while defining the function that is going to accept those props using '?' operator as follows

const ChildComponent: React.FC<{ firstName: string, lastName?: string}> = ({ fName, lName }) => {

}

Calling child component with LastName

<ChildComponent firstName={"John"} lastName={"Doe"}/>  

Calling child component without LastName

<ChildComponent firstName={"John"}/>  

I might be wrong, but passing the a default prop value on the function as the second voted reply says could lead to subtle bugs or over executed useEffects (I don't have enough rep to reply there, so here's a reproducible codesanbox)

Even if it's a really contrived example, and probably in most of the cases just bad component design, I have seen this more than once, even breaking full pages.