How to Define Props in React + TypeScript App

Props in React are like function arguments. They are passed in a component so it knows the data to work with.

To define props create a new type where declare every prop that should be defined:

type ComponentProps = {
  foo: string;
  bar: number;
}

The name for this type consists of 2 parts: 

It is now a good convention to name props types like this.

To use a props type pass it as a type for components props:

type AvatarProps = {
  user: string
}

const Avatar = ({user}: AvatarProps) => (
  return <img src={`/images/${user}.jpg`} alt='User photo' />
)

const Avatar: React.FC<AvatarProps> = ({user}) => (
  return <img src={`/images/${user}.jpg`} alt='User photo' />
)

// or

const Avatar: React.FunctionComponent<AvatarProps> = ({user}) => (
  return <img src={`/images/${user}.jpg`} alt='User photo' />
)

To define a props type with complex structures inside, it is better to decompose those structures in multiple different types. For example:

type AvatarProps = {
  user: {
    id: string;
    photo: string;
    name: string;
  };
  sizes: Array<[number, number]>;
  shape: 'round' | 'square';
}

// Types inside can be decomposed into:

type User = {
  id: string;
  photo: string;
  name: string;
}

type Width = number;
type Height = number;
type AvatarSize = [Width, Height];

type AvatarShape = 'round' | 'square';

// And then the AvatarProps 
// will be much simpler to read:

type AvatarProps = {
  user: User;
  sizes: AvatarSize[];
  shape: AvatarShape;
}

You can use these types in component declaration as usual.

type ComponentProps = {
  foo: string;
  bar?: number; 
  // bar prop is optional
}

You can use an interface as well as a type for declaring props types:

interface ComponentProps {
  foo: string;
  bar: number;
}

The difference between a type and an interface is in their extension. Let's say you want to extend 

type ComponentProps = {
  foo: string;
  bar: number;
}

type ExtendedProps = ComponentProps & {
  baz: boolean;
}

interface ComponentProps {
  foo: string;
  bar: number;
}

interface ExtendedProps extends ComponentProps {
  baz: boolean;
}

On the contrary, an interface cannot extend a union type:

type SomeProps = {/*...*/};
type OtherProps = {/*...*/};

type ComponentProps = SomeProps | OtherProps; // Okay.

// Won't work:
interface ComponentProps extends (SomeProps | OtherProps) {
}

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Define Props in React + TypeScript App</h1><p>Props in React are like function arguments. They are passed in a component so it knows the data to work with.</p><p>To define props create a new type where declare every prop that should be defined:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-glmmP" id="cm-glmmP">type ComponentProps = {
  foo: string;
  bar: number;
}</textarea><p>The name for this type consists of 2 parts: </p><ul><li><p><code>Component</code> prefix, which is the name of the component being described;</p></li><li><p><code>Props</code> postfix, that describes the intent of this type.</p></li></ul><p>It is now a good convention to name props types like this.</p><h2><a name="props-types-usage" id="props-types-usage">Props Types Usage</a></h2><p>To use a props type pass it as a type for components props:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-QMEPk" id="cm-QMEPk">type AvatarProps = {
  user: string
}

const Avatar = ({user}: AvatarProps) =&gt; (
  return &lt;img src={`/images/${user}.jpg`} alt='User photo' /&gt;
)</textarea><p>You also <a href="https://www.newline.co/@bespoyasov/how-to-create-a-functional-component-using-typescript--45d59d15" rel="noopener noreferrer nofollow">can use </a><code><a href="https://www.newline.co/@bespoyasov/how-to-create-a-functional-component-using-typescript--45d59d15" rel="noopener noreferrer nofollow">FunctionComponent</a></code><a href="https://www.newline.co/@bespoyasov/how-to-create-a-functional-component-using-typescript--45d59d15" rel="noopener noreferrer nofollow"> and </a><code><a href="https://www.newline.co/@bespoyasov/how-to-create-a-functional-component-using-typescript--45d59d15" rel="noopener noreferrer nofollow">FC</a></code> generic types for it:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-NVu72" id="cm-NVu72">const Avatar: React.FC&lt;AvatarProps&gt; = ({user}) =&gt; (
  return &lt;img src={`/images/${user}.jpg`} alt='User photo' /&gt;
)

// or

const Avatar: React.FunctionComponent&lt;AvatarProps&gt; = ({user}) =&gt; (
  return &lt;img src={`/images/${user}.jpg`} alt='User photo' /&gt;
)</textarea><h2><a name="complex-props" id="complex-props">Complex Props</a></h2><p>To define a props type with complex structures inside, it is better to decompose those structures in multiple different types. For example:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-i1Xx9" id="cm-i1Xx9">type AvatarProps = {
  user: {
    id: string;
    photo: string;
    name: string;
  };
  sizes: Array&lt;[number, number]&gt;;
  shape: 'round' | 'square';
}

// Types inside can be decomposed into:

type User = {
  id: string;
  photo: string;
  name: string;
}

type Width = number;
type Height = number;
type AvatarSize = [Width, Height];

type AvatarShape = 'round' | 'square';

// And then the AvatarProps 
// will be much simpler to read:

type AvatarProps = {
  user: User;
  sizes: AvatarSize[];
  shape: AvatarShape;
}</textarea><p>You can use these types in component declaration as usual.</p><h2><a name="optional-props" id="optional-props">Optional Props</a></h2><p>You can declare optional props using <code>?</code>:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-stdUz" id="cm-stdUz">type ComponentProps = {
  foo: string;
  bar?: number; 
  // bar prop is optional
}</textarea><h2><a name="types-vs-interfaces" id="types-vs-interfaces">Types vs Interfaces</a></h2><p>You can use an interface as well as a type for declaring props types:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-Gvf1r" id="cm-Gvf1r">interface ComponentProps {
  foo: string;
  bar: number;
}</textarea><p>The difference between a type and an interface is in their extension. Let's say you want to extend <code>ComponentProps</code> with another field <code>baz</code>. </p><p>In a case of a type you would write:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-CqqPb" id="cm-CqqPb">type ComponentProps = {
  foo: string;
  bar: number;
}

type ExtendedProps = ComponentProps &amp; {
  baz: boolean;
}</textarea><p>In a case of an interface:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-7NI4p" id="cm-7NI4p">interface ComponentProps {
  foo: string;
  bar: number;
}

interface ExtendedProps extends ComponentProps {
  baz: boolean;
}</textarea><p>On the contrary, an interface cannot extend a union type:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-NL51X" id="cm-NL51X">type SomeProps = {/*...*/};
type OtherProps = {/*...*/};

type ComponentProps = SomeProps | OtherProps; // Okay.

// Won't work:
interface ComponentProps extends (SomeProps | OtherProps) {
}</textarea><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201104093104880_%C2%ABScreenshot%C2%BB%202020-11-04%20at%2012.30.51.png" attachmentid="36f214bd-4581-49d5-b0bc-ee292ca1fa67" contenteditable="false"><div></div></figure><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://www.newline.co/write/how-to-create-a-functional-component-using-typescript--45d59d15" rel="noopener noreferrer nofollow">How to Create a Functional Component in React + TypeScript App</a></p></li><li><p><a href="https://reactjs.org/docs/components-and-props.html" rel="noopener noreferrer nofollow">Components and Props</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noopener noreferrer nofollow">Generic Types in TypeScript</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html" rel="noopener noreferrer nofollow">Merge Declarations in TypeScript</a></p></li></ul>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Define Props in React + TypeScript App

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript