Matheus Verissimo mverissimo

Dynamic methods on a TypeScript class

Sometimes, we want to be able to generalize a class that is tailored to some static set of data, but want to do so while preserving type safety. This can be achieved in TypeScript by combining userland enums, private constructors, mapped types, and intersection types.

Individual techniques

Each of the individual techniques above are known TypeScript patterns built on

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

constructor
render

	import { twMerge, type ClassNameValue } from "tailwind-merge";

	/**
	* Recursive proxy; used to hack the type system.
	*/
	const proxyOf: any = new Proxy(() => proxyOf, {
	get: () => proxyOf,
	});

	export namespace tva {

	import type { TupleToUnion } from 'type-fest';

	import type { UsePersistentQueryOptions } from './usePersistentQuery';
	import { usePersistentQuery } from './usePersistentQuery';

	import { useRoute } from '#vue-router';

	export function usePersistentQueries<
	TKeys extends readonly string[],
	TReturn = Record<TupleToUnion<TKeys>, Ref<string>>,

	import React, { useEffect, useRef } from 'react';

	/**
	* Use setInterval with Hooks in a declarative way.
	*
	* @see https://stackoverflow.com/a/59274004/3723993
	* @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
	*/
	export function useInterval(
	callback: React.EffectCallback,

	import { useReducer } from 'react'

	export function updateName(name: string) {
	return <const>{
	type: 'UPDATE_NAME',
	name
	}
	}

	export function addPoints(points: number) {

	import React from "react";

	// Usage
	function App() {
	const draw = React.useCallback(gl => {
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.clearDepth(1.0);
	gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT);
	}, []);
	const canvasRef = useCanvas(draw, "webgl2");

	# Generate a new pgp key: (better to use gpg2 instead of gpg in all below commands)
	gpg --gen-key
	# maybe you need some random work in your OS to generate a key. so run this command: `find ./* /home/username -type d \| xargs grep some_random_string > /dev/null`

	# check current keys:
	gpg --list-secret-keys --keyid-format LONG

	# See your gpg public key:
	gpg --armor --export YOUR_KEY_ID
	# YOUR_KEY_ID is the hash in front of `sec` in previous command. (for example sec 4096R/234FAA343232333 => key id is: 234FAA343232333)

	import React from 'react'
	import axios, { post } from 'axios';

	class SimpleReactFileUpload extends React.Component {

	constructor(props) {
	super(props);
	this.state ={
	file:null
	}

	.nav-tab {
	...
	// instead of putting it on
	border-right: 1px solid #424242;
	&:last-child {
	border-right: 0; // and then taking it off
	}
	// use CSS not() to only apply to the elements you want
	&:not(:last-child) {
	border-right: 1px solid #424242;