Keraito

import { MouseEventHandler, PropsWithChildren } from "react";

type ComponentProps = {
  title: string;
  onClick: MouseEventHandler<HTMLButtonElement>;
};

// `props.children` exists because of `PropsWithChildren`.
const Component = (props: PropsWithChildren<ComponentProps>) => (
  <div>

Keraito

import { MouseEventHandler, PropsWithChildren } from "react";

type ComponentProps = {
  title: string;
  caption: string;
  onClick: MouseEventHandler<HTMLButtonElement>;
};

const Component = (props: ComponentProps) => (
  <div>

Keraito

import { ComponentProps } from "react";
import { ExternalComponent } from "external-lib";

type InternalComponentProps = ComponentProps<typeof ExternalComponent> & {
  outerClassName: string;
};

const InternalComponent = ({
  outerClassName,
  ...restProps

Keraito

type OtherComponentProps = {
  // ...
  onChange?: (value: number) => void;
};

// -----

const Component = () => {
  // We know for sure it's not nullable as we're initialising it, but TypeScript doesn't so we have to help it.
  const changeValue = useCallback<NonNullable<OtherComponentProps["onChange"]>>(

Keraito

import { mount } from "enzyme";
import { SomeComponent, SomeComponentProps } from "./someComponent";

function mountComponent(props: Partial<SomeComponentProps>): ReactWrapper {
  return mount(
    <SomeComponent variant="normal" title="Test Title" {...props} />
  );
}

describe("SomeComponent", () => {

Keraito

import { PropsWithChildren } from "react";
import { SomeOtherComponent, SomeOtherComponentProps } from "./someOtherComponent";

type ComponentProps = Omit<Something, "propC" | "propD"> & {
  wrapperClassName?: string;
}

export const Component = (props: ComponentProps) => (
  <div className={props.wrapperClassName}>
    <SomeOtherComponent propA={props.propA} propB={props.propB}>

Keraito

import { PropsWithChildren } from "react";
import { SomeOtherComponent, SomeOtherComponentProps } from "./someOtherComponent";

type ComponentProps = Pick<Something, "propA" | "propB" | "children"> & {
  wrapperClassName?: string;
}

export const Component = (props: ComponentProps) => (
  <div className={props.wrapperClassName}>
    <SomeOtherComponent propA={props.propA} propB={props.propB}>

Keraito

import hasOwnProperty from './hasOwnProperty';
function shallowEqual(objA: mixed, objB: mixed): boolean {
	// ...
  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keysA[i];
    if (
      !hasOwnProperty.call(objB, currentKey) ||
      !is(objA[currentKey], objB[currentKey])
    ) {

Keraito

function shallowEqual(objA: mixed, objB: mixed): boolean {
	// ...
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) {
    return false;
  }
	// ...
}

Keraito

function shallowEqual(objA: mixed, objB: mixed): boolean {
	// ...
  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }