Encountering a Typescript issue while trying to access two distinct values dynamically from within a single object

Question

Encountering a Typescript issue while trying to access two distinct values dynamically from within a single object

Currently, I'm developing a component library and facing an issue with a TypeScript error:

An Element implicitly has an 'any' type due to the expression of type 'levelTypes | semanticTypes' being unable to index type '{ level1: { highEmphasis: string; mediumEmphasis: string; outlineHighEmphasis: string; outlineMediumEmphasis: string; semantic: { info: string; onInfo: string; negative: string; onNegative: string; ... 12 more ...; AIGradientEndpoint: string; }; interactive: { ...; }; }; ... 15 more ...; aiIntense: { ...; }; } | { ....'.

Property 'level1' is not found in type '{ level1: { highEmphasis: string; mediumEmphasis: string; outlineHighEmphasis: string; outlineMediumEmphasis: string;'ts(7053)

The part that's causing trouble is when trying to dynamically access two different keys in my color palette object:

theme.fdsTheme.palette[getForeground(level)][level].interactive.highEmphasisSurface

Including my component code for reference:

import styled from "@emotion/styled";

// Rest of the code...
:)

I have been searching for solutions related to accessing two keys dynamically but have only come across examples dealing with single key accesses. Here is what I attempted:

// Define my theme as a separate type
import "@emotion/react";
import { Theme } from "../theme";

type DefaultTheme = typeof Theme;

declare module "@emotion/react" {
  export interface Theme extends DefaultTheme {}
}

import { Theme } from "@emotion/react";

// Previous Code...

const StyledButton = styled(BaseButton)<ButtonStyleProps>(({ theme, level }) => {

  return {
    [`&.${buttonClasses.root}`]: {
      // various styles...

      "&.fds-Button-primary": {
        backgroundColor:
          theme.fdsTheme.palette[getForeground(level) as keyof Theme][level as keyof Theme].interactive.highEmphasisSurface,
      },
    },
  };
});

UPDATE:

To simplify things, here's some dummy code:

interface TestProps {
  levelOne: "color" | "typo";
  levelTwo: "level1" | "level2" | "level3";
}

function TestComponent({ levelOne, levelTwo }: TestProps) {
  const theme = {
    color: {
      level1: {
        color: "",
      },
      level2: {
        color: "",
      },
    },
    typo: {
      level1: {
        color: "",
      },
      level2: {
        color: "",
      },
      level3: {
        color: "",
      },
    },
  };

  const checkLevel = (
    level: "level1" | "level2" | "level3"
  ): "color" | "typo" => {
    return level === "level1" || level === "level2" ? "color" : "typo";
  };

  const c = theme[checkLevel(levelTwo)][levelTwo].color;

  console.log(c);
}

The problematic line would be:

theme[checkLevel(levelTwo)][levelTwo].color;

typescript

Answer 1

Answer №1

I shifted this code block outside of the main component:

type Color = "color" | "typo";
type Level = "level1" | "level2" | "level3";

const theme = {
  color: {
    level1: {
      color: "",
    },
    level2: {
      color: "",
    },
  },
  typo: {
    level1: {
      color: "",
    },
    level2: {
      color: "",
    },
    level3: {
      color: "",
    },
  },
};

Next, I wrote the following piece of code:

type Theme = typeof theme;
type Themes = keyof Theme;

type KeyMap<T> = {
  [P in keyof T]: keyof T[P];
} 

type InvertResult<T extends Record<PropertyKey, PropertyKey>> = {
  [P in keyof T as T[P]]: P
}

type LevelToTheme = InvertResult<KeyMap<Theme>>;
type GetThemes<L extends Level> = LevelToTheme[L];

type SelectOne<
  Options extends Themes,
  PriorityTheme extends Themes
> = PriorityTheme extends Extract<Options, PriorityTheme> ?
  PriorityTheme : Exclude<Options, PriorityTheme>;

type PriorityTheme = "color";

const checkLevel = <L extends Level, TReturn = SelectOne<GetThemes<L>, PriorityTheme>>(
  level: L,
): TReturn => {
  const theme: any = level === "level1" || level === "level2" ? "color" : "typo";
  return theme;
};

The above logic can deduce most of the information, but there might be an issue that remains:

interface TestProps {
  currentLevelName: Level;
}

function TestComponent({ currentLevelName }: TestProps) {
  // myTheme is Theme['color'] because PriorityTheme = "color"
  const myTheme = theme[checkLevel(currentLevelName)]; 
  // ERROR Property 'level3' does not exist on type Theme['color']
  const c = myTheme[currentLevelName].color; 
  console.log(c);
}

This problem arises due to currentLevelName: Level; in the component props not being specific enough. If possible, you could handle it at compile-time by knowing the level passed to each component in advance:

interface Test2Props {
  currentLevelName: "level2";
}

