tvler

type DeepRequiredNonNullable<T> = T extends null | undefined
  ? never
  : (T extends (infer ElementType)[]
      ? DeepRequiredNonNullable<ElementType>[]
      : (T extends Record<string | number, any>
          ? { [key in keyof T]-?: DeepRequiredNonNullable<T[key]> }
          : T));

// Number test
type BadPrimitive = number | null | undefined | string;

tvler

type ActionTypes = 'actionA' | 'actionB' | 'actionC' | 'actionNoPayload';

type ActionPayloads = {
  actionA: { payload: number };
  actionB: { payload: string };
  actionC: { foo: boolean; bar: boolean };
};

type Actions = {
  [key in ActionTypes]: {

tvler

import { useEffect, useRef } from "react";

/*
 * A type-safe, polymorphic Box to wrap any forwardRef component
 * with an Intersection Observer. Designed to be used in an
 * unknown-length array map setting (infinite feed, etc.).
 *
 * The `callback` prop is closed over the passed-in `id` prop.
 * This allows the `callback` prop to keep reference-equality
 * between renders using something like `useCallback`, which

tvler

import { ApolloCache, ApolloClient, ApolloLink, NormalizedCacheObject } from '@apollo/client';

class MockedApolloLink extends ApolloLink {
  split = jest.fn();
  concat = jest.fn();
  request = jest.fn();
  setOnError = jest.fn();
  protected onError = jest.fn();
}

tvler

import { useApolloClient, Cache } from "@apollo/client";
import { useEffect } from "react";

/*
 * WriteFragment: A declarative way to write fragments to Apollo cache
 * using React components. When the fragment props change, the cache is
 * updated. When then component unmounts, the fragment is deleted.
 *
 * This is essentially a reactive version of the cache.writeFragment
 * method, using the same exact arguments and types.

tvler

/*
 * TS Playground: https://www.typescriptlang.org/play?noUncheckedIndexedAccess=true&noUnusedLocals=true&noUnusedParameters=true#code/PQKgUABCEEIKYHMCWA7CcAeBDAtgBwBs5IRgwwBjAexQGcAXdbfIiAXggoCc4t64Acrji08WCnAAmAURQBXHAAoA3pAi049AIIAuCAG0A5FkMAaCIYBGhgLqm1G+jD1GT5q2YsVb9gL4BKAG5yTFxCOAA6Ry0IrAhgYAgAImjYpJDmcKjNGAiKeMSUnLz0sFASCFlJJjCiEjIwADM5FAp6JBpOHj5BYVFxKVkFAB41IRwRMQkmfhRJWnV6LlQEewhK+RwAaTgATxm4OYWGZZRVtSHtvYXMWfmILS4uLF3hy53dgD41iABJFDwckYt0O9wASnBqFxJMNxpMBuZ9BFke9rjZPmBPoo1KhAfQ9P88fZ-HpVOt9Cg+lM4BBUJUMEtxPQPrRhoSgZ8bKS1OTDgoPrS0AAVOThaRECYoehC3Z4OBsgFAilUgborkQAAGABJlJSJv0JL4Ijq+Vddr4NcF1r5gr4IGSIPRZTTLgA1LAEOQ0jja5Rwg1wI061Hmy1qJ1yiAABSwXHaHv91Jkm3YEAhUJhiYRachVGhb02H3Mbo9Xs+n2CamodEYYjjSATKokyYUtD0j2erxj9cb+qTl0+qcUAHlLAArSH0CKHJZIESKXFA-wQLALDsvUbrckAaz2eizEnMADdS3A9CHaDY1J9-BEcFg8IpFMq+9nTSybMu2IOHetqwx0E2Ucx1TZQ7VXHMMwLfk9mLTZ3U9OAKx5CBGjzCBFH-YFCz2CAqEaQCYN2Whl1-LcsMInAEK9c94NPVNfT1eFDWNZR3z2C0VwWEtEKtLd1lNYD9HY3YbFTU1qLgPjrXIfieHoOQuDQZQDCYgN1UE8cIHAhZu3jAgD0GTY+ICSs-xoAC1P7FMOGAydYloWgkAQF

tvler

// TS playground:
// https://www.typescriptlang.org/play?#code/PTAElByAoAzBXA7AxgFwJYHt6lfaBTAJwBVYAHAGzwB5JRQSK9Q8APZPeAEwGdRvkCOAOYBtALoAaUJAB8ACmRlKALlAiAdJoaUxASlABvWqAJ5FBLIsaQAvgG5IiTP2y5C2vETwuAvK-zESnhyIgDkAIahUqEARlGgoYihepCQwABUtOmgABKETOGmfOgAtkzc5KhCABbkAJ58qCWo5IWgcEhomFmgnHjQOKhd8LzI1eHI7eEtoMjo-oSg4bNBWcCpIKCAvBuA1XswCCgYWIQE6AQAjApBqhqa-ILwomJ6hsam5par9o7Okydn5y8vmYBFOFxCEXisShSRSaTAu32nSOILBACYqB55FYVPQgvojHR3rALCtrN8nCM-qCzmigZM-P8CGiIZFonForDdBsEXsOodMKizgBmTFBZhsDg8PgCYTibHXPGMAlvMwkz7khyUlxM4X00CMmkEYWsqEchJcoA

// ✅
function inferTuple<
  Tuple extends string[], 
>(tuple: [...Tuple]) {
  return tuple
};
const inferTupleTest = inferTuple(['a', 'b', 'c'])

tvler

/**
 * A strict React.memo memoization function, built off
 * the one that comes built-in, that throws an error
 * (in dev) if props change between renders. Props you
 * want to allow can be passed in as arguments.
 *
 * This "don't allow by default" model makes it so
 * further changes to a component don't silently
 * undo any memoization optimizations done before.
 *

tvler

type Guard<Type extends SuperType, SuperType> = Type;

const tuple = [1, 2, 3] as const;
type Test = Guard<typeof tuple, ReadonlyArray<number>>;

tvler

/**
 * A type-safe high-order-component creator
 * that injects a prop named a given string,
 * with a type inferred by a given hook's
 * return value.
 *
 * Ex:
 *   const Component = ({ name }) => {
 *     return <>Hello {name}</>;
 *   };