Stupid simple dependency injection for TypeScript

dependency-injection-made-simple.ts

/**
 * Module-level variable where all of the global dependency injection
 * overrides are stored.
 */
const provisions = new Map<unknown, unknown>();
  
/**
 * Adds an override to the global dependency injection context.
 * TypeScript ensures that the signature of the override is the same
 * as that of the dependency being overridden.
 *
 * There are probably dozens of TypeScript caveats to account for,
 * but this is just to illustrate that it can be done easily.
 *
 * This is similar to Angular's `@Injectable({ providedIn: 'root' })`.
 * @see https://angular.io/guide/providers
 */
export function provide<T>(token: T, override: T) {
  provisions.set(token, override);
}

/**
 * Returns the provided dependency for the respective token, if provided.
 * If not, it returns the dependency itself.
 * This is very similar to how Angular's inject function works.
 * @see https://angular.io/api/core/inject
 */
export function inject<T>(token: T) {
  return provisions.has(token) ? (provisions.get(token) as T) : token;
}

import { useEffect, useState } from 'react';
import { provide, inject } from './dependency-injection';

// USE CASE 1: OVERRIDING GLOBALS FOR TESTING

function Component() {
  const fetch = inject(window.fetch);

  const [word, setWord] = useState('');

  useEffect(() => {
    (async () => {
      const response = await fetch(
        'https://random-word-api.herokuapp.com/word'
      );
      const text = (await response.json()) as [string];
      setWord(text[0]);
    })();
  }, []);
  return <div>{word}</div>;
}

function mockFetch() {
  return {
    json: async () => {
      return ['supercalifragilisticexpialidocious'];
    },
  };
}

export default function App2() {
  // provide(window.fetch, mockFetch); // in a test, you would put this in a beforeAll or beforeEach
  return <Component />;
}