Broaden the scope of a `Record<string, string[]>` by adding a new type of property

Question

Broaden the scope of a `Record<string, string[]>` by adding a new type of property

When working in Typescript, it appears that defining the type as shown below should create the desired outcome:

interface RecordX extends Record<string, string[]> {
  id: string
}

However, an error is thrown stating:

Property 'id' of type 'string' is not assignable to string index type 'string[]'. ts(2411)

Is there a way to include a property with a different type within a Record<> utility type?

Exploring Details and General Scenarios + Example

In general, how might one define an object with fixed properties of varying value types, alongside dynamically added properties with consistent value types?

For instance, consider the following object:

const a = {
   // some properties with predefined types
   id: '123',
   count: 123,
   set: new Set<number>(),

   // and some dynamic properties
   dynamicItemList: ['X', 'Y']
   anotherDynamicallyAddedList: ['Y', 'Z']
} as ExtensibleRecord

Can we define a type or interface ExtensibleRecord where:

The types and keys of id, count, and set are fixed as string, number, and Set<number>
The types of dynamicItemList, anotherDynamicallyAddedList, and any future dynamically added properties are all string[]

I have experimented with various approaches, such as:

type ExtensibleRecord = {
  id: string, count: number, set: Set<number>
} & Record<string, string[]>

type ExtensibleRecord = {
  id: string, count: number, set: Set<Number>
} & Omit<Record<string, string[]>, 'id'|'count'|'set'>

interface ExtensibleRecord = {
  id: string,
  count: number,
  set: Set<number>,
  [k: string]: string[]
}

Unfortunately, each attempt results in errors.

This seems like a common and straightforward issue, but I am unable to locate an example or reference for guidance.

playground

typescript

Answer 1

Answer №1

As per the information provided in the official documentation, achieving the desired outcome may not be possible:

The documentation highlights that while string index signatures can be used to represent the "dictionary" pattern effectively, they also require all properties to match their designated return type. This restriction is imposed because a string index asserts that obj.property should also be accessible as obj["property"]. In cases where the type of 'name' does not align with the string index’s type, an error will be flagged by the type system, as illustrated below:
interface NumberDictionary {
    [index: string]: number;
    length: number;    // valid, as length is a number
    name: string;      // error, since 'name' type isn't a subtype of the indexer
}

Nonetheless, an alternate perspective presented on this specific source suggests that excluding certain properties from the index signature is conceivable under particular scenarios. Such exclusion is particularly applicable when modeling a declared variable. Let me quote the relevant section from the same source.

Sometimes, there arises a need for amalgamating properties into the index signature which isn't usually recommended. Ideally, one should resort to the Nested index signature approach as indicated previously. Nevertheless, for situations involving pre-existing JavaScript constructs, such a combination can be achieved via an intersection type. The subsequent example illustrates the issue you might face without employing an intersection:
type FieldState = {
  value: string
}

type FormState = {
  isValid: boolean  // Error: Fails to adhere to the index signature
  [fieldName: string]: FieldState
}
Below demonstrates a workaround utilizing an intersection type:
type FieldState = {
  value: string
}

type FormState =
  { isValid: boolean }
  & { [fieldName: string]: FieldState }
It's important to note that while the above declaration caters to modeling existing JavaScript patterns, generating such an object directly within TypeScript remains unfeasible:
type FieldState = {
  value: string
}

type FormState =
  { isValid: boolean }
  & { [fieldName: string]: FieldState }


// Applying it to an external JavaScript object
declare const foo:FormState; 

const isValidBool = foo.isValid;
const somethingFieldState = foo['something'];

// Attempting to create a TypeScript object using these types will lead to an error
const bar: FormState = { // Error `isValid` not assignable to `FieldState
  isValid: false
}

Lastly, if deemed appropriate, a workaround involves establishing a nested interface structure (refer to the section "Design Pattern: Nested index signature" on this source) wherein the dynamic fields are encapsulated within a property of the interface. For instance:

interface RecordX {
  id: string,
  count: number,
  set: Set<number>,
  dynamicFields: {
    [k: string]: string[]
  }
}

Answer 2

As per the information provided in the official documentation, achieving the desired outcome may not be possible:

The documentation highlights that while string index signatures can be used to represent the "dictionary" pattern effectively, they also require all properties to match their designated return type. This restriction is imposed because a string index asserts that obj.property should also be accessible as obj["property"]. In cases where the type of 'name' does not align with the string index’s type, an error will be flagged by the type system, as illustrated below:
interface NumberDictionary {
    [index: string]: number;
    length: number;    // valid, as length is a number
    name: string;      // error, since 'name' type isn't a subtype of the indexer
}

Nonetheless, an alternate perspective presented on this specific source suggests that excluding certain properties from the index signature is conceivable under particular scenarios. Such exclusion is particularly applicable when modeling a declared variable. Let me quote the relevant section from the same source.

Sometimes, there arises a need for amalgamating properties into the index signature which isn't usually recommended. Ideally, one should resort to the Nested index signature approach as indicated previously. Nevertheless, for situations involving pre-existing JavaScript constructs, such a combination can be achieved via an intersection type. The subsequent example illustrates the issue you might face without employing an intersection:
type FieldState = {
  value: string
}

type FormState = {
  isValid: boolean  // Error: Fails to adhere to the index signature
  [fieldName: string]: FieldState
}
Below demonstrates a workaround utilizing an intersection type:
type FieldState = {
  value: string
}

type FormState =
  { isValid: boolean }
  & { [fieldName: string]: FieldState }
