typescripttypescript-typings

Create a type from object keys dynamically


I have an icon-Map.json which is being created dynamically. Example:

const iconMap = {
    angleDoubleRight: 'angleDoubleRight.svg',
    angleRight: 'angleRight.svg',
    assets: 'assets.svg',
    barChart: 'barChart.svg',
    cancel: 'cancel.svg',
    chevronDown: 'chevronDown.svg',
    dotChart: 'dotChart.svg',
    dotMenu: 'dotMenu.svg',
    horizontalDots: 'horizontalDots.svg'
    ...

};
 type IconMapMember = 'angleDoubleRight' | 'angleRight' | 'assets' | ....

Solution

  • In your question you say you can't use keyof, but I'm not sure why. If you have an object whose keys are known at compile time (meaning that the iconMap variable is generated before you compile TypeScript code that uses it), you can use the typeof type query operator to get its type, and then use keyof on that:

    const iconMap = {
      angleDoubleRight: "angleDoubleRight.svg",
      angleRight: "angleRight.svg",
      assets: "assets.svg",
      barChart: "barChart.svg",
      cancel: "cancel.svg",
      chevronDown: "chevronDown.svg",
      dotChart: "dotChart.svg",
      dotMenu: "dotMenu.svg",
      horizontalDots: "horizontalDots.svg"
      //...
    };
    
    type IconMapMember = keyof typeof iconMap;
    // type IconMapMember = "angleDoubleRight" | "angleRight" | "assets" | "barChart" 
    // | "cancel" | "chevronDown" | "dotChart" | "dotMenu" | "horizontalDots" ...
    

    Link to code

    If you have some particular issue which prevents this solution from working, please update your question with more details about your build process. Hope this helps; good luck!