TypeScript treating object as empty type instead of defined interface

Question

I'm working on a TypeScript project where I have defined an interface called Theme which has a property called typography. The typography property is supposed to have a dynamic set of properties based on an enum called TypographyVariant. Here's my code:

export type TypographyVariant =
  | 'label-large'
  | 'label-medium'
  | 'label-small';

export interface Theme {
  typography: {
    [key: TypographyVariant]: {
      lineHeight: string;
      fontSize: string;
      letterSpacing?: string;
      fontWeight?: number;
    };
  };
}

const theme: Theme {
  typography: {
    'label-large': {
      lineHeight: '20px',
      fontSize: '14px',
      letterSpacing: '0.1px',
      fontWeight: 500,
    },
    'label-medium': {
      lineHeight: '16px',
      fontSize: '12px',
      letterSpacing: '0.5px',
      fontWeight: 500,
    },
    'label-small': {
      lineHeight: '16px',
      fontSize: '11px',
      letterSpacing: '0.5px',
      fontWeight: 500,
    },
  }
};

My code editor is treating the typography object inside theme as {} type instead of what I have defined in Theme interface.

The problem is that when I try to define the theme object, my code editor is treating the typography property as an empty object instead of the dynamic set of properties defined in the Theme interface. I'm not sure why this is happening or how to fix it. Can anyone help me figure out what's going wrong here? Thanks!

motto · Accepted Answer · 2023-03-01 17:46:36Z

0

Your current types define typography such that it can only contain keys from TypographyVariant, but if I understand correctly you're requiring any typography to define all the variants.

Defining typography using a Record would be a good way of doing this:

export interface Theme {
  typography: Record<TypographyVariant, {
      lineHeight: string;
      fontSize: string;
      letterSpacing?: string;
      fontWeight?: number;
    }>
}

answered Mar 1, 2023 at 17:46

motto

3,2092 gold badges4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript treating object as empty type instead of defined interface

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related