Extending Partial Interface in a Typescript Class

Question

Extending Partial Interface in a Typescript Class

My goal is to create a class that inherits all the properties of an interface, without explicitly declaring those properties itself. The interface properties are added during the build process and will be available at runtime.

After coming across this helpful post, I tried using Partial<T> but encountered issues. Despite the following code compiling without errors:

interface Animal {
    name: string;
}

interface HasConstructor {
    constructor: any;
}

type OptionalAnimal = Partial<Animal> & HasConstructor;

class Dog implements OptionalAnimal {
    public constructor() {

    }
    public breed: string;
}

The name property ends up missing on instances of Dog:

var spot = new Dog();
spot.name = "Spot"; //ERROR: Property 'name' does not exist on type 'Dog'

To work around this inconsistency, I had to define another type and reference it like so:

type AnimalDog = Dog & Animal;

var spot: Animal = new Dog() as any;
spot.name = "Spot";

This workaround, however, doesn't allow for creating new instances of AnimalDog properly, necessitating casting to any to align types. As a result, I'm forced to use both AnimalDog and Dog in various sections of my code, leading to compile errors within Dog when dealing with Animal types.

Is there a way in typescript to indicate that a class implements an interface without explicitly listing every interface property?

typescript

Answer 1

Answer №1

A common issue arises with the Partial<T> in TypeScript - it allows you to implement members without requiring you to do so. If a member is not implemented, it will simply not be present in the class.

One way to work around this is by creating a function that returns a class which implements the interface. This returned class does not need to declare any fields, leaving them all as undefined. This approach works since the fields are optional anyway.

interface Animal {
    name: string;
}

type OptionalAnimal = Partial<Animal>;
function autoImplement<T>(): new () => T {
    return class { } as any;
}
class Dog extends autoImplement<OptionalAnimal>() {
    public constructor() {
        super();
    }
    public breed: string;
}

var spot = new Dog();

spot.name = "Spot"; // Now it works

Another method is to cast the Dog class to ensure that the returned instance possesses the members of Animal. However, these additional members will not be accessible from within the class:

interface Animal {
    name: string;
}

class _Dog {
    public constructor() {

    }
    public breed: string;
}

const Dog = _Dog as { new(): _Dog & Partial<Animal> } & typeof _Dog
type Dog = InstanceType<typeof Dog>

var spot = new Dog();

spot.name = "Spot";

Answer 2

A common issue arises with the Partial<T> in TypeScript - it allows you to implement members without requiring you to do so. If a member is not implemented, it will simply not be present in the class.

One way to work around this is by creating a function that returns a class which implements the interface. This returned class does not need to declare any fields, leaving them all as undefined. This approach works since the fields are optional anyway.

interface Animal {
    name: string;
}

type OptionalAnimal = Partial<Animal>;
function autoImplement<T>(): new () => T {
    return class { } as any;
}
class Dog extends autoImplement<OptionalAnimal>() {
    public constructor() {
        super();
    }
    public breed: string;
}

var spot = new Dog();

spot.name = "Spot"; // Now it works

Another method is to cast the Dog class to ensure that the returned instance possesses the members of Animal. However, these additional members will not be accessible from within the class:

interface Animal {
    name: string;
}

class _Dog {
    public constructor() {

    }
    public breed: string;
}

const Dog = _Dog as { new(): _Dog & Partial<Animal> } & typeof _Dog
type Dog = InstanceType<typeof Dog>

var spot = new Dog();

spot.name = "Spot";

Answer 3

Answer №2

In my perspective, the current design appears to have a flaw. The fact that an Animal lacks a name should still classify it as an Animal. Utilizing OptionalAnimal seems redundant since you need to verify the presence of every interface field in all classes implementing OptionalAnimal.

To incorporate optional fields in an interface, consider using a typed union with undefined. This approach provides implementation guarantees from the interface while simplifying the check for optional fields.

To enhance type narrowing, I have included a type field in the interface:

interface Animal {
  type: string;
  name: string | undefined;
}

interface HasConstructor {
  constructor: any;
}

class Dog implements Animal, HasConstructor {
  public constructor() {}
  type = "Dog";
  public breed: string;
  public name: string = undefined;
}

// usage

var animals = new Array<Animal>();

var spot = new Dog();
spot.name = "Spot";
animals.push(spot);

animals.push(new Dog());
animals.push(new Dog());
animals.push(new Dog());

var pluto = new Dog();
pluto.name = "Pluto";
animals.push(pluto);

for (let animal of animals) {
  console.log("Animal:", animal.type, animal.name);
}

Answer 4

In my perspective, the current design appears to have a flaw. The fact that an Animal lacks a name should still classify it as an Animal. Utilizing OptionalAnimal seems redundant since you need to verify the presence of every interface field in all classes implementing OptionalAnimal.

To incorporate optional fields in an interface, consider using a typed union with undefined. This approach provides implementation guarantees from the interface while simplifying the check for optional fields.

To enhance type narrowing, I have included a type field in the interface:

interface Animal {
  type: string;
  name: string | undefined;
}

interface HasConstructor {
  constructor: any;
}

class Dog implements Animal, HasConstructor {
  public constructor() {}
  type = "Dog";
  public breed: string;
  public name: string = undefined;
}

// usage

var animals = new Array<Animal>();

var spot = new Dog();
spot.name = "Spot";
animals.push(spot);

animals.push(new Dog());
animals.push(new Dog());
animals.push(new Dog());

var pluto = new Dog();
pluto.name = "Pluto";
animals.push(pluto);

for (let animal of animals) {
  console.log("Animal:", animal.type, animal.name);
}

Extending Partial Interface in a Typescript Class

Answer №1

Answer №2

Similar questions

The data remains undefined even after being initialized in the constructor

Accepting undefined in rest parameter of typescript

What is the best way to extract a specific property from an object?

Unable to exclude modules from ng-build in Angular CLI, the feature is not functioning as intended

What is the best way to define a function that accepts an object with a specific key, while also allowing for any additional keys to be passed

Receiving a conduit from the fuel supplier with only limited information on hand

What is the correct way to utilize a class variable within the function() method?

Leverage Async Await for Setting Response Data in TypeScript

Extending a Svelte component with a P5JS class: A step-by-step guide

I'm encountering an issue where my query parameter is not being accepted by the tRPC query request

Angular: Implementing a Dark and Light Mode Toggle with Bootstrap 4

Web performance issues noticed with Angular 8 and Webpack 3.7 rendering speed

Discovering the current page using ons-navigator in Onsen UI

What is the process for invoking instance methods dynamically in TypeScript?

Unexpected token { in Fuse-Box when using Typescript

Angular - Enabling the next screen button only after completing multiple selections

Error encountered when updating Angular CLI

Ensuring TypeScript object types are safe by requiring all keys to be within an array of values

Failed to execute start script 'ng serve' in npm start

Sending error messages from server to client (leveraging Express and Backbone)