How to override or redefine a TypeScript class with generics

Question

How to override or redefine a TypeScript class with generics

Presently, I am immersed in a project involving three.js and TypeScript. It has come to my attention that for organizing elements, the Group class is highly recommended. However, I have noticed that the type definitions for Group do not include a feature like this:

meshGroup = new Group<Mesh>()

where the meshGroup.children property is exclusively comprised of Meshes.

My attempt was to create a custom type like this:

declare class MeshGroup extends Group {
  children: Mesh[]
  add(...object: Mesh[]): this
}

meshGroup = new MeshGroup()

Unfortunately, I encountered this console error:

_classes_MeshGroup__WEBPACK_IMPORTED_MODULE_16__.MeshGroup is not a constructor

I searched for a simple way to implement such a wrapper in TypeScript, but without success.

Another approach I considered was to implement a typed array like this:

meshGroup: Mesh[] = []

and maintain synchronization with the class to manage the types, but this adds another layer of complexity.

As I am not an expert in TypeScript, I am wondering if there is a quick type definition trick to implement this "wrapper" definition?

typescript three.js decorator wrapper

Answer 1

Answer №1

When utilizing the group.children method, an array of Object3D[] is returned according to the definition file. This is because a Group can potentially contain various elements such as

Group, Sprite, Line, Point, Mesh, etc.

, hence it defaults to the generic Object3D. However, if it is known that the group will only consist of Mesh objects, it can be explicitly cast as follows:

const group: THREE.Group = new THREE.Group();
const children = group.children as THREE.Mesh[];

// This allows access to Mesh attributes, for example
const mat = children[0].material;

Answer 2

When utilizing the group.children method, an array of Object3D[] is returned according to the definition file. This is because a Group can potentially contain various elements such as

Group, Sprite, Line, Point, Mesh, etc.

, hence it defaults to the generic Object3D. However, if it is known that the group will only consist of Mesh objects, it can be explicitly cast as follows:

const group: THREE.Group = new THREE.Group();
const children = group.children as THREE.Mesh[];

// This allows access to Mesh attributes, for example
const mat = children[0].material;

Answer 3

Answer №2

UPDATE

One way to enhance the Group class and make it more type-safe is by extending it with a specialized class and utilizing the parent functions (known as the decorator pattern):


import { Group } from 'three'
import { Object3D } from 'three/src/core/Object3D'

export default class TypedGroup<T extends Object3D = Object3D> extends Group {
  children: T[] = []

  add(...object: T[]) {
    return super.add(...object)
  }

  remove(...object: T[]): this {
    return super.remove(...object)
  }

  attach(object: T): this {
    return super.attach(object)
  }

  getObjectById(id: number): T | undefined {
    return super.getObjectById(id) as T | undefined
  }

  getObjectByName(name: string): T | undefined {
    return super.getObjectByName(name) as T | undefined
  }

  getObjectByProperty(name: string, value: string): T | undefined {
    return super.getObjectByProperty(name, value) as T | undefined
  }
}

original solution

Thank you for the input @Marquizzo!

That could definitely serve as a viable solution. Another approach I considered was modifying the package through patch-package and editing the Group.d.ts file in this manner:

export class Group<T extends Object3D = Object3D> extends Object3D {
    constructor();
    type: 'Group';
    readonly isGroup: true;
    children: T[];
    add(...object: T[]): this;
    remove(...object: T[]): this;
    attach(object: T): this;
    getObjectById(id: number): T | undefined;
    getObjectByName(name: string): T | undefined;
    getObjectByProperty(name: string, value: string): T | undefined;
}

Incorporating your suggestion, I was also able to achieve type safety on the methods, which was a crucial aspect for me!

While I'm uncertain if this approach will be optimal in the long run, it currently addresses my need for type consistency :D

Answer 4

UPDATE

One way to enhance the Group class and make it more type-safe is by extending it with a specialized class and utilizing the parent functions (known as the decorator pattern):


import { Group } from 'three'
import { Object3D } from 'three/src/core/Object3D'

export default class TypedGroup<T extends Object3D = Object3D> extends Group {
  children: T[] = []

  add(...object: T[]) {
    return super.add(...object)
  }

  remove(...object: T[]): this {
    return super.remove(...object)
  }

  attach(object: T): this {
    return super.attach(object)
  }

  getObjectById(id: number): T | undefined {
    return super.getObjectById(id) as T | undefined
  }

  getObjectByName(name: string): T | undefined {
    return super.getObjectByName(name) as T | undefined
  }

  getObjectByProperty(name: string, value: string): T | undefined {
    return super.getObjectByProperty(name, value) as T | undefined
  }
}

original solution

Thank you for the input @Marquizzo!

That could definitely serve as a viable solution. Another approach I considered was modifying the package through patch-package and editing the Group.d.ts file in this manner:

export class Group<T extends Object3D = Object3D> extends Object3D {
    constructor();
    type: 'Group';
    readonly isGroup: true;
    children: T[];
    add(...object: T[]): this;
    remove(...object: T[]): this;
    attach(object: T): this;
    getObjectById(id: number): T | undefined;
    getObjectByName(name: string): T | undefined;
    getObjectByProperty(name: string, value: string): T | undefined;
}

Incorporating your suggestion, I was also able to achieve type safety on the methods, which was a crucial aspect for me!

While I'm uncertain if this approach will be optimal in the long run, it currently addresses my need for type consistency :D

How to override or redefine a TypeScript class with generics

Answer №1

Answer №2

Similar questions

Error message: The object is not visible due to the removal of .shading in THREE.MeshPhongMaterial by three-mtl-loader

What is the best way to tally up the occurrences of a specific class within an Angular application?

When compiling my TypeScript file, I encountered an error stating that a block-scoped variable cannot be redeclared

The FBXLoader encountered an issue locating the version number within the fbx file

Using TypeScript with Vue to Retrieve Information from a Form

What is the best way to switch from using the three.js JSONLoader to the ObjectLoader?

Limit the frequency of function calls in Typescript

Guide on extracting the id from the path parameter in an HTTP request using Cloud Functions and nodejs

Tips for applying a texture to only one side of a cube without using THREE.MultiMaterial to lower draw calls

Modify a particular attribute in an array of objects

Discover the power of catching Custom DOM Events in Angular

Customizing the main color scheme in Naive-UI with typescript

Is it possible to leverage TypeScript type support in Electron by incorporating require statements within functions or conditions?

I am having difficulty accessing the values stored in my cardTiles variable

Tips on invoking Bootstrap's collapse function without using JQuery

How to retrieve Angular directive name using TypeScript

What is the best way to show the previous month along with the year?

Combine Sonarqube coverage with Istanbuljs/NYC for enhanced code analysis

Form validation is an essential feature of the Angular2 template-driven sub form component

The name 'BrowseAnimationModule' cannot be located