Generic TypeScript any object that is plain

Question

Generic TypeScript any object that is plain

update I have included my current code to better illustrate the problem:

https://gist.github.com/LukasBombach/7bf255392074509147a250b448388518

Using TypeScript, I aim to define a generic that represents any plain object data structure

class MyClass<T extends {}> {
  public vars: T;

  constructor() {
    this.vars = {};
  }
}

which allows me to use it like this

interface MyType {
  foo: string;
  bar: number;
}

new MyClass<MyType>()

or like this

interface MyType {
  baz: string;
  boo: {
    bam: Function;
    bix: number;
  };
}

new MyClass<MyType>()

However, the implementation I have shown above is not functioning as expected, and I am encountering this error:

class MyClass<T extends {}> {
  public vars: T;

  constructor() {
    this.vars = {};
    //   ^^^^
  }
}

Type '{}' is not assignable to type 'T'.
  '{}' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{}'.ts(2322)

typescript typescript-typings

Answer 1

Answer №1

Specify that the type for vars is a Partial<T>

class MyClass<T> {
  public vars: Partial<T>;

  constructor() {
    this.vars = {};
  }
}

By doing this, TypeScript understands that all properties are optional.

const x = new MyClass<MyType>();

console.log(x.vars.foo); // displays "undefined" without a TS error
console.log(x.vars.thing); // displays "undefined" with a TS error for unknown property.

Once a type is marked as partial, it remains partial. Trying the following will result in a warning.

const x: Partial<FooBar> = {};
const y: FooBar = x; // TS error, as x is partial.

You can enforce the assignment through casting.

const y: FooBar = x as FooBar;

The concept here is that since the variable is already defined as partial, it's uncertain whether it truly contains values.

You can use a run-time type verifier to validate:

export function isMyType(value: any): value is MyType {
   return typeof value['foot'] === 'string'
          && typeof value['bar'] === 'number';
}

const x: Partial<MyType> = {};

if(isMyType(x)) {
    const y: MyType = x; // no TS error due to the isMyType check
}

I can't recall the term for the is operator in TypeScript, but when utilized within a condition block, it alters the type for the checked variable. Hence, TypeScript doesn't raise an issue.

Furthermore, it provides an opportunity to throw a run-time error if the value isn't as expected.

Answer 2

Specify that the type for vars is a Partial<T>

class MyClass<T> {
  public vars: Partial<T>;

  constructor() {
    this.vars = {};
  }
}

By doing this, TypeScript understands that all properties are optional.

const x = new MyClass<MyType>();

console.log(x.vars.foo); // displays "undefined" without a TS error
console.log(x.vars.thing); // displays "undefined" with a TS error for unknown property.

Once a type is marked as partial, it remains partial. Trying the following will result in a warning.

const x: Partial<FooBar> = {};
const y: FooBar = x; // TS error, as x is partial.

You can enforce the assignment through casting.

const y: FooBar = x as FooBar;

The concept here is that since the variable is already defined as partial, it's uncertain whether it truly contains values.

You can use a run-time type verifier to validate:

export function isMyType(value: any): value is MyType {
   return typeof value['foot'] === 'string'
          && typeof value['bar'] === 'number';
}

const x: Partial<MyType> = {};

if(isMyType(x)) {
    const y: MyType = x; // no TS error due to the isMyType check
}

I can't recall the term for the is operator in TypeScript, but when utilized within a condition block, it alters the type for the checked variable. Hence, TypeScript doesn't raise an issue.

Furthermore, it provides an opportunity to throw a run-time error if the value isn't as expected.

Answer 3

Answer №2

The mistake follows a clear line of reasoning.

Looking at the first instance of MyType, here is the modified version of MyClass without the generic:

interface MyType {
  foo: string;
  bar: number;
}

class MyClass {
  public vars: MyType;

  constructor() {
    this.vars = {};
  }
}

Because vars now requires both foo and bar properties, the assignment vars = {} is no longer valid.

Answer 4

The mistake follows a clear line of reasoning.

Looking at the first instance of MyType, here is the modified version of MyClass without the generic:

interface MyType {
  foo: string;
  bar: number;
}

class MyClass {
  public vars: MyType;

  constructor() {
    this.vars = {};
  }
}

Because vars now requires both foo and bar properties, the assignment vars = {} is no longer valid.

Answer 5

Answer №3

Perhaps this could be the solution

class NewClass<U extends {[property: string]: any}> {
  public properties: U;

  constructor() {
    this.properties = {};
  }
}

For example:

interface NewType {
  hello: string;
  world: number;
}
let instance = new NewClass<NewType>();

You can access the properties of instance, which will be of type NewType, and see the hello and world properties in instance.properties

Answer 6

Perhaps this could be the solution

class NewClass<U extends {[property: string]: any}> {
  public properties: U;

  constructor() {
    this.properties = {};
  }
}

For example:

interface NewType {
  hello: string;
  world: number;
}
let instance = new NewClass<NewType>();

You can access the properties of instance, which will be of type NewType, and see the hello and world properties in instance.properties

Generic TypeScript any object that is plain

Answer №1

Answer №2

Answer №3

Similar questions

Ways to utilize multiple tsconfig files within VS Code

Unlock specific elements within the "sub-category" of a combined collection

React Router Issue: Component Not Rendering When <nav> Element Is Incomplete

Ways to access UserProfile in a different Dialogio

Ways to toggle checkboxes to show or hide their child items and subitems

What are the potential downsides of using ID to access HTML elements in React TypeScript?

The defineProps<SomePropType>() method is not rendering the props as expected

Utilize the identical function within the reducer for numerous mat-slide-toggle and checkboxes in component.html

Unable to link to 'amount' because it is not a recognized attribute of 'ng-wrapper'

Navigating between pages has become challenging due to issues with the navbar, sidebar,

No matter the circumstances, the "Unexpected end of form" error consistently appears when attempting to upload files in Express

Regular expressions that identify text located at the conclusion of a URL

The action dispatched by "AuthEffects.register$" is not valid and will have no effect

Guide to Dynamically Including an Element in an Array using Typescript

A guide on utilizing the TypeScript compilerOptions --outDir feature

What steps need to be taken in VSCode to import React using IntelliSense?

Leveraging Generic Types in React with TypeScript for Dynamically Assigning HTML Props based on Element Tags

Iterating over an object and inserting values into a JavaScript object using the ascending count as the identifier

Generate a dynamic interface using properties and options provided in a JavaScript object

Hold tight for the function to complete