Unveiling the types of an object's keys in Typescript

Question

Unveiling the types of an object's keys in Typescript

I am currently utilizing an object to store a variety of potential colors, as seen below.

  const cardColors = {
    primaryGradientColor: "",
    secondaryGradientColor: "",
    titleTextColor: "",
    borderColor: "",
    categoryTextColor: "",
  };

My goal is to update these properties individually using a function.

  const updateColor = (colorType: typeof cardColors, color: string) => {
    cardColors[colorType] = color;
  }

However, I am encountering the following error:

Type '{ primaryGradientColor: string; secondaryGradientColor: string; titleTextColor: string; borderColor: string; categoryTextColor: string; }' cannot be used as an index type.

I intend to utilize the object as a reference for types in the function parameter, as demonstrated above.

I prefer not to create a separate type for this object since it would require updating in multiple places unnecessarily. Instead, I want to use this object for type verification purposes.

Furthermore, I am new to TypeScript.

typescript react-typescript

Answer 1

Answer №1

If you want to achieve this, follow the steps below.

 type cardColorType = "primaryGradientColor" | "secondaryGradientColor" | "titleTextColor" | "borderColor" | "categoryTextColor";

 let cardColors = Record<cardColorType, string>;

 const updateColor = (colorType: cardColorType, color: string) => {
   cardColors = {
     ...cardColors,
     [colorType]: color
   }
 }

Furthermore, it is advisable to utilize useState for managing cardColors.

 type cardColorType = "primaryGradientColor" | "secondaryGradientColor" | "titleTextColor" | "borderColor" | "categoryTextColor";

 const [cardColors, setCardColors] = useState<Record<cardColorType, string>>({});

 const updateColor = useCallback((colorType: cardColorType, color: string) => {
   setCardColors({
     ...cardColors,
     [colorType]: color
   });
 }, [cardColors, setCardColors]);

Answer 2

If you want to achieve this, follow the steps below.

 type cardColorType = "primaryGradientColor" | "secondaryGradientColor" | "titleTextColor" | "borderColor" | "categoryTextColor";

 let cardColors = Record<cardColorType, string>;

 const updateColor = (colorType: cardColorType, color: string) => {
   cardColors = {
     ...cardColors,
     [colorType]: color
   }
 }

Furthermore, it is advisable to utilize useState for managing cardColors.

 type cardColorType = "primaryGradientColor" | "secondaryGradientColor" | "titleTextColor" | "borderColor" | "categoryTextColor";

 const [cardColors, setCardColors] = useState<Record<cardColorType, string>>({});

 const updateColor = useCallback((colorType: cardColorType, color: string) => {
   setCardColors({
     ...cardColors,
     [colorType]: color
   });
 }, [cardColors, setCardColors]);

Answer 3

Answer №2

To accomplish your goal, you can use the keyof method like this:

const themeColors = {
  backgroundColor: "",
  textColor: "",
  linkColor: "",
  borderColor: "",
  accentColor: "",
};

const updateThemeColor = (colorType: keyof typeof themeColors, color: string) => {
  themeColors[colorType] = color;
}

Answer 4

To accomplish your goal, you can use the keyof method like this:

const themeColors = {
  backgroundColor: "",
  textColor: "",
  linkColor: "",
  borderColor: "",
  accentColor: "",
};

const updateThemeColor = (colorType: keyof typeof themeColors, color: string) => {
  themeColors[colorType] = color;
}

Unveiling the types of an object's keys in Typescript

Answer №1

Answer №2

Similar questions

Eliminate all citation markers in the final compiled result

The error message "Property 'value' is not present on type 'EventTarget & HTMLSelectElement'" indicates that the 'value' property is not recognized on the Event

Struggling to locate the ID linked to a specific ObjectId and encountering issues with the import function?

Ensuring the accuracy of nested objects through class validator in combination with nestjs

A guide to merging two JSON objects into a single array

A convenient utility for generating React components with pre-populated Tailwind CSS classes

Retrieve data that resets to undefined upon reloading from an array

typescript code: transforming object values into keys in typescript

I'm getting errors from TypeScript when trying to use pnpm - what's going

Exploring the features of Typescript involving async/await, Promise, and the use of function

Retrieving selected values from an ngx dropdown list

Implementing OTP input using Material UI textfield

Achieving the desired type of value within a nested record

What is the best way to employ the pick function with optional types within nested TypeScript structures?

Comprehensive compilation of Typescript error codes along with solutions

Attempting to execute a synchronous delete operation in Angular 6 upon the browser closing event, specifically the beforeunload or unload event

Determining the total number of items in an array in Angular efficiently without causing any lag

Generate a binary string using JavaScript and then transform it into C#

"Encountering a problem with the debounceTime operator in rxjs and HTTP requests while using the keyup

The information in Vuex Store and Vue Component is not aligning and syncing properly