Typing props Parameters

// pre-lint, one-line
export function DefaultBlock(
  {content, editable}: { content: any; editable: boolean;}
);

// linted, multi-line
export function DefaultBlock({
  content,
  editable,
} : {
  content: any;
  editable: boolean;
});

React 18+

React version 18 introduced removal of implicit props typing.

• Explicit props are the ones that are written out in the props interface.
• Implicit props are the ones that @types/react automatically adds.

There are inconsistencies between functional component using React.FC and function declaration.

When using function declaration, excess implicit props were accepted without type error.

When using React.FC, you get the following behavior:

import * as React from 'react';

interface InputProps {
    type?: string;
}

const Input = ({ type }: InputProps) => {
    return <input type={type} />;
};

<Input type="search" inputMode="numeric" />;
//                   ^^^^^^^^^ excess prop that's rejected

<Input type="search" />;
//     ^^^ "Type '{ typ: string; }' is not assignable to type
//          'IntrinsicAttributes & InputProps'.
//             Property 'typ' does not exist on type
//             'IntrinsicAttributes & InputProps'. Did you mean 'type'?(2322)"

This means attributes like className that are added as Props would need to be typed.

import { ReactElement, PropsWithChildren } from "react";

export const Card = ({ 
  id,
  visual
} : {
  id: string,
  visual: string,
  className: string
} & PropsWithChildren): ReactElement => 
{
  //...
}