[Typescript] Generics in a Class Names Creator

Consider this createClassNamesFactory function that's similar to one I built for getting Tailwind class names that could then be passed into a React component

const createClassNamesFactory =
  (classes: unknown) =>
  (type: unknown, ...otherClasses: unknown[]) => {
    const classList = [classes[type], ...otherClasses];
    return classList.join(" ");
  };

For example, after creating a getBg factory, calling getBg('primary') will return 'bg-blue-500'.

This pattern is common in instances where you have a lot of class names you want to be able to stack in various configurations.

 

Solution:

import { expect, it } from 'vitest';
import { Equal, Expect } from '../helpers/type-utils';

const createClassNamesFactory =
  <T extends { primary: string; secondary: string }>(classes: T) =>
  (type: keyof T, ...otherClasses: string[]) => {
    const classList = [classes[type], ...otherClasses];
    return classList.join(' ');
  };

const getBg = createClassNamesFactory({
  primary: 'bg-blue-500',
  secondary: 'bg-gray-500',
});

it('Should let you create classes from a className factory', () => {
  expect(getBg('primary')).toEqual('bg-blue-500');
  expect(getBg('secondary')).toEqual('bg-gray-500');
});

it('Should let you pass additional classes which get appended', () => {
  expect(getBg('primary', 'text-white', 'rounded', 'p-4')).toEqual(
    'bg-blue-500 text-white rounded p-4'
  );
});

it('Should return a type of string', () => {
  const result = getBg('primary');

  type test = Expect<Equal<typeof result, string>>;
});

it('Should not let you pass invalid variants', () => {
  // @ts-expect-error
  getBg('123123');
});

it('Should not let you pass an invalid object to createClassNamesFactory', () => {
  // @ts-expect-error
  createClassNamesFactory([]);

  // @ts-expect-error
  createClassNamesFactory(123);

  createClassNamesFactory({
    // @ts-expect-error
    a: 1,
  });
});