Preserving type information depending on the key of an object in TypeScript

Question

Preserving type information depending on the key of an object in TypeScript

One challenge I am facing is handling items with different types (Item) that can exist at various levels in my state (Section.items and subSection.items).

I need to pass these items to a separate React component based on their type (Str or Num).

The current code technically works but the data structuring could be improved.

... (original code remains here for reference)

While the existing array structure for items is not ideal, another concern is ensuring unique item types. For instance, having multiple items of the same type should not be allowed.

... (example demonstrating duplicate item types remains here)

Attempting to use an object structure for Items resolves the previous issue, but triggers TypeScript errors:

... (updated code snippet using objects for Items definition)

The error arises specifically at const value = items[key];

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Items'. No index signature with a parameter of type 'string' was found on type 'Items'.

This simplified version only depicts two types - str and num, however in reality, there are more complex types with varying values beyond primitive types. What would be the most effective way to address this modeling challenge?

typescript react-typescript

Answer 1

Answer №1

To start, I decided to update the name of the component to ItemsComp. This was necessary because you had used the same names for both the type and component. For example: type Items and function Items()

I'm curious, do you have a dynamic count of types? It seems like you don't since you've created separate components for each type such as function Str() and function Num()

If my assumption is correct, would you be able to implement something like this:

function ItemsComp({ items }: { items: Items }) {
  return (
    <div style={{ border: "1px solid blue", padding: 20 }}>
      {items.str && <Str value={items.str} />}
      {items.num && <Num value={items.num} />}
      {/* other types */}
    </div>
  );
}

I encountered no errors while testing this implementation

function ItemsComp({ items }: { items: Items }) {
  return (
    <div style={{ border: "1px solid blue", padding: 20 }}>
      {(["num", "str"] as const).map((key) => {
        const value = items[key];
        if (!value) return null;
        if (key === "num") return <Num key={key} value={Number(value)} />;
        if (key === "str") return <Str key={key} value={`${value}`} />;
        return null;
      })}
    </div>
  );
}

Answer 2

To start, I decided to update the name of the component to ItemsComp. This was necessary because you had used the same names for both the type and component. For example: type Items and function Items()

I'm curious, do you have a dynamic count of types? It seems like you don't since you've created separate components for each type such as function Str() and function Num()

If my assumption is correct, would you be able to implement something like this:

function ItemsComp({ items }: { items: Items }) {
  return (
    <div style={{ border: "1px solid blue", padding: 20 }}>
      {items.str && <Str value={items.str} />}
      {items.num && <Num value={items.num} />}
      {/* other types */}
    </div>
  );
}

I encountered no errors while testing this implementation

function ItemsComp({ items }: { items: Items }) {
  return (
    <div style={{ border: "1px solid blue", padding: 20 }}>
      {(["num", "str"] as const).map((key) => {
        const value = items[key];
        if (!value) return null;
        if (key === "num") return <Num key={key} value={Number(value)} />;
        if (key === "str") return <Str key={key} value={`${value}`} />;
        return null;
      })}
    </div>
  );
}

Answer 3

Answer №2

Make sure to specify as const when defining your array, otherwise it will default to string[]

;["num", "str"].map((key) => {
    key
    // ^?
    // (parameter) key: string
})

;(["num", "str"] as const).map((key) => {
    key
    // ^?
    // (parameter) key: "num" | "str"
})

Answer 4

Make sure to specify as const when defining your array, otherwise it will default to string[]

;["num", "str"].map((key) => {
    key
    // ^?
    // (parameter) key: string
})

;(["num", "str"] as const).map((key) => {
    key
    // ^?
    // (parameter) key: "num" | "str"
})

Answer 5

Answer №3

To simplify the process, one could verify the existence of each property individually:

function DetermineItems({ items }: { items: Items }) {
  return (
    <div style={{ border: "1px solid blue", padding: 20 }}>
      {items.str !== undefined && <Str value={items.str} />}
      {items.num !== undefined && <Num value={items.num} />}
    </div>
  );
}

It is essential to explicitly check for undefined values to prevent issues with empty strings or zero.

Explore Code Sandbox Here

Answer 6

To simplify the process, one could verify the existence of each property individually:

function DetermineItems({ items }: { items: Items }) {
  return (
    <div style={{ border: "1px solid blue", padding: 20 }}>
      {items.str !== undefined && <Str value={items.str} />}
      {items.num !== undefined && <Num value={items.num} />}
    </div>
  );
}

It is essential to explicitly check for undefined values to prevent issues with empty strings or zero.

Explore Code Sandbox Here

Answer 7

Answer №4

Kindly rename and provide your agreement below. It can be kept straightforward by verifying the initial value in the array.

type ElementValueType = string | number
type ElementType<TValue extends ElementValueType = ElementValueType> = { value: TValue }
type ElementsType<TValueFirst extends ElementValueType = ElementValueType> = TValueFirst extends string
    ? [] | [ElementType<string>] | [ElementType<string>, ElementType<number>]
    : [] | [ElementType<number>] | [ElementType<number>, ElementType<string>]

const sample1: ElementsType = [{ value: "123" }, { value: 213 }]
const sample2: ElementsType = [{ value: 123 }, { value: "213" }]
const sample3: ElementsType = [{ value: "123" }]
const sample4: ElementsType = [{ value: 123 }]
const sample5: ElementsType = []
const sample6: ElementsType = [{ value: 123 }, { value: 213 }]
const sample7: ElementsType = [{ value: "123" }, { value: "213" }]
const sample8: ElementsType = [{ value: [] }]
const sample9: ElementsType = ["123", 213]

Tests 1-6 should pass, while 6-9 might not.

type StructureType = {
    title: "Hello"
    elements: ElementsType
    categories: { items: ElementsType }[]
}

const layout: StructureType = {
    title: "Hello",
    elements: [{ value: "123" }, { value: 213 }],
    categories: [
        {
            items: [{ value: 213 }],
        },
    ],
}

Answer 8

Kindly rename and provide your agreement below. It can be kept straightforward by verifying the initial value in the array.

type ElementValueType = string | number
type ElementType<TValue extends ElementValueType = ElementValueType> = { value: TValue }
type ElementsType<TValueFirst extends ElementValueType = ElementValueType> = TValueFirst extends string
    ? [] | [ElementType<string>] | [ElementType<string>, ElementType<number>]
    : [] | [ElementType<number>] | [ElementType<number>, ElementType<string>]

const sample1: ElementsType = [{ value: "123" }, { value: 213 }]
const sample2: ElementsType = [{ value: 123 }, { value: "213" }]
const sample3: ElementsType = [{ value: "123" }]
const sample4: ElementsType = [{ value: 123 }]
const sample5: ElementsType = []
const sample6: ElementsType = [{ value: 123 }, { value: 213 }]
const sample7: ElementsType = [{ value: "123" }, { value: "213" }]
const sample8: ElementsType = [{ value: [] }]
const sample9: ElementsType = ["123", 213]

Tests 1-6 should pass, while 6-9 might not.

type StructureType = {
    title: "Hello"
    elements: ElementsType
    categories: { items: ElementsType }[]
}

const layout: StructureType = {
    title: "Hello",
    elements: [{ value: "123" }, { value: 213 }],
    categories: [
        {
            items: [{ value: 213 }],
        },
    ],
}

Preserving type information depending on the key of an object in TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Uncovering the Mutable Object Type within an Immutable Object

Manipulate and send back information from Observable in Angular

Resolving TS2304 error using Webpack 2 and Angular 2

Tips for maintaining a healthy balance of tasks in libuv during IO operations

The GET API endpoint "download" in express is not able to recognize the requested parameters

The 'replace' property is not found in the 'string' type

The withLatestFrom operator will not trigger with a null value

Using styled-components in React

Encountered a runtime error in NgRx 7.4.0: "Uncaught TypeError: ctor is not a

Tips for organizing an NPM package containing essential tools

Jest doesn't seem to be triggering fs.createReadStream as expected

Comprehending the definition of a function

The variable "headerKey" cannot be assigned a value of type 'string' because its type is 'never'

Typing function parameters that accept generic types "from the identical instance"

Creating an observable using a while loop: A step-by-step guide

I'm looking for a clever approach in Typescript to effectively manage intricate union type challenges when working with the Notion SDK

Angular 12: TypeScript Issue TS2339 - Unable to Locate Property on Type

What is the best way to accurately parse a Date object within a TypeScript class when the HttpClient mapping is not working correctly?

Calculating the minimum value of a number in Angular 8

Typescript - unexpected behavior when using imported JavaScript types: