打字稿：如何在没有运行时工件的情况下制作通用版本的编译时集？

Question

I am trying to make Typescript warn me about incorrect usages of the API that we have (the errors I expect to see are marked):

interface Icon { src: string; }

interface IconSet {
  [iconName: string]: Icon;
}

type IconRegistry<T> = {
  [K in keyof T]: Icon;
};

function asIconRegistry<T extends IconSet>(iconSet: T): IconRegistry<T> {
  return iconSet as any;
}

type UiBuilder = <P, S extends IconRegistry<P>>(iconRegistry: S) => {
  withIcon<K extends keyof S>(iconName: K): null,
};

const listIcons = asIconRegistry({
  sort: { src: 'sort.svg' }, // Expected to be OK
  email: { source: 'email.svg' }, // Expected to ERR
});

const profileIcons = asIconRegistry({
  security: { src: 'security.svg' }, // Expected to be OK
  email: { src: 'email.svg' }, // Expected to be OK
});

function buildUi(builder: UiBuilder) {
  builder(profileIcons).withIcon('security'); // Expected to be OK
  builder(profileIcons).withIcon('bold'); // Expected to ERR
}

It works great, as can be seen here , except for one small detail - the asIconRegistry function is an actual runtime artifact, which is non-ideal.

What I've tried:

Typing the variables manually:

const listIcons2: IconRegistry<{ sort: Icon, email: Icon }> = {
  sort: { src: 'sort.svg' }, // Expected to be OK
  email: { source: 'email.svg' }, // Expected to ERR
};

This works, but is too verbose - the usefulness of generics is kinda lost. In addition to that this becomes harder to maintain as the list grows in size and complexity, and it is harder to persuade consumers of this API to type their things this way.

How can I achieve the same level of type safety without runtime artifacts and the above verbosity?

Answer 1

Okay, let's clean things up a bit. Your generics are a bit wider than necessary; mostly you are using full object types when you only actually care about their key names. Here's my changes:

// Icon is the same
interface Icon { src: string; }

// you just need key names here (K), not a full object type (T)
type IconRegistry<K extends string> = Record<K, Icon>

// you don't really need IconSet, but for convenience, here it is
type IconSet = IconRegistry<string>

// the old P and S didn't do anything except determine keys
// let's just use those keys (K) directly
type UiBuilder = <K extends string>(iconRegistry: IconRegistry<K>) => {
  withIcon(iconName: K): null,
};

---

So now you're ready to create and use some IconSet s.

I don't really understand why you think it's important to have zero runtime impact from your type checking (an identity function call is probably fairly low impact especially with modern JavaScript engines ), but I like a challenge. You want to verify that listIcons and profileIcons are valid IconSet s at compile time without anything being emitted into the JavaScript.

How about this:

type VerifyIconRegistry<T extends IconSet> = any

You need to pass a valid IconSet as the parameter to VerifyIconRegistry<> . Let's see it in action with the invalid listIcons :

const listIcons = {
  sort: { src: 'sort.svg' },
  email: { source: 'email.svg' } 
};

declare var witness: 
  VerifyIconRegistry<typeof listIcons> // ERROR
  // Property 'src' is missing in type '{ source: string; }'

There's the error. typeof listIcons is not a valid IconSet . Note declare var witness doesn't emit any JavaScript. It does add a variable named witness into ambient scope here at compile time... give it any name you don't need, and you can reuse it since var s can be redeclared.

Now for the valid profileIcons :

const profileIcons = {
  security: { src: 'security.svg' },
  email: { src: 'email.svg' }
};

declare var witness:
  VerifyIconRegistry<typeof profileIcons> // OKAY

That one worked (and we reused the witness name).

Finally, let's make sure we didn't break buildUi() :

function buildUi(builder: UiBuilder) {
  builder(profileIcons).withIcon('security'); // OKAY
  builder(profileIcons).withIcon('bold'); // ERROR
  // Argument of type '"bold"' is not assignable 
  // to parameter of type '"security" | "email"'.
}

Looks good. Hope that helps; good luck!