It's important to note that while the above declaration caters to modeling existing JavaScript patterns, generating such an object directly within TypeScript remains unfeasible:
type FieldState = {
  value: string
}

type FormState =
  { isValid: boolean }
  & { [fieldName: string]: FieldState }


// Applying it to an external JavaScript object
declare const foo:FormState; 

const isValidBool = foo.isValid;
const somethingFieldState = foo['something'];

// Attempting to create a TypeScript object using these types will lead to an error
const bar: FormState = { // Error `isValid` not assignable to `FieldState
  isValid: false
}

Lastly, if deemed appropriate, a workaround involves establishing a nested interface structure (refer to the section "Design Pattern: Nested index signature" on this source) wherein the dynamic fields are encapsulated within a property of the interface. For instance:

interface RecordX {
  id: string,
  count: number,
  set: Set<number>,
  dynamicFields: {
    [k: string]: string[]
  }
}

Answer 3

Answer №2

If you're not utilizing it for a class, you can define it using the type:

type RecordWithID = Record<string, string[]> & {
  id: string
}

let x: RecordWithID = {} as any

x.id = 'abc'

x.abc = ['some-string']

Click here to view in TypeScript Playground

Answer 4

If you're not utilizing it for a class, you can define it using the type:

type RecordWithID = Record<string, string[]> & {
  id: string
}

let x: RecordWithID = {} as any

x.id = 'abc'

x.abc = ['some-string']

Click here to view in TypeScript Playground

Answer 5

Answer №3

Pedro's response was spot on and marked the beginning of my journey - thank you!

I was on a quest to find the most straightforward solution for this issue, and stumbled upon a workaround: Object.assign(). It appears to be immune to the type errors that arise when manually constructing these objects or using the spread operator, possibly due to its compatibility with TypeScript as a native JavaScript feature.

The idea of encapsulating Object.assign() in a factory function alongside a parallel type seems quite elegant to me; it might prove beneficial to others as well.

// FACTORY WITH TYPE

// The factory utilizes Object.assign(), which avoids errors, and yields an intersection type
function RecordX(
  fixedProps: { id: string },
  dynamicProps?: Record<string, string[]>
) {
  return Object.assign({}, dynamicProps, fixedProps);
}

// The name of the type conveniently aligns with the factory and equates to:
// 
// type RecordX = Record<string, string[]> & {
//   id: string;
// }
type RecordX = ReturnType<typeof RecordX>;

// USAGE

// Regular usage
const model: RecordX = RecordX({ id: 'id-1' }, {
  foo: ['a'],
});

// Correct type: string
const id = model.id;

// Correct type: string[]
const otherProp = model.otherProp;

// Appropriately throws an error stating "string is not assignable to string[]"
const model2: RecordX = RecordX({ id: 'id-2' }, {
  bar: 'b'
});

Answer 6

Pedro's response was spot on and marked the beginning of my journey - thank you!

I was on a quest to find the most straightforward solution for this issue, and stumbled upon a workaround: Object.assign(). It appears to be immune to the type errors that arise when manually constructing these objects or using the spread operator, possibly due to its compatibility with TypeScript as a native JavaScript feature.

The idea of encapsulating Object.assign() in a factory function alongside a parallel type seems quite elegant to me; it might prove beneficial to others as well.

// FACTORY WITH TYPE

// The factory utilizes Object.assign(), which avoids errors, and yields an intersection type
function RecordX(
  fixedProps: { id: string },
  dynamicProps?: Record<string, string[]>
) {
  return Object.assign({}, dynamicProps, fixedProps);
}

// The name of the type conveniently aligns with the factory and equates to:
// 
// type RecordX = Record<string, string[]> & {
//   id: string;
// }
type RecordX = ReturnType<typeof RecordX>;

// USAGE

// Regular usage
const model: RecordX = RecordX({ id: 'id-1' }, {
  foo: ['a'],
});

// Correct type: string
const id = model.id;

// Correct type: string[]
const otherProp = model.otherProp;

// Appropriately throws an error stating "string is not assignable to string[]"
const model2: RecordX = RecordX({ id: 'id-2' }, {
  bar: 'b'
});

Broaden the scope of a `Record<string, string[]>` by adding a new type of property

Exploring Details and General Scenarios + Example

playground

Answer №1

Answer №2

Answer №3

Similar questions

Implement an interface with a specific number of properties in TypeScript

What sets typescript apart when using a getter versus a regular function?

Having difficulty implementing a versatile helper using Typescript in a React application

What is the best way to design a circular icon using OpenLayers?

Can you explain the purpose of the curly braces found in a function's parameter definition?

Angular 14: Enhance Your User Experience with Dynamic Angular Material Table Row Management

What is the best way to reproduce the appearance of a div from a web page when printing using typescript in Angular 4?

Creating a different type by utilizing an existing type for re-use

Six Material-UI TextFields sharing a single label

Tips on sorting an array within a map function

The property 'enabled' is not a standard feature of the 'Node' type

Merging two arrays concurrently in Angular 7

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

The error message "TypeScript is showing 'yield not assignable' error when using Apollo GraphQL with node-fetch

Can ngFor be utilized within select elements in Angular?

What is the process for running a continuous stream listener in a node.js function?

Exploring Angular 10 Formly: How to Retrieve a Field's Value within a Personalized Formly Wrapper

The object in an Angular 11 REACTIVE FORM may be null

If the value is null, pass it as is; if it is not null, convert it to a date using the

When using a function as a prop in a React component with Typescript generics, the type of the argument becomes unknown