Blend a standard `Record` with a fixed entity

Question

Blend a standard `Record` with a fixed entity

When given the type,

export type ValidationErrors<T extends string> = Partial<Record<T, string>> & { errorsCount: number };

You have the ability to create an object in this manner:

const errors: ValidationErrors<'hello' | 'goodbye'> = {
  errorsCount: 0,
  hello: 'Hello',
}

But when ValidationErrors is used with a generic parameter, you might encounter the error

Type '{ errorsCount: number; }' is not assignable to type 'ValidationErrors<T>'.

. How can this issue be resolved?

Here's how it looks in action:

const doSomething = <T extends string>() => {
  // Type '{ errorsCount: number; }' is not assignable to type 'ValidationErrors<T>'.
  const errors: ValidationErrors<T> = {
    errorsCount: 0,
  }

  return errors
}

const abc = doSomething<'hello'>()

abc.errorsCount // will return a number
abc.hello // will return a string or undefined

Access Playground here

typescript

Answer 1

Answer №1

The reason for the error is that there is a conflict in your intersection types. You are trying to intersect an object that can be accessed with a `string`, and specify that it should return a string, but `errorsCount` returns a `number`. This type safety is implemented to prevent scenarios like this:

const abc = doSomething<'errorsCount'>()
abc.errorsCount //=> never

A simple solution would be to cast it:

const doSomething = <T extends string>(): ValidationErrors<T> => {
  const errors = {
    errorsCount: 0,
  } as ValidationErrors<T>

  return errors
}

A more detailed explanation is that generics are typically used to enhance function parameters. In this case, your `doSomething` function has no parameters, and since all types are erased at compile time, TypeScript will not know if it can guarantee the type of `T`. A preferred way to represent this behavior is shown below:

export type ValidationErrors2={
  [index: string]: string | number
  errorsCount: number;
}

const doSomething2 = (): ValidationErrors2 => {
  const errors: ValidationErrors2 = {
    errorsCount: 0,
  }

  return errors
}

An example similar to what you originally attempted is provided, along with an explanation of the error message generated by TypeScript. For further reading on Object types and subtypes, refer to How to fix TS2322: "could be instantiated with a different subtype of constraint 'object'"?

Additional answers related to your question can be found in the following resources:

Why am I getting an error "Object literal may only specify known properties"?
Link to TS Playground with all my examples

Answer 2

The reason for the error is that there is a conflict in your intersection types. You are trying to intersect an object that can be accessed with a `string`, and specify that it should return a string, but `errorsCount` returns a `number`. This type safety is implemented to prevent scenarios like this:

const abc = doSomething<'errorsCount'>()
abc.errorsCount //=> never

A simple solution would be to cast it:

const doSomething = <T extends string>(): ValidationErrors<T> => {
  const errors = {
    errorsCount: 0,
  } as ValidationErrors<T>

  return errors
}

A more detailed explanation is that generics are typically used to enhance function parameters. In this case, your `doSomething` function has no parameters, and since all types are erased at compile time, TypeScript will not know if it can guarantee the type of `T`. A preferred way to represent this behavior is shown below:

export type ValidationErrors2={
  [index: string]: string | number
  errorsCount: number;
}

const doSomething2 = (): ValidationErrors2 => {
  const errors: ValidationErrors2 = {
    errorsCount: 0,
  }

  return errors
}

An example similar to what you originally attempted is provided, along with an explanation of the error message generated by TypeScript. For further reading on Object types and subtypes, refer to How to fix TS2322: "could be instantiated with a different subtype of constraint 'object'"?

Additional answers related to your question can be found in the following resources:

Why am I getting an error "Object literal may only specify known properties"?
Link to TS Playground with all my examples

Blend a standard `Record` with a fixed entity

Answer №1

Similar questions

Issue with the code flow causing nested function calls to not work as expected

Combine and modify an object coming from a different component

Trouble accessing images from database in Angular 2 with Firebase

Guide to making a Material Design Radial effect animation

What causes an array to accumulate duplicate objects when they are added in a loop?

Printing error stack that includes the source from the source map

The process of exporting a singleton instance

Visual Studio is refusing to highlight my code properly, intellisense is failing to provide suggestions, and essential functions like go to definition are not functioning as expected

Jest encounters a TypeError when interacting with Bootstrap-Vue

Error in Angular 7: ActivatedRoute paramId returns null value

Deactivate specific choices from a dynamically generated dropdown menu in Angular 8

Concealing a navigation tab with Angular4 in Typescript: A tutorial

Using Typescript to pass the setState function as a parameter

What is the significance of var-less variables in TypeScript class definitions?

Using Typescript to remove an element from an array inside another array

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?

Implementing the strictNullCheck flag with msbuild

Utilizing TypeScript interfaces with additional parameter object members does not result in the anticipated compilation error

Switch app engines in real-time based on the URL path with express framework

Encountering Compilation Error When Using RxJS Observable with Angular 6 and Swagger Codegen