function Test2Component({ currentLevelName }: Test2Props) {
  // myTheme is Theme['color'] because it is inferred
  const myTheme = theme[checkLevel(currentLevelName)]; 
  // OK Everything is inferred correctly
  const c = myTheme[currentLevelName].color; 
  console.log(c);
}

interface Test3Props {
  currentLevelName: "level3";
}

function Test3Component({ currentLevelName }: Test3Props) {
  // myTheme is Theme['typo'] because it is inferred
  const myTheme = theme[checkLevel(currentLevelName)];
  // OK Everything is inferred as expected
  const c = myTheme[currentLevelName].color; 
  console.log(c);
}

For a different approach, if predefining levels is not feasible, you may consider having a runtime check and manual casting like this:

theme[checkLevel(levelTwo)][levelTwo].color;

Answer 2

I shifted this code block outside of the main component:

type Color = "color" | "typo";
type Level = "level1" | "level2" | "level3";

const theme = {
  color: {
    level1: {
      color: "",
    },
    level2: {
      color: "",
    },
  },
  typo: {
    level1: {
      color: "",
    },
    level2: {
      color: "",
    },
    level3: {
      color: "",
    },
  },
};

Next, I wrote the following piece of code:

type Theme = typeof theme;
type Themes = keyof Theme;

type KeyMap<T> = {
  [P in keyof T]: keyof T[P];
} 

type InvertResult<T extends Record<PropertyKey, PropertyKey>> = {
  [P in keyof T as T[P]]: P
}

type LevelToTheme = InvertResult<KeyMap<Theme>>;
type GetThemes<L extends Level> = LevelToTheme[L];

type SelectOne<
  Options extends Themes,
  PriorityTheme extends Themes
> = PriorityTheme extends Extract<Options, PriorityTheme> ?
  PriorityTheme : Exclude<Options, PriorityTheme>;

type PriorityTheme = "color";

const checkLevel = <L extends Level, TReturn = SelectOne<GetThemes<L>, PriorityTheme>>(
  level: L,
): TReturn => {
  const theme: any = level === "level1" || level === "level2" ? "color" : "typo";
  return theme;
};

The above logic can deduce most of the information, but there might be an issue that remains:

interface TestProps {
  currentLevelName: Level;
}

function TestComponent({ currentLevelName }: TestProps) {
  // myTheme is Theme['color'] because PriorityTheme = "color"
  const myTheme = theme[checkLevel(currentLevelName)]; 
  // ERROR Property 'level3' does not exist on type Theme['color']
  const c = myTheme[currentLevelName].color; 
  console.log(c);
}

This problem arises due to currentLevelName: Level; in the component props not being specific enough. If possible, you could handle it at compile-time by knowing the level passed to each component in advance:

interface Test2Props {
  currentLevelName: "level2";
}

function Test2Component({ currentLevelName }: Test2Props) {
  // myTheme is Theme['color'] because it is inferred
  const myTheme = theme[checkLevel(currentLevelName)]; 
  // OK Everything is inferred correctly
  const c = myTheme[currentLevelName].color; 
  console.log(c);
}

interface Test3Props {
  currentLevelName: "level3";
}

function Test3Component({ currentLevelName }: Test3Props) {
  // myTheme is Theme['typo'] because it is inferred
  const myTheme = theme[checkLevel(currentLevelName)];
  // OK Everything is inferred as expected
  const c = myTheme[currentLevelName].color; 
  console.log(c);
}

For a different approach, if predefining levels is not feasible, you may consider having a runtime check and manual casting like this:

theme[checkLevel(levelTwo)][levelTwo].color;

Encountering a Typescript issue while trying to access two distinct values dynamically from within a single object

Answer №1

Similar questions

What is the best way to efficiently filter this list of Outcome data generated by neverthrow?

In Angular 8, a communication service facilitates interaction between parents and children

Step-by-step guide on how to stop CDK Drop depending on a certain condition

What is the best way to troubleshoot substrings for accurately reading URLs from an object?

Whenever signing in with Next Auth, the response consistently exhibits the values of "ok" being false and "status" being 302, even

Error message displayed in console due to AJV JSON schema validation when the maximum character limit is exceeded

Struggling to make Cypress react unit testing run smoothly in a ReactBoilerplate repository

What is the best way to display HTML in this particular situation?

Modify the name of the document

The most efficient and hygienic method for retrieving a value based on an observable

Instead of displaying the name, HTML reveals the ID

Acquire Superheroes in Journey of Champions from a REST endpoint using Angular 2

Switching the Require statement to an Import statement led to an error popping up

What is the correct way to express an object in an array?

Issues with functionality of React/NextJS audio player buttons arise following implementation of a state

Potential issue detected in TypeScript relating to the JQuery.html() method

Angular Error: Unable to access property 'users' on a null value

Showcase pictures within an angular smart table

What is the process of converting TypeScript to JavaScript in Angular 2?

What is the best method for eliminating the .vue extension in TypeScript imports within Vue.JS?