Jan-Philipp Kempf jpkempf

Beep boop beep

jpkempf / gist.ts

Last active January 5, 2021 09:55

Using TypeScript function overloads and generics to narrow down return types

	/**
	* interactive playground link:
	* https://www.typescriptlang.org/play?#code/C4TwDgpgBAwg9gWzAQwHYgAoCcIDMI6oDGEAzlALxQDeAUFFMmGFnAG7IA2AXDfQ1GAALHKSFxOAE150BAgKIBVAEq9UAVwQAjAgG5+DAL76jJqDgDmAS1LAsyYFbioZBqFdRsrwCLy1wJCDQzBlIITlw-AM4g1BCoAHchb3CbYF5bLA8LM2NaPNpQSChsPAIIYggAaQgQSigAa1q4XFhEFHRS-EISUn1aAHoBqFx1YkdnKHYCTjhkSXIuWYSoABUAZUE4KFRkLFYVyTgE1EEhaBxgdSxToogAOkHhokQECuAp9Q-haB1lwQS204HjIWygYWgPygkisuG6FRI3FoEAAHmA4FgPshSCBiCMxkQJqcLBBgPAkGhMDh4ZVSAAKACUvGwiBsEAAPOSOlSyj0yAA+fSo9GYxg4vGjcZOYmkrmUrrlWnsqpQVE+VALErUxUkGogfl0pogXhVJla1lhTnteXavmkADaVQAuoLaE8ztBJYTpe4kDE3qhgA4fQh1LYoC82ARGJxOPipZNplhZvNSABCZFojFY8VEePeyYksnWzq2hFkZWqlHqzUKvl6g38I0AfhNtDNLIQbKtFNLvPL5AAPm1ezyab1HS6+AwXqhwyx+7TeHK++PQVRkAlkN4RqSiEI6QByXDIJoAWgXa9IZ4qknRHmAh4Z9x+qDpdNE6LnEAZlH55jIL8wnuAArUhnEZBl+gYS5rlOI0oGbKBLx1Mh7SNJ0oF4FC7X0Qw3WFbMxVxPMvSJcFZRLMdUNISs1Vvcg63LBs6SbWoTQAGn4DhOHUXwR25JjaUndtmVYLtLTYOArEkf9ZEYLcd3wYB9yPE9zxwgcbw1e9A0PDjpwEN5hDgaQoEPDBFFWfS3H8SRjSgAApdYAHkADl7kybJYRAOl5LkdDaidXgeL4ri5EMBlwqgSK8LdIZEnOW5znzcik

jpkempf / extract.ts

Created April 23, 2021 15:18

TypeScript magic with Extract

	// source: https://twitter.com/mpocock1/status/1385610014639988739

	const fields = [{
	inputType: 'text',
	label: 'ID',
	name: 'id'
	}, {
	inputType: 'text',
	label: 'Description',
	name: 'description'

jpkempf / useMockPerformanceObserver.ts

Created February 7, 2022 15:27

Custom Hook to mock the PerformanceObserver API

	import { useEffect } from 'react';

	const useMockPerformanceObserver = (): void => {
	useEffect(() => {
	const OriginalPerformanceObserver = window.PerformanceObserver;

	class MockPerformanceObserver extends PerformanceObserver {
	disconnect = () => null;

	observe = () => null;

jpkempf / fetchers.ts

Last active June 26, 2023 16:26

Helper to create fully typed fetcher functions with built-in error handling

	/**
	* This function returns a new function that handles HTTP calls, logging, and errors.
	* It is meant for API route helpers but could be used for other kinds of calls as well.
	*
	* @param name the name of the new function; used for logging
	* @param fetcher the function that makes the HTTP call
	* @returns a new function that calls the fetcher and handles errors and logging
	*/

	const createFetcher =

jpkempf / HOC.ts

Created January 30, 2024 15:52 — forked from vezaynk/HOC.ts

HOC helpers. reduceHOCs and applyHOCs.

	interface HOC<T> {
	(Component: React.ComponentType<T>): (props: T) => JSX.Element
	}

	const reduceHOCs = <T>(...hocs: HOC<T>[]): HOC<T> => hocs
	.reduce((reduced, next) => (c) => next(reduced(c)));

	const applyHOCs = <T>(...hocs: HOC<T>[]) {
	const reducedHoc = reduceHOCs(...hocs);