Typescript: extending "this" inside class

Question

I have a class Foo, and I want to extend it dynamically with some literal object that I have. How can I keep the this typed without manually repeating the keys of the literal object in a separate interface?

const someLiteralObject = {
  key1: 'foo',
  key2: 'bar',
  //  ...lots of more keys
}

class Foo {
   constructor(){
      Object.assign(this, someLiteralObject)
   }
   test() {
    console.log(this.key1); //error: Property 'key1' does not exist on type 'Foo'
   }
}

const test = new Foo();
console.log(test.key1); //error: Property 'key1' does not exist on type 'Foo'

Akuukis · Accepted Answer · 2020-03-16 10:13:25Z

2

EDIT: I suggest you to look into Mixins in Typescript and research the difference between Object.assign and applyMixins helper presented there. Perhaps that design pattern is what you actually need instead.

Here's a dirty but strongly typed solution wit using a literal object and not repeating all it's keys as asked. Explanations inline and TypeScript Playground link.

// Hide these helpers away in your `utils.ts` somewhere, see below what they do.
/**
 * Gives Constructor given a instance, like inverse of `InstanceType`.
 *
 * Second optional parameter is argument tuple for the `constructor()`.
 *
 * @todo this interface lacks signature for static methods/properties.
 */
export interface IConstructor<T extends object = object, TA extends unknown[] = unknown[]> {
    new(...args: TA): T
}
/**
 * Overrrides a class to return a instance that includes the given mixin.
 */
export type ClassWithMixin<T extends IConstructor, TMixin extends object> =
    IConstructor<InstanceType<T> & TMixin, ConstructorParameters<T>>


// A mixin many keys and/or methods. Use `typeof someLiteralObject` to use it as interface.
const someLiteralObject = {
  key1: 'foo',
  key2: 'bar',
} as const  // <-- `as const` is optional, but handy.

// `this:` type tells method internal scope that `this` is more than TS thinks by default.
class FooPure {
   constructor(){
      Object.assign(this, someLiteralObject)
   }
   test(this: this & typeof someLiteralObject) {
    console.log(this.key1)
   }
}
// And `ClassWithMixin` type tells all other codebase that `Foo` is more than `FooHidden`.
const Foo = FooPure as ClassWithMixin<typeof FooPure, typeof someLiteralObject>

// Works as expected.
const foo = new Foo()
console.log(foo.key1)
foo.test()
class Bar extends Foo {
  constructor() {
    super()
    this.test()
  }
}
console.log(new Bar())

edited Mar 16, 2020 at 10:13

answered Mar 15, 2020 at 21:55

Akuukis

7296 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

niryo Over a year ago

works! can you explain how Constructor and ExtendedWith types work?

Akuukis Over a year ago

@kundasaba I added explanation to types, as well suggested a mixin pattern. Please consider accepting answer if that answers your question fully.

Max · Accepted Answer · 2020-03-15 19:37:12Z

0

Strongly typed way:

class Some { // <= This is representing your Object
        key1: string;
        key2: string;
}

const someLiteralObject: Some = { // <= As you can see it is of type Some
  key1: 'foo',
  key2: 'bar',
}

class Foo extends Some { // <= Tell TS we are using all the keys from Some
   constructor(){
      super(); // <= needed for ts, useless as we did not define a constructor in Some
      Object.assign(this, someLiteralObject);
   }
   test() {
    console.log(this.key1); // Yeah!
   }
}

const test = new Foo();
console.log(test.key1); // No error!
test.test(); // works fine!

Hacky way (e.g. when you dont know what keys the object will have)

const someLiteralObject = {
  key1: 'foo',
  key2: 'bar',
}

class Foo {
   constructor(){
      Object.assign(this, someLiteralObject)
   }
   test() {
    console.log((this as any).key1); // tell ts to be unsure about the type of this
   }
}

const test = new Foo();
console.log((test as any).key1); // tell ts to be unsure about the type of this

edited Mar 15, 2020 at 19:37

answered Mar 15, 2020 at 19:30

Max

1,0551 gold badge11 silver badges29 bronze badges

1 Comment

niryo Over a year ago

the list of props of the literal object is very big, is there any way to avoid the repetition between Some and someLiteralObject?

Collectives™ on Stack Overflow

Typescript: extending "this" inside class

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related