React function component in TypeScript

Published May 15, 2021

For the past couple of months I've been learning TypeScript and using it in a NextJS app.

At first it was a little daunting, but I've come to enjoy using the simple features it gives around types.

Here's what a typical function component may look like this:

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const Component = ({ darkMode, title, advancedMode }) => {
    const [name, setName] = useState('');
    const [isHuman, setIsHuman] = useState(false);

    return <div></div>;

Component.propTypes = {
    darkMode: PropTypes.bool,
    title: PropTypes.string,
    advancedMode: PropTypes.bool,

export default Component;

Here's what the TypeScript version of the above component looks like:

import React, { FC, useState } from 'react';

interface Props {
    darkMode: boolean;
    title: string;
    advancedMode?: boolean;

const Component: FC<Props> = ({ darkMode, title, advancedMode }) => {
    const [name, setName] = useState<string>('');
    const [isHuman, setIsHuman] = useState<boolean>(false);

    return <div></div>;

export default Component;