Determine the type of a variable at compile time using TypeScript

Question

Determine the type of a variable at compile time using TypeScript

In my programming project, I have a base class called GenericSetting that is subclassed in approximately 10 or more types.

export class GenericSetting {
  configuration: SettingArgs
  constructor(args: SettingArgs) {
    this.configuration = args
  }
}

As you can see, it also receives arguments which are subclassed themselves to include additional properties required by the subclasses.

I then proceed to create hundreds of settings, keeping them as concise as possible.

FocusPos = new LensValuedSetting({ componentId:LensModule, key:"Focus-ActuatorPosition", displayName:"@{ActuatorPosition}", categories:["@{Lens}", "@{Focus}"], mode:EditMode.ReadOnly, stepSize:0, ctx:{ canId:7, dataType:"UInt16", bit:-1, startByte:2, rounding:1 }})
FocusAuxActive = new LensValuedSetting({ componentId:LensModule, key:"Focus-AuxInputDeviceActive", displayName:"@{AuxInputDeviceActive}", categories:["@{Lens}", "@{Focus}"], mode:EditMode.ReadOnly, stepSize:0, ctx:{ canId:36, dataType:"Byte", bit:1, startByte:6, rounding:1 }}, )
FocusAuxPos = new LensValuedSetting({ componentId:LensModule, key:"Focus-AuxInputDevicePosition", displayName:"@{AuxInputDevicePosition}", categories:["@{Lens}", "@{Focus}"], mode:EditMode.ReadOnly, stepSize:0, ctx:{ canId:36, dataType:"Int16", bit:-1, startByte:2, rounding:1 }}, )

The issue arises because TypeScript infers the arguments passed, making the args argument of type object at runtime, bypassing the constructors of all these subclassed setting arguments.

To address this, I considered creating the type being type-guarded in TypeScript within the base constructor and using Object.assign() like so:

export class GenericSetting {
  configuration: SettingArgs
  constructor(args: SettingArgs) {
    const typedArgs = new <HOW DO I GET CTOR OF ARGS TYPE?>
    Object.assign(typedArgs, args)
    this.configuration = typedArgs
  }
}

However, since I lack information about the type-guarded/inferred type at runtime, is there no way to achieve this in one place? Must I write this logic in every subclass?

javascript typescript es6-class

Answer 1

Answer №1

After struggling with generics in a complex class hierarchy, I finally came up with a solution that seems to work well. The key was adding an extra property to the ...Args type called _cfgType:any. Now, I can pass this property into the ...Args object like so:

  FocusPos = new LensValuedSetting({ _cfgType:LensValuedSettingArgs, componentId:LensModule, key:"Focus-ActuatorPosition", displayName:"@{ActuatorPosition}", categories:["@{Lens}", "@{Focus}"], mode:EditMode.ReadOnly, stepSize:0, ctx:{ canId:7, dataType:"UInt16", bit:-1, startByte:2, rounding:1 }})

The constructor for my GenericSettings base class now looks like this, where it converts the incoming args to the correct type and applies default values from the subclass:

export class GenericSetting extends ItemBase {
  configuration:SettingArgs

  constructor(args:SettingArgs) {
    if (!isNullOrUndefined(args._cfgType)) {
      const typedArgs = new args._cfgType()
      Object.assign(typedArgs, args)
      args = typedArgs
    }
    args['__type'] = args['__proto__'].constructor.name
    super(args)
    this.configuration = args
  }
}

This might not be the most elegant solution, but it allowed me to make minimal changes to my existing code.

Answer 2

After struggling with generics in a complex class hierarchy, I finally came up with a solution that seems to work well. The key was adding an extra property to the ...Args type called _cfgType:any. Now, I can pass this property into the ...Args object like so:

  FocusPos = new LensValuedSetting({ _cfgType:LensValuedSettingArgs, componentId:LensModule, key:"Focus-ActuatorPosition", displayName:"@{ActuatorPosition}", categories:["@{Lens}", "@{Focus}"], mode:EditMode.ReadOnly, stepSize:0, ctx:{ canId:7, dataType:"UInt16", bit:-1, startByte:2, rounding:1 }})

The constructor for my GenericSettings base class now looks like this, where it converts the incoming args to the correct type and applies default values from the subclass:

export class GenericSetting extends ItemBase {
  configuration:SettingArgs

  constructor(args:SettingArgs) {
    if (!isNullOrUndefined(args._cfgType)) {
      const typedArgs = new args._cfgType()
      Object.assign(typedArgs, args)
      args = typedArgs
    }
    args['__type'] = args['__proto__'].constructor.name
    super(args)
    this.configuration = args
  }
}

This might not be the most elegant solution, but it allowed me to make minimal changes to my existing code.

Answer 3

Answer №2

It appears that utilizing generics is the solution for your requirement.

export class CustomGeneric<T extends Setup> extends ItemBase {
  configuration: T
  constructor(setupType: new (arguments: ConfigurationArgs): T, arguments: ConfigurationArgs) {
    const instantiatedArgs = new setupType(arguments)
    ...
  }
}

However, do we really need to instantiate instantiatedArgs within CustomGeneric? This instantiation process seems independent of CustomGeneric, so it may be more beneficial to conduct the instantiation externally.

For example:

constructor(public instanceConfig: ...) { }

Answer 4

It appears that utilizing generics is the solution for your requirement.

export class CustomGeneric<T extends Setup> extends ItemBase {
  configuration: T
  constructor(setupType: new (arguments: ConfigurationArgs): T, arguments: ConfigurationArgs) {
    const instantiatedArgs = new setupType(arguments)
    ...
  }
}

However, do we really need to instantiate instantiatedArgs within CustomGeneric? This instantiation process seems independent of CustomGeneric, so it may be more beneficial to conduct the instantiation externally.

For example:

constructor(public instanceConfig: ...) { }

Determine the type of a variable at compile time using TypeScript

Answer №1

Answer №2

Similar questions

Encountering a deadly mistake with LNK1181 while attempting to npm install web3

Missing Personal toolbar button on Forge Viewer interface

Unable to access the 'data' property because it is undefined in AngularJS, making it impossible to retrieve data from the template to the controller

Error: The gulp-cssmin plugin encountered a TypeError because it attempted to read the property '0' of a null

Issue with Dates in Typescript array elements

Incorporating external JavaScript libraries in Jint

Tips for setting a default value for the local file in React Native

Activate a Bootstrap tab using turbolinks dynamically

Script for converting Fixed Positioned Elements to Static

Making a quick stop in Istanbul and NYC to collect a few important files

Leveraging Parameters from URL in Javascript

Troubles with Katex/ngx-markdown Display in Angular 16

JQuery Ajax encounters a 500 error message due to an internal server issue

Mysterious failure of JavaScript regular expression when encountering the term "tennis"

Creating a dynamic sidebar based on roles in AngularJS

Is there a way to execute code right before the jQuery submit() function is run?

Preventing users from copying and pasting information from my form by implementing javascript restrictions

Using NodeJS to facilitate communication between multiple NodeJS instances while also overseeing operations of a Minecraft server

Unable to trigger click event following regeneration of elements

Setting the width of a parent div tag in CSS based on its children tags