Defining a type with limited knowledge: if you only have one key in the object

Question

Defining a type with limited knowledge: if you only have one key in the object

Attempting to establish a type for an object

Consider the following object structure:

{
  a: 123,
  b: "hello",
  c: {
       d:"world"
     }
}

The keys present in the object are unknown.

To define its type, I would use Record<string, any>

However, what if only one key is known and the rest remain unknown?

In this scenario, let's assume I know the type of c as c:{d: string} but the types of other keys are still unidentified. In such cases, I would retain them as Record<string, any>

typescript

Answer 1

Answer №1

Classes of property keys in object types can also incorporate index signatures for known keys, such as string, as long as the property types at known keys align with the property type specified by the index signature. Here's an example based on your scenario:

interface Foo {
  c: { d: string };
  [k: string]: unknown; 
}

This defines that a Foo object has a property c of type {d: string}, and for any key k of type string, the property value associated with that key should belong to the unknown type. Since all types are assignable to unknown, this is considered a valid definition, and your assignment will work as expected:

const obj: Foo = {
  a: 123,
  b: "hello",
  c: {
    d: "world"
  }
}; // valid

Additional Notes:

You have the option to use the any type instead of unknown if preferred, keeping in mind their respective behaviors. Refer to How to undestand relations between types any, unknown, {} and between them and other types? for more details.
Alternatively, you could utilize the Record utility type like Record<string, unknown> in place of {[k: string]: unknown}, as they essentially evaluate to the same result. Personal preference may vary, but I would opt for the direct index signature over using Record. Visit What is the Record type? for more insights.
If opting for Record, directly adding known keys isn't feasible. In such cases, an intersection type like
```
{c: {d: string}} & Record<string, unknown>}
```
becomes necessary. While object type intersections resemble a single combined object type, there are notable distinctions. Whenever possible, I recommend utilizing a single type over multiple intersections for clarity, though this is purely subjective.

Access Playground link for code

Answer 2

Classes of property keys in object types can also incorporate index signatures for known keys, such as string, as long as the property types at known keys align with the property type specified by the index signature. Here's an example based on your scenario:

interface Foo {
  c: { d: string };
  [k: string]: unknown; 
}

This defines that a Foo object has a property c of type {d: string}, and for any key k of type string, the property value associated with that key should belong to the unknown type. Since all types are assignable to unknown, this is considered a valid definition, and your assignment will work as expected:

const obj: Foo = {
  a: 123,
  b: "hello",
  c: {
    d: "world"
  }
}; // valid

Additional Notes:

You have the option to use the any type instead of unknown if preferred, keeping in mind their respective behaviors. Refer to How to undestand relations between types any, unknown, {} and between them and other types? for more details.
Alternatively, you could utilize the Record utility type like Record<string, unknown> in place of {[k: string]: unknown}, as they essentially evaluate to the same result. Personal preference may vary, but I would opt for the direct index signature over using Record. Visit What is the Record type? for more insights.
If opting for Record, directly adding known keys isn't feasible. In such cases, an intersection type like
```
{c: {d: string}} & Record<string, unknown>}
```
becomes necessary. While object type intersections resemble a single combined object type, there are notable distinctions. Whenever possible, I recommend utilizing a single type over multiple intersections for clarity, though this is purely subjective.

Access Playground link for code

Defining a type with limited knowledge: if you only have one key in the object

Answer №1

Similar questions

Expanding the Window Object in Typescript with Next.js Version 13

The combination of Material UI and React Hook Form is encountering an issue with submitting disabled checkboxes

Encountering a Next.js TypeScript Build Error related to the Type 'OmitWithTag<InputFormProps, keyof PageProps, "default">' issue

What is the correct way to set up a custom class instance with specific parameters at the top level?

Tips for stopping webpack from creating compiled files in the source directory

Is there a way in Typescript to convert an array of variables from class A to class B, where class B is an extension of class A?

Angular 6 Subscription Service Does Not Trigger Data Sharing Events

Describing an Object with some typed properties

RouterModule is a crucial external component that is essential for integrating

Customizing the placeholder text for each mat input within a formArray

Tips on preventing the need to redeclare property types in React constructor with Typescript

Is it possible to specify the data type of form control values when using the Angular Reactive form builder?

I encountered an issue while making customizations to my default next.config.js file. Despite attempting various solutions, I consistently encountered an error regarding the invalid src property

Why isn't the customer's name a part of the CFCustomerDetails class?

Is there a way to merge two observables into one observable when returning them?

Best practices for applying the Repository pattern within a NestJS application

The file located at 'node_modules/minimatch/dist/cjs/index' does not contain an exported element called 'IMinimatch'. Perhaps you intended to reference 'Minimatch' instead?

How come a null variable continues to widen to type any even when strictNullChecks is enabled?

Oops! There seems to be an issue with the code: "TypeError: this

Conditional Rendering with Next.js for Smaller Displays