打字稿中的字符串键索引器具有更好的类型安全性

Question

I've created this playground and here is the code:

export enum KeyCode {
  Alt = 'meta',
  Command = 'command',
  // etc.
}

export type KeyStroke = KeyCode | string;

export interface Combination {
  combination: KeyStroke[];
}

export interface Sequence {
  sequence: KeyStroke[];
}

export type ShortcutItem = KeyStroke | KeyStroke[] | Combination | Sequence;

export interface Shortcut {
  [key: string]: ShortcutItem;
}

export type ShortcutMap =
  | {
      [key: string]: Shortcut;
    }
  | Shortcut;

export const buildShortcuts = (map: Shortcut) => {
  return []
}

function getShortcuts(shortcutMap: ShortcutMap, mapKey?: keyof typeof shortcutMap){
  const map = mapKey ? shortcutMap[mapKey] : shortcutMap;
  return buildShortcuts(map);
}

export const shortcutMapWithoutKey: ShortcutMap = {
  MOVE_LEFT: [KeyCode.Alt, 'a'],
  MOVE_RIGHT: [KeyCode.Command, 'd'],
};

export const shortcutMapWithKey: ShortcutMap = {
  one: {
    MOVE_UP: [KeyCode.Alt, 'b'],
    MOVE_DOWN: [KeyCode.Command, 'e'],
  },
  two: {
    MOVE_HERE: [KeyCode.Alt, 'c'],
    MOVE_THERE: [KeyCode.Command, 'f'],
  }
};

const a = getShortcuts(shortcutMapWithoutKey);
const b = getShortcuts(shortcutMapWithKey, "one");

The ShortcutMap type is not able to narrow the union type sufficiently.

Is it possible to get better type safety by somehow narrowing the union.

I get an error on this line:

  return buildShortcuts(map);

Argument of type 'string | Combination | string[] | Sequence | Shortcut | { [key: string]: Shortcut; }' is not assignable to parameter of type 'Shortcut'. Type 'string' is not assignable to type 'Shortcut'.

Answer 1

I think part of your type confusion comes from the fact that you define your ShortcutMap as

export type ShortcutMap =
  | {
      [key: string]: Shortcut;
    }
  | Shortcut;

I would expect here, that a map is just

  {
      [key: string]: Shortcut;
  }

One solution for you would be to make your types more explicit/narrow by avoiding the union type.

Have a look at this TypeScript playground .

Hope, that helps.