🌐
Pluralsight
pluralsight.com › blog › guides
How to Use React.js Components with Typescript | Online Courses, Learning Paths, and Certifications - Pluralsight
June 29, 2020 - React and Typescript are magic together. Typescript provides the necessary tools to define strict types for the React components in your apps along with their props, states, and event handlers.
🌐
MUI X
mui.com › x › react-data-grid
React Data Grid component - MUI X
The MUI X Data Grid is a TypeScript-based React component that presents information in a structured format of rows and columns.
🌐
SDLC Corp
sdlccorp.com › home › blogs – sdlc corp › using typescript with react: a beginner’s guide
Using TypeScript with React: A Beginner’s Guide - SDLC Corp
August 27, 2025 - The component is typed as React.FC<GreetingProps>, which is shorthand for React.FunctionComponent<GreetingProps>. This tells TypeScript that Greeting is a functional component that accepts props of type GreetingProps.
🌐
React
react.dev › learn › typescript
Using TypeScript – React
There are two common paths to describing the children of a component. The first is to use the React.ReactNode type, which is a union of all the possible types that can be passed as children in JSX: ... This is a very broad definition of children. The second is to use the React.ReactElement type, which is only JSX elements and not JavaScript primitives like strings or numbers: ... Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts <li> children.
🌐
Robin Wieruch
robinwieruch.de › typescript-react-component
React Component with TypeScript
November 15, 2022 - The straightforward yet most verbose way of typing this React component would be inlining the types in the functional component's function signature: ... From there, we would start extracting reusable types from the functional component's function ...
🌐
JavaScript in Plain English
javascript.plainenglish.io › tips-for-typing-react-components-with-typescript-4cbc42f45c11
Tips for typing React components with TypeScript | by Maciek Wątroba | JavaScript in Plain English
March 5, 2021 - In this article I’m going to demonstrate some techniques that you can use in your day to day work with TypeScript and React. Let’s get started! Whenever a given prop can accept a constrained set of values using union types is a good idea. Let’s say you want to create a Text component that accepts a size prop.
🌐
Gustavwengel
gustavwengel.dk › converting-typescript-to-javascript-part-2
Tinkerer - React To Typescript Part 2: Converting React Components to TypeScript
June 11, 2018 - While very few in TypeScript codebases keep propTypes around, when we’re still in a transitory process - you might want to keep them around for some extra run-time safety, or if you’re building something meant to be consumed by non-typescript usage, e.g. libraries. The final component without proptypes looks like this · import React from 'react'; import './SquareBlock.css'; interface Props { color: string; } /** * Building block for Tetrominoes and the grid of the Well, occupying a 1x1 * square block.
🌐
Built In
builtin.com › software-engineering-perspectives › create-react-app-typescript
Create React App and TypeScript: A Quick How-To | Built In
If you want to do it manually, go into your tsconfig.json file, locate the key of “jsx” and change the value to “react” instead of react-jsx. If you’re still getting an error in your tsconfig.js file, you might be using different versions of TypeScript.
Find elsewhere
🌐
Medium
eliya-b.medium.com › react-with-typescript-by-example-pass-props-to-children-6d37332ee434
React with Typescript by example, Passing Props to Children. | by Elia Bar | Medium
July 22, 2022 - yarn create react-app my-app --template typescript ... As you can see, children h1, button, and p of the Parent component are passed and used inside the Parent component with the help of childrenprop.
🌐
Abdallaamin
abdallaamin.com › blog › how-to-use-typescript-with-react
How to use TypeScript with React
March 10, 2023 - To use TypeScript with React, you first need to install the necessary dependencies. You can do this by running the following command in your terminal: npm install --save-dev typescript @types/react @types/react-dom
🌐
Kent C. Dodds
kentcdodds.com › blog › how-to-write-a-react-component-in-typescript
How to write a React Component in TypeScript
March 4, 2021 - Now, according to @types/react, we're limited to null and React.ReactNodes, but React can actually render strings, numbers, and booleans as well. In any case, because a React component is simply a function that returns something React can render, typing it can be just as straightforward as ...
🌐
Echobind
echobind.com › post › react-with-typescript-components-as-function-declarations-vs-function-expressions
TypeScript: Function Declarations vs. Function Expressions
In the other instance, when we type a React component as a function declaration (i.e. function MyComponent), we ask the same thing. This time, we’re annotating the function return type. This explains why we can’t use the same type! We instead need to tell TypeScript, “Hey!
🌐
LogRocket
blog.logrocket.com › home › how to use typescript with react: a tutorial with examples
How to use TypeScript with React: A tutorial with examples - LogRocket Blog
June 4, 2024 - The useUsers Hook provides the type safety for the fetched data, as well as for the loading and error statuses, to ensure that the component (UserList) using this Hook receives and handles the data with the correct types. This method of typing hooks enhances the type safety of the code, which reduces the likelihood of runtime errors related to data types and structures. Now, let’s take a look at a simple example that demonstrates how to type props using TypeScript in a React component:
Top answer
1 of 7
101

The correct type for a functional component is React.FunctionComponent or React.FC which is a shortcut alias for it

import React, { FC } from 'react';

const getTabContent: FC = () => {
  switch (tab) {
    case 1:
      return <Images images={images} onSelect={onSelect}/>;
    default:
      return <Search onSelect={onSelect}/>;
  }
};

The FC type simply add the children property to the props argument of the functional component so you can access it:

const SomeComponent: FC = ({ children }) => (
  <div className="hello">{children}</div>
);

FC is a generic type so you can "add" props to your component:

interface SomeComponentProps {
  foo: string;
}

const SomeComponent: FC<SomeComponentProps> = ({ children, foo }) => (
  <div className={`Hello ${foo}`}>{children}</div>
);

Edit: React 18 update

Since React 18, FC doesn't add the children prop implicitly and offers an explicit way to do so with the PropsWithChildren generix type

Example:

type SomeComponentProps = { a: string };

const SomeComponent: FC<SomeComponentProps> = ({ a }) => <div>{a}</div>;

// This will fail when using the following expression
<SomeComponent>Hey I'm a child</SomeComponent>

Usage with children:

type ComponentWithChildrenProps = PropsWithChildren<{ a: string }>;

const ComponentWithChildrenProps: FC<ComponentWithChildrenProps> = ({
  a,
  children
}) => <div>{a} and {children}</div>

This allows to have a children prop a bit stricter. e.g.

type StrictCompProps = { children: string };

const StrictComp: FC<StrictCompProps> = ({ children }) => <div>{children}</div>;

// This will fail
<StrictComp><span>hey</span></StrictComp>
2 of 7
54

If you want to use FunctionComponent with class Component, Then use React.ComponentType

🌐
Fireship
fireship.dev › react-with-typescript
Learn React With TypeScript - Fireship
We help JavaScript developers make more money - and enjoy themselves in the process.
🌐
Medium
oluwadaprof.medium.com › writing-reusable-components-in-react-with-typescript-25be49021612
Writing Reusable Components in React with TypeScript
August 20, 2023 - When combining React’s component-based architecture with TypeScript’s type system, we unlock a powerful duo for building robust applications. React’s declarative approach to UI components complements TypeScript’s type safety seamlessly.
🌐
Oida
oida.dev › typescript-react › components
TypeScript and React: Components
December 12, 2018 - Creating a type for our properties, and telling TypeScript that the parameters of our functional component are of that type. You already get nice suggestions in VS Code: And errors when you compile without passing all required properties: If you want to make some properties optional, do that in the respective Props type: type CardProps = { title: string, paragraph?: string // the paragraph is optional } There’s a generic type you can use. import React, { FunctionComponent } from 'react'; // importing FunctionComponent type CardProps = { title: string, paragraph: string } export const Card: FunctionComponent<CardProps> = ({ title, paragraph }) => <aside> <h2>{ title }</h2> <p> { paragraph } </p> </aside> const el = <Card title="Welcome!" paragraph="To this example" />
🌐
FullStack
fullstack.com › labs › resources › blog › typescript-react-component-interfaces-overloading-by-props
TypeScript/React Component Interfaces Overloading by ...
This article explains how to create correct, intuitive APIs for React components in TypeScript by using prop values to overload React component interfaces.
🌐
Motion
motion.dev › react › motion component
React motion component | Motion
A target to animate to when a component is removed from the tree. Can be set either as an animation target, or variant. Owing to React limitations, the component being removed must be a direct child of AnimatePresence to enable this animation.