How to infer class properties type without extending the class

Issue

class XClass {
x = "x";
y = 11;
b = true;
}
let xObj = new XClass();
function getSchema<T extends XClass>(instance: T): Record<keyof T, T[keyof T]> {
const returnObj = {} as Record<keyof T, T[keyof T]>;
for (const key in instance) {
  returnObj[key] = instance[key]; // Direct assignment infers correct types
}
return returnObj;
}
let schema = getSchema(xObj);
type X = typeof schema;


/* type being inferred as 
type X = {
x: string | number | boolean;
y: string | number | boolean;
b: string | number | boolean;
}

// It should be instead :
type X = {
x: string;
y: number;
b: boolean;
}
*/

Typescript is inferring the types as a union. When i want to infer type of class properties each key is being inferred as all the possible types of the class properties.

Solution

You can use the following mapped type:

type ClassProps<T> = {
  [K in keyof T]: T[K]
}

Full code:

class XClass {
  x = "x";
  y = 11;
  b = true;
}

type ClassProps<T> = {
  [K in keyof T]: T[K]
}

function getSchema<T extends XClass>(instance: T): ClassProps<T> {
  const returnObj = {} as ClassProps<T>;
  for (const key in instance) {
    returnObj[key] = instance[key];
  }
  return returnObj;
}

const xObj = new XClass();
const schema = getSchema(xObj);
type X = typeof schema;
// type X = {
//   x: string;
//   y: number;
//   b: boolean;
// }

Playground link

Answered By - Lesiak

Read More

NestJS typeorm generic inheritance of Repository not working, this.function is not a function

Issue

Iam trying to create a custom repository class that extends Repository so I can add custom log functions to be used from all repositories. here is the code.

user.service.ts:

@Injectable()
export class UserService {
    constructor(
        @InjectRepository(User)
        private readonly userRepository: BaseRepository<User>,
    ) {}

    async update(id: string, data: UpdateUserDto): Promise<UpdateResult> {
        return await this.userRepository.updateAndLog(id, data);
    }
}

BaseRepository.ts:

import { Repository, UpdateResult } from 'typeorm';


export class BaseRepository<T> extends Repository<T> {

  async updateAndLog(id: string, data: any): Promise<UpdateResult> {
    const entity = await this.findOne(id as any);
    const savedEntity = await this.update(id, data);
    // log the data here
    return savedEntity;
  }
}

so the output of the function is always:

[Nest] 13820  - 04/11/2023, 12:07:07 PM   ERROR [ExceptionsHandler] this.userRepository.updateAndLog is not a function

I read typeorm documentation about custom repositories: https://typeorm.io/custom-repository#how-to-create-custom-repository

StackOverflow:

• How to do custom repository using TypeORM (MongoDB) in NestJS?
• NestJS/TypeORM: Can custom repository extend from another custom repository which is inside another project?

github: https://github.com/typeorm/typeorm/issues/2097

Yet nothing is working, is there something wrong with the following code ?

Solution

The problem here comes from the @InjectRepository(User) : it injects an instance of Repository instead of the BaseRepository one.

I found this repository that provide a way to override the repository provided by the TypeORM module, but only for a specific entity.

However, we could adapt his approach to provide a generic repository instead :

@Module({
  imports: [TypeOrmModule.forFeature([User])],
  providers: [buildCustomRepositoryProvider<User>(User), UserService],
})
export class UserModule {
}

With a helper file like this :

import { DataSource, Repository, UpdateResult } from 'typeorm';
import { Provider } from '@nestjs/common';
import { getDataSourceToken, getRepositoryToken } from '@nestjs/typeorm';
import { EntityClassOrSchema } from '@nestjs/typeorm/dist/interfaces/entity-class-or-schema.type';

export interface BaseRepository<T> extends Repository<T> {
  this: Repository<T>;

  updateAndLog(id: string, data: any): Promise<UpdateResult>;
}

export function buildCustomRepositoryMethods<T>(): Pick<BaseRepository<T>, 'updateAndLog'> {
  return {
    async updateAndLog(id: string, data: any): Promise<UpdateResult> {
      const entity = await this.findOne({ where: { id: id as any } });
      const savedEntity = await this.update(id, data);
      // log the data here
      return savedEntity;
    },
  };
}

export function buildCustomRepositoryProvider<T>(entity: EntityClassOrSchema): Provider {
  return {
    provide: getRepositoryToken(entity),
    inject: [getDataSourceToken()],
    useFactory: (dataSource: DataSource) => {
      // Override the default repository with a custom one
      return dataSource.getRepository(entity).extend(buildCustomRepositoryMethods<T>());
    },
  };
}

Therefore, the @InjectRepository(User) will inject an instance of Repository<User> extended with the methods provided by the BaseRepository interface.

(Note : using the extend method here to create a custom repository as it's the recommended way since TypeORM 0.3, see here)

Answered By - Enalla

Read More

In typescript, how can I extend a class from it's instance?

Issue

Hello I am trying to basically inherit the Vehicle class within the Car class without using extends. I am wanting to do this because I am making a browser extension and I do not have access to the class, but I do have access to the instance. This works as expected, but typescript is throwing an error on the Car class line

Class 'Car' incorrectly implements interface 'ICar'.
  Type 'Car' is missing the following properties from type 'ICar': steer, accelerate, brake

If the code works as I expect it does, it should log out "Steering" and "Honking"

https://www.typescriptlang.org/playground/CarExample

interface IVehicle {
    steer(): void;
    accelerate(): void;
    brake(): void;
}

interface ICar extends IVehicle {
    honk(): void;
}

class Vehicle implements IVehicle {
    constructor(){
        console.log("Vehicle created");
    }
    steer(): void {
        console.log("Steering");
    }
    accelerate(): void {
        console.log("Accelerating");
    }
    brake(): void {
        console.log("Braking");
    }
}

class Car implements ICar {
    constructor(veh: IVehicle){
        Object.setPrototypeOf(this, Object.getPrototypeOf(veh));
        Object.assign(this, veh);
        // Even with the two lines above, it is saying that the object is missing the methods, "steer", "accelerate", and "brake"
    }
    honk(): void {
        console.log("Honking");
    }
}

const veh = new Vehicle();
const car = new Car(veh);

console.log(car.steer());
console.log(car.honk());

Solution

You need to create a Car interface which extends IVehicle

interface IVehicle {
    steer(): void;
    accelerate(): void;
    brake(): void;
}

interface ICar extends IVehicle {
    honk(): void;
}

class Vehicle implements IVehicle {
    constructor() {
        console.log("Vehicle created");
    }
    steer(): void {
        console.log("Steering");
    }
    accelerate(): void {
        console.log("Accelerating");
    }
    brake(): void {
        console.log("Braking");
    }
}

interface Car extends ICar { } // <----------- SEE THIS CHANGE

class Car {
    constructor(public veh: IVehicle) {
        Object.setPrototypeOf(this, Object.getPrototypeOf(veh));
        Object.assign(this, veh);
        // Even with the two lines above, it is saying that the object is missing the methods, "steer", "accelerate", and "brake"
    }
    honk(): void {
        console.log("Honking");
    }
}

const veh = new Vehicle();
const car = new Car(veh);

console.log(car.steer()); // ok
console.log(car.honk()); // ok

Playground

It is called declaration merging

Answered By - captain-yossarian from Ukraine

Read More

Is there a way to get type information from an inherited generic abstract class in typescript?

Issue

Given a scenario where I want to be able to 'tag' data coming into my system from various sources how might I go about adding this source information onto any type T within my system given some 'source' function that provides this mapping

The shape of the data I want to append this tagged information onto doesn't particularly matter - all I want users of my API to care about is providing a function that will use their type T to determine where the source is coming from and then a simple translation function of the new unioned type.

I've tried doing something like so:

enum TAG {
  EXTERNAL_SYSTEM_A,
  EXTERNAL_SYSTEM_B,
  EXTERNAL_SYSTEM_C,
  UNKNOWN
}

interface TAGSource {
  sourceTypes: TAG | TAG[];
}

// This can be literally any type at all
interface ExternalEntity {
  name: string;
}

interface CalendarEntity{
  id: number;
}

type SourceTagged<T> = T & TAGSource;

abstract class SourceTagMapper {
  tagEntity<T>(entity: T): SourceTagged<T> {
    return { sourceTypes: this.mapSourceTypes(entity), ...entity };
  }
  protected abstract mapSourceTypes<T>(entity: T):  TAG | TAG[];
}

// Example user implementation
class ExternalEntitySourceTagMapper extends SourceTagMapper{
  mapSourceTypes<ExternalEntity>(entity: ExternalEntity): TAG | TAG[] {
    // Error: Property 'name' does not exist on type 'ExternalEntity'
    console.log(entity.name);
    // do some work to map external entity to a tag
    return TAG.EXTERNAL_SYSTEM_A;
  }
}

// Example user implementation
class CalendarEntitySourceTagMapper extends SourceTagMapper {
  mapSourceTypes<CalendarEntity>(entity: CalendarEntity): TAG | TAG[] {
    // Error: Property 'id' does not exist on type 'CalendarEntity'
    console.log(entity.id);
    return [TAG.EXTERNAL_SYSTEM_B, TAG.EXTERNAL_SYSTEM_C];
  }
}

But the problem with this approach is I get no type information in the mapSourceTypes function due to the erasure of type information at runtime. I'm struggling to come up with a design that gives users the ability to just supply a function for mapping and then provides a function for 'providing' this mapping back to them with the added type information.

I tried inheriting from an abstract class with a generic function but lost type information in my base classes but due to type erasure the properties no longer exist in my derived class. Any thoughts or consideration for improvement would be greatly appreciated.

Solution

The generic should be on the class, not the methods ! That allows you to extends a generic class with a specified type.

abstract class SourceTagMapper<T> {
  tagEntity(entity: T): SourceTagged<T> {
    return { sourceTypes: this.mapSourceTypes(entity), ...entity };
  }
  protected abstract mapSourceTypes(entity: T):  TAG | TAG[];
}

// Example user implementation
class ExternalEntitySourceTagMapper extends SourceTagMapper<ExternalEntity>{
  mapSourceTypes(entity: ExternalEntity): TAG | TAG[] {
    // Error: Property 'name' does not exist on type 'ExternalEntity'
    console.log(entity.name);
    // do some work to map external entity to an lvc type
    return TAG.EXTERNAL_SYSTEM_A;
  }
}

// Example user implementation
class CalendarEntitySourceTagMapper extends SourceTagMapper<CalendarEntity> {
  mapSourceTypes(entity: CalendarEntity): TAG | TAG[] {
    // Error: Property 'id' does not exist on type 'CalendarEntity'
    console.log(entity.id);
    return [TAG.EXTERNAL_SYSTEM_B, TAG.EXTERNAL_SYSTEM_C];
  }
}

Playground

Answered By - Matthieu Riegler

Read More

TypeScript functional programming patterns for comfortable object construction?

Issue

I'm having a hard time finding examples (videos or blogs) of functional programming object construction patterns.

I recently encountered the below snipped builder pattern and I like the experience it provides for constructing an object with nesting. When it's a flatter object, I'd normally just use a simple object factory with an opts param to spread with defaults, but passing in a nested array of objects starts to feel messy.

Are there FP patterns that can help make composing an object with nesting like the below comfortable while allowing for calling some methods n times, such as addStringOption?

const data = new SlashCommandBuilder()
    .setName('echo')
    .setDescription('Replies with your input!')
    .addStringOption(option =>
        option.setName('input')
            .setDescription('The input to echo back')
            .setRequired(true)
    )
    .addStringOption(option =>
        option.setName('category')
            .setDescription('The gif category')
            .setRequired(true)
            .addChoices(
                { name: 'Funny', value: 'gif_funny' },
                { name: 'Meme', value: 'gif_meme' },
                { name: 'Movie', value: 'gif_movie' },
  ));

data ends up looking something like:

{
  name: "echo",
  description: "Replies with your input!",
  options: [
    {
      name: "input",
      description: "The input to echo back",
      type: 7, // string option id
      required: true,
      choices: null,
    },
    {
      name: "category",
      description: "The gif category",
      required: true,
      type: 7,
      choices: [
        { name: "Funny", value: "gif_funny" },
        { name: "Meme", value: "gif_meme" },
        { name: "Movie", value: "gif_movie" },
      ],
    },
  ],
};

Below is what I'm playing around with. I'm still working on learning how to type them in TS so I'm sharing the JS.

Allowing for method chaining in the below snippet is maybe contorting FP too much make it like OOP, but I haven't found an alternative that makes construction flow nicely.

An alternative could be standalone builders each returning a callback that returns the updated state then pipe these builders together, but with some builders being callable n times it's hard to make and provide the pipe ahead of time and without the dot notation providing intellisense it seems harder to know what the available functions are to build with.

const buildCommand = () => {
  // data separate from methods.
  let command = {
    permissions: ['admin'],
    foo: 'bar',
    options: [],
  };

  const builders = {
    setGeneralCommandInfo: ({ name, description }) => {
      command = { ...command, name, description };
      // trying to avoid `this`
      return builders;
    },

    setCommandPermissions: (...permissions) => {
      command = { ...command, permissions };
      return builders;
    },

    addStringOption: (callback) => {
      const stringOption = callback(buildStringOption());
      command = { ...command, options: [...command.options, stringOption] };
      return builders;
    },
    // can validate here
    build: () => command,
  };

  return builders;
};

const buildStringOption = () => {
  let stringOption = {
    choices: null,
    type: 7,
  };

  const builders = {
    setName: (name) => {
      stringOption = { ...stringOption, name };
      return builders;
    },

    setDescription: (description) => {
      stringOption = { ...stringOption, description };
      return builders;
    },

    addChoices: (choices) => {
      stringOption = { ...stringOption, choices };
      return builders;
    },

    build: () => stringOption,
  };

  return builders;
};

const command1 = buildCommand()
  .setGeneralCommandInfo({ name: 'n1', description: 'd1' })
  .setCommandPermissions('auditor', 'moderator')
  .addStringOption((option) =>
    option.setName('foo').setDescription('bar').build()
  )
  .addStringOption((option) =>
    option
      .setName('baz')
      .setDescription('bax')
      .addChoices([
        { name: 'Funny', value: 'gif_funny' },
        { name: 'Meme', value: 'gif_meme' },
      ])
      .build()
  )
  .build();

console.log(command1);

Solution

Why not simply create and use data constructors?

const SlashCommand = (name, description, options) =>
  ({ name, description, options });

const StringOption = (name, description, required, type = 7, choices = null) =>
  ({ name, description, required, type, choices });

const Choice = (name, value) => ({ name, value });

const data = SlashCommand('echo', 'Replies with your input!', [
  StringOption('input', 'The input to echo back', true),
  StringOption('category', 'The gif category', true, undefined, [
    Choice('Funny', 'gif_funny'),
    Choice('Meme', 'gif_meme'),
    Choice('Movie', 'gif_movie')
  ])
]);

console.log(data);

TypeScript Playground Example

You can't get more functional than this. Intellisense will also help you with the constructor arguments.

Answered By - Aadit M Shah

Read More

Assigining type to dynamically accessed object values

Issue

I have created a class which has 2 properties storing arrays of tuples with numbers. I also have created a method "getIndex" that accesses those properties dynamically and then checks whether there is a tuple containing identical numbers. The function looks like this:

  getIndex(posX: number, posY: number, pathArr: string) {
    for (let routeCoordinates of this[pathArr]) {
      if (routeCoordinates[0] === posX && routeCoordinates[1] === posY) {
        return this[pathArr].indexOf(routeCoordinates);
      }
    }
  }

The problem is that whenever I try to pass pathArr as a key I get the following error message:

"Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'PathfinderSecondStage'. No index signature with a parameter of type 'string' was found on type 'PathfinderSecondStage'."

I know about generics but solutions I found on the internet do not work as I am dealing with a class instance. Is there a solution that keeps typechecking?

Solution

The immediate solution is pretty simple. All you need to do is change pathArr: string parameter to pathArr: keyof PathfinderSecondStage which will cause TypeScript to create a union type of all the public fields/methods within the class and then extract the this[pathArr] statement and assign it into a variable with the assistance of type assertion to tell it the exact type that is going to be used:

 getIndex(posX: number, posY: number, pathArr: keyof PathfinderSecondStage) {
    const myArray = this[pathArr] as number[][];
    for (let routeCoordinates of myArray) {
      if (routeCoordinates[0] === posX && routeCoordinates[1] === posY) {
        return myArray.indexOf(routeCoordinates);
      }
    }
  }

You can additionally narrow down the allowed variables for the pathArr parameter by specifically defining the names of the fields that contain the arrays which can be traversed within the function as below: getIndex(posX: number, posY: number, pathArr: 'fieldName1'|'fieldName2') {

This will narrow down the number of types TypeScript needs to create a union type with, and if they are all arrays of numbers (number[][]), you will not need to do the type assertion as displayed in the first example.

Answered By - Ovidijus Parsiunas

Read More

Service heritage in Angular 2+

Issue

I have one component that inherits from a parent class, which itself gets injected a service. That service is also used in the child class (the component). Am I obliged to import and inject the service twice, both in the parent and the child class?

It seems like code duplication to me (and a little chicken-and-eggish as the child must import the service to pass it as a parameter to the parent... which already imports it!).

app.component.ts (child class)

import { Component, OnInit } from '@angular/core';
import { HelperClass } from 'src/app/helper-class';
/**** Duplicate import with the parent class HelperClass ****/
import { MyService } from 'src/app/my-service.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class MyComponent extends HelperClass implements OnInit {

  /**** Duplicate injection with HelperClass ****/
  constructor(private service: MyService) {
    super(service);
  }

  ngOnInit(): void {
    this.myService.log('my service called in MyComponent');
    this.helper_class_method();
  }

}

helper-class.ts (parent class)

import { MyService } from 'src/app/my-service.service';

export class HelperClass {
  constructor(public myService: MyService) { }

  helper_class_method() {
    console.log('helper_class method');
  }
}

my-service.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  log(text: string) { console.log(text); }
}

Sample code is available at https://github.com/manu2504/service-heritage-angular/blob/main/src/app/app.component.ts

Solution

I made the helper/parent class a service, that I inject in the component, and this solves the problem.

The component can access the public properties of the helper service, including the services imported by the helper service, and there is no more the need to import myService in the component.

New code:

helper-class.ts

import { Injectable } from '@angular/core';
import { MyService } from 'src/app/my-service.service';

@Injectable({
  providedIn: 'root'
})
export class HelperClass {
  constructor(public myService: MyService) { } 

  helper_class_method() {
    console.log('helper_class method');
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HelperClass } from 'src/app/helper-class';

@Component({
  selector: 'app-my-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class MyComponent implements OnInit {

  // Duplicate injection with HelperClass
  constructor(
    private helper: HelperClass
  ) { }

  ngOnInit(): void {
    // No more the need to declare myService locally
    this.helper.myService.log('my service called in MyComponent');
    this.helper.helper_class_method();
  }
}

Answered By - manuchaud100

Read More

Map is coming up as undefined - OpenLayers

Issue

I am experiencing a strange issue. I am receiving an error message that reads "ERROR TypeError: Cannot read properties of null (reading 'map_') on line 29". Even though I am able to loop the layers on the map to get the list of features on hover (line 23). Please see my code below and let me know if you have any advice on what I can do to fix this.

The way this is set up is, that my component is using a service that holds the information about the map and overlay. All I want to do is set the position of overlay on hover.

Component

import { Component, OnInit } from '@angular/core';
    import { Map } from 'ol';
    import { GeneralMapService } from 'src/app/services/general-map.service';
    
    @Component({
      selector: 'app-application-map',
      templateUrl: './application-map.component.html',
      styleUrls: ['./application-map.component.css']
    })
    
    export class WhereisMapComponent implements OnInit {

  map_: Map;
  overlay: any;

  constructor(private generalMap: GeneralMapService) {
    this.map_ = this.generalMap.map
    
    this.map_.on("pointermove", (e) => {
      
      const positionOfMouse = e.coordinate
      
      this.map_.forEachFeatureAtPixel(e.pixel, function (feature) {
        
        if (feature) {
          const { as_tr_name, ass_track, id, descriptio, media } = feature.getProperties();

          // I receive an error message here.
          console.log(this.map_.getView())
          this.map_.getView().mapOverlay.setPosition(positionOfMouse);
        }

      })

    })

    this.overlay = document.getElementById('informationOverlay')
    this.generalMap.mapOverlay.set("id", "informationOverlay")
    this.generalMap.mapOverlay.setElement(this.overlay)

  }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    this.map_.setTarget("map")  

  }

}

General Service

import { Injectable } from '@angular/core';
import { Map, Overlay, Tile, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { Zoom, ZoomSlider, FullScreen } from 'ol/control';
import XYZ from 'ol/source/XYZ';
import BingMaps from 'ol/source/BingMaps';
import LayerGroup from 'ol/layer/Group';

import { mapDefaultCenter, mapeDefaultZoom } from '../shared/maptilerkey';
import { CreateLayerService } from './create-layer.service';
import { Fill, Stroke, Style } from 'ol/style';
import CircleStyle from 'ol/style/Circle';
import { OverlayService } from './overlay.service';

@Injectable({
  providedIn: 'root'
})
export class GeneralMapService {

  map: Map;
  zoomSlider: ZoomSlider = new ZoomSlider({
    className: "zoom-slider-dashboard"
  })
  mapLayers: LayerGroup = new LayerGroup({
    layers: []
  })
  mapOverlay: Overlay;

  constructor(private createLayers: CreateLayerService, overlayService: OverlayService) {

    const topographicLayer = new TileLayer({
      source: new XYZ({
        url: "https://api.maptiler.com/maps/topographique/{z}/{x}/{y}@2x.png?key=WYPadsIvfisd0PUHFJ6K"
      }),
      visible: false
    })
    topographicLayer.set('name', 'topographic');

    const openStreetMap = new TileLayer({
      source: new OSM(),
      visible: true
    })
    openStreetMap.set('name', 'openstreetmap');

    const bingMaps = new TileLayer({
      preload: Infinity,

      source: new BingMaps({
        key: 'AngczjEvgHNjwD8lTQe3DJ6CoFxavJfGTFCxxaGbS3bIgUW5_qn4k_m510RR53fe',
        imagerySet: "Aerial",
        hidpi: true,
        maxZoom: 19
      }),
      visible: false
    })
    bingMaps.set('name', 'bingmap');

    this.map = new Map({
      view: new View({
        center: mapDefaultCenter,
        zoom: mapeDefaultZoom,
        minZoom: 5,
        projection: "EPSG:3857",
        extent: [15766342.542104144, -5590291.031415702, 16739198.402589425, -4713511.626202316]
      }),
      controls: []
    })

    const mapLayerGroup = new LayerGroup({
      layers: [topographicLayer, openStreetMap, bingMaps]
    })

    this.map.setLayerGroup(mapLayerGroup)
    this.map.addControl(this.zoomSlider)

    // vector layer
    const walkPointStyle = new Style({
      image: new CircleStyle({
        radius: 6,
        fill: new Fill({
          color: '#44c4a1',
        }),
        stroke: new Stroke({
          color: '#fff',
          width: 2,
        }),
      }),
    })

    const walkPoints = this.createLayers.createVectorLayer("/assets/data/walking-data.geojson", walkPointStyle)
    const builtMapLayers = [
      walkPoints
    ]

    this.map.getLayers().extend(builtMapLayers)

    // Overlay registration
    this.mapOverlay = overlayService.overlay
    this.map.addOverlay(this.mapOverlay)
    console.log("this.map", this.map.getOverlays())

  }

  ngAfterContentInit() {

  }

  returnMap() {
    return this.map;
  }

  setMap(updatedMap: Map) {
    this.map = updatedMap;
  }
}

Any sort of help would be appreciated!

Solution

It looks like you need to store context somewhere and then try to use that context forEachFeatureAtPixel method.

Let me show an example:

let that = this;

this.map_.forEachFeatureAtPixel(e.pixel, function (feature) {
        
    if (feature) {
      // ... other code is omitted for the brevity
     
      console.log(that.map_.getView())
      that.map_.getView().mapOverlay.setPosition(positionOfMouse);
    }

Answered By - StepUp

Read More

is there a way to put the method functions of a class, in separate files (javascript)?

Issue

if there is a way to split and make the code of every method in a separate file?

so I can have clean code and be simple and easier to maintain.

for now, I have a structure like this (minimal reproducible example):

// there is also a parentClass
// and I want to make sure that the method be inside parent
// so I can modify all the childs
// with the same method

class Parent {
  // myMethod.js
  myMethod() {
    // my long code
  }

  //secondMethod.js
  secondMethod() {
    // my long code
  }

  // thirdMethod.js
  thirdMethod() {
    // my long code
  }
}
class Child extends Parent {
  constructor() {
    this.someData = "someData";
  }
}

// this need to work after putting the file externally for example
new Child.myMethod();

but I want that the methods be in separate files

something like this:

the problem is how can a method know that is been part of a specific Class and not another Class for example.

---

for example If we want to separate the Child from parentClass, this is easy:

• thanks to import, export, extends

import ParentClass from './ParentClass.js';

// here since we have "extends" the child class know that is been part of Parent.
export default class Child extends ParentClass {
  // my child things and it will work
}

// but methods don't have extends or similar thing? 
// and if yes how we can export them? 
// export as a function? 
// (but they aren't function, they are methods?)

---

so what do I want?

1. method -> file
2. file -> method can be exported
3. method -> parentClass can import it
4. import -> method be part of parentClass
5. method ParentClass -> get extended to all childs
6. method extended -> read (and change) correctly the values of this. (like it was before inside with code splitting)

Solution

Some languages support partial classes, which is similar to what you are requesting. They don't get used a great deal as they make it hard to understand a class when it's internals are scattered around your project.

A more OOP way to solve your problem is to look at the parts you label // my long code.

You can usually break up that code and place it in other classes that you delegate the request to. For example, if your long code does many things:

myMethod(input) {
    // Map the input into a different shape
    // Part of the long code
    // Perform some form of calculation on some values
    // Another part of the long code
    // Create a response object and return it
    // This part probably isn't too long
    return response;
}

You might be able to split these up by creating a class that does mapping and a class that does the calculation. This means the mapping and calculation are easily used from other places and reduces the length of code in your method:

myMethod(input) {
    const mapped = this.specificMapper.map(input);
    const response = this.specificCalculator.calculate(mapped);
    return response;
}

Answered By - Fenton

Read More

Typescript Overwrite Constructor Arguments in Mixin

Issue

In my current typescript project I'm trying to create a mixin so that I can create multiple child classes that inherit from different base classes.

It all works well, but I can't seem to figure out how to tell typescript that the new derived class has different arguments than the base class. Here's an example that illustrates what I'm trying to do here

interface ConstructorFoo {
  bar: string,
}

class Foo {
  public bar: string
  constructor({ bar }: ConstructorFoo) {
    this.bar = bar
  }
}

interface ConstructorBaz extends ConstructorFoo {
  qux: string
}

type FooType = new (...args: any[]) => Foo
const quxMixin = <T extends FooType>(base: T) => {
  return class Baz extends base {
    public qux: string
    constructor (...args: any[]) {
      super(...args)
      const { qux } = args[0] as ConstructorBaz
      this.qux = qux
    }
  }
}

const FooBaz = quxMixin(Foo)


const q = new FooBaz({
  bar: '1',
  qux: '2'  // Argument of type '{ bar: string; qux: string; }' is not assignable to parameter of type 'ConstructorFoo'.
            // Object literal may only specify known properties, and 'qux' does not exist in type 'ConstructorFoo'.
})

But I get the following error as I don't know how to specify class Baz has different argument types:

Argument of type '{ bar: string; qux: string; }' is not assignable to parameter of type 'ConstructorFoo'.
Object literal may only specify known properties, and 'qux' does not exist in type 'ConstructorFoo'.

Thanks for your help and here's a playground link detailing exactly what I want to do

Solution

Try this:

/** A constructor that constructs a T using the arguments A */
type Constructor<T = any, A extends any[] = any[]> = new (...args: A) => T
/** Exclude the first element of an array */
type Tail<T extends any[]> = T extends [any, ...infer U] ? U : never

interface Qux {
  qux: string
}

/** Add the Qux type to the first item in an array */
// If the T is empty, T[0] will be never and T[0] & Qux will also be never, so
// this needs to check if the array is empty
type AddQux<T extends any[]> = T extends [] ? [Qux] : [T[0] & Qux, ...Tail<T>]

// quxMixin accepts a constructor base and returns another constructor
const quxMixin = <T extends Constructor>(base: T): Constructor<
  // that constructs the original class with the qux property
  InstanceType<T> & Qux,
  // using the same arguments as the original constructor except that the first
  // parameter includes the qux property
  AddQux<ConstructorParameters<T>>
> => {
  return class Baz extends base {
    public qux: string
    constructor (...args: any[]) {
      super(...args)
      const { qux } = args[0] as Qux
      this.qux = qux
    }
  }
}

const FooBaz = quxMixin(Foo)

const q = new FooBaz({ bar: '1', qux: '2' })
q.qux // string

This uses the utility types InstanceType and ConstructorParameters:

/** Obtain the return type of a constructor function type */
type InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any

/** Obtain the parameters of a constructor function type in a tuple */
type ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never

Playground link

Answered By - cherryblossom

Read More

How can I write below code in better way to keep looping endlessly?

Issue

This is my first time on Stackoverflow so please bear with me if my question is not clear !. I am trying to fetch all rows from tblproperty and loop through the array to convert it into an associative array. Once the property is fetched i am checking if the property is of the page or object. If the property if of the page we add the same in the propertiesArray. If the property is of object I am checking if the object is of the page or child of another parent object. The code below works for 3 levels (meaning Parent > Child > Child > Child). However I need to improve it to loop continuously if the object is of another parent object. Need advice how can I improve it. Further below code is in PHP on Server Side. I am looking to take it to Client Side. Any way to do it in Angular JS. Thanks in advance to all who chose to help !

$DBObj->querySelect("*","tblproperty","pgnid = $pageNID and propisactive = 1");

if($DBObj->fetchNumOfRows() >= 1){
    $queryRecords = $DBObj->fetchAllRecordsArray();
    $rows = $DBObj->fetchNumOfRows();
    
    for($i = 0; $i < $rows; $i++){
        //Properties of Objects are Loaded to Object Properties Array
        
        switch ($queryRecords[$i]['propof']){
            case "page":{
                if(array_key_exists($queryRecords[$i]['propofid'],$propertiesArray) != 1)
                    $propertiesArray[$queryRecords[$i]['propofid']] = [];
                array_push($propertiesArray[$queryRecords[$i]['propofid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto']));                                        
                break;
            }
                
            case "object":{
                $DBObj->querySelect("*","tblobject","pgnid = $pageNID and objisactive = 1 and objnid = ".$queryRecords[$i]['propofnid']);
                $queryRecord = ($DBObj->fetchNumOfRows() == 1)?$DBObj->fetchRecordArray():"";
                
                if($queryRecord != "")
                    switch($queryRecord['objof']){
                        case "object":{
                            $DBObj->querySelect("*","tblobject","pgnid = $pageNID and objisactive = 1 and objnid = ".$queryRecord['objofnid']);
                            $queryRecord1 = ($DBObj->fetchNumOfRows() == 1)?$DBObj->fetchRecordArray():"";

                            if($queryRecord1 != "")
                                switch($queryRecord1['objof']){
                                    case "object":{
                                        $DBObj->querySelect("*","tblobject","pgnid = $pageNID and objisactive = 1 and objnid = ".$queryRecord1['objofnid']);
                                        $queryRecord2 = ($DBObj->fetchNumOfRows() == 1)?$DBObj->fetchRecordArray():"";
                                        
                                        if($queryRecord2 != "")
                                            switch($queryRecord2['objof']){
                                                case "object":{
                                                    if(array_key_exists($queryRecord2['objofid'].$queryRecord1['objofid'].$queryRecord['objofid'].$queryRecords[$i]['propofid'],$propertiesArray) != 1)
                                                        $propertiesArray[$queryRecord2['objofid'].$queryRecord1['objofid'].$queryRecord['objofid'].$queryRecords[$i]['propofid']] = [];
                                                    array_push($propertiesArray[$queryRecord2['objofid'].$queryRecord1['objofid'].$queryRecord['objofid'].$queryRecords[$i]['propofid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto']));
                                                    break;
                                                }
                                                    
                                                case "page":{
                                                    if(array_key_exists($queryRecord1['objofid'].$queryRecord['objofid'].$queryRecords[$i]['propofid'],$propertiesArray) != 1)
                                                        $propertiesArray[$queryRecord1['objofid'].$queryRecord['objofid'].$queryRecords[$i]['propofid']] = [];
                                                    array_push($propertiesArray[$queryRecord1['objofid'].$queryRecord['objofid'].$queryRecords[$i]['propofid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto'])); 
                                                    break;
                                                }
                                            }
                                        break;
                                    }

                                    case "page":{
                                        if(array_key_exists($queryRecord['objofid'].$queryRecords[$i]['propofid'],$propertiesArray) != 1)
                                            $propertiesArray[$queryRecord['objofid'].$queryRecords[$i]['propofid']] = [];
                                        array_push($propertiesArray[$queryRecord['objofid'].$queryRecords[$i]['propofid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto']));
                                        break;
                                    }
                                }
                            break;
                        }

                        case "page":{
                            if(array_key_exists($queryRecords[$i]['propofid'],$propertiesArray) != 1)
                                $propertiesArray[$queryRecords[$i]['propofid']] = [];
                            array_push($propertiesArray[$queryRecords[$i]['propofid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto']));                            
                            break;
                        }
                    }
                break;
            }
                
            case "element":{                    
                $DBObj->querySelect("*","tblelement","pgnid = $pageNID and elisactive = 1 and elnid = ".$queryRecords[$i]['propofnid']);
                $queryRecord = ($DBObj->fetchNumOfRows() == 1)?$DBObj->fetchRecordArray():"";  
                
                if($queryRecord != ""){
                    $DBObj->querySelect("*","tblobject","pgnid = $pageNID and objisactive = 1 and objnid = ".$queryRecord['elofnid']);
                    $queryRecord1 = ($DBObj->fetchNumOfRows() == 1)?$DBObj->fetchRecordArray():"";
                
                    if($queryRecord1 != "")
                        switch($queryRecord1['objof']){
                            case "object":{
                                $DBObj->querySelect("*","tblobject","pgnid = $pageNID and objisactive = 1 and objnid = ".$queryRecord1['objofnid']);
                                $queryRecord2 = ($DBObj->fetchNumOfRows() == 1)?$DBObj->fetchRecordArray():"";
                                
                                if($queryRecord2 != ""){
                                    switch($queryRecord2['objof']){
                                        case "object":{
                                            $DBObj->querySelect("*","tblobject","pgnid = $pageNID and objisactive = 1 and objnid = ".$queryRecord2['objofnid']);
                                            $queryRecord3 = ($DBObj->fetchNumOfRows() == 1)?$DBObj->fetchRecordArray():"";
                                            
                                            if($queryRecord3 != ""){
                                                switch($queryRecord3['objof']){
                                                    case "object":{
                                                        
                                                        break;
                                                    }
                                                        
                                                    case "page":{
                                                        if(array_key_exists($queryRecord3['objid'].$queryRecord2['objid'].$queryRecord1['objid'].$queryRecord['elid'],$propertiesArray) != 1)
                                                            $propertiesArray[$queryRecord3['objid'].$queryRecord2['objid'].$queryRecord1['objid'].$queryRecord['elid']] = [];
                                                        array_push($propertiesArray[$queryRecord3['objid'].$queryRecord2['objid'].$queryRecord1['objid'].$queryRecord['elid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto']));
                                                        break;
                                                    }
                                                }
                                            }
                                            break;
                                        }
                                            
                                        case "page":{
                                            if(array_key_exists($queryRecord2['objid'].$queryRecord1['objid'].$queryRecord['elid'],$propertiesArray) != 1)
                                                $propertiesArray[$queryRecord2['objid'].$queryRecord1['objid'].$queryRecord['elid']] = [];
                                            array_push($propertiesArray[$queryRecord2['objid'].$queryRecord1['objid'].$queryRecord['elid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto']));
                                            break;
                                        }
                                    }                                    
                                }                                                                
                                break;
                            }

                            case "page":{
                                if(array_key_exists($queryRecord1['objid'].$queryRecord['elid'],$propertiesArray) != 1)
                                    $propertiesArray[$queryRecord1['objid'].$queryRecord['elid']] = [];
                                array_push($propertiesArray[$queryRecord1['objid'].$queryRecord['elid']],array($queryRecords[$i]['propid'] => $queryRecords[$i]['propvalue'],'proplinkedto' => $queryRecords[$i]['proplinkedto']));                            
                                break;
                            }
                        }
                }
                break;
            }
        }
    }
} 

Solution

To iterate your object recursively you need ... recursion

Create separate function with conditions inside.

• If current item belongs to page - push to array and return
• If current item belongs to object - take child element and repeat this check again.

This is pseudo code, adjust how you need it:

if($DBObj->fetchNumOfRows() >= 1){
    $queryRecords = $DBObj->fetchAllRecordsArray();
    $rows = $DBObj->fetchNumOfRows();
    
    for($i = 0; $i < $rows; $i++){
        recursiveAction($queryRecords[$i]);
    }
}

function recursiveAction(&$item, $propertiesArray) {
    switch ($item['propof']) {
        case 'page':
            // No need for that "if" check
            $propertiesArray[$item['propofid']][] = [$item['propid'] => $item['propvalue'],'proplinkedto' => $item['proplinkedto']];

            break;
        case 'object':
            $DBObj->querySelect(...);
            $queryRecord = $DBObj->fetchNumOfRows() == 1 ? $DBObj->fetchRecordArray() : "";

            if (!empty($queryRecord)) {
                // Here we convert common part of "object" into recursion
                recursiveAction($queryRecord);
            }

            break;
      case 'element':
            ...
    }
}

Answered By - Justinas

Read More

How to call a function with data from foreach method in HTML string?

Issue

I am generating some html card and buttons from an array. I want to call a function with the data from the foreach. But I can't seem to figure it out.

I am getting the problem in the renderProducts() method.

/// <reference path="coin.ts" />
/// <reference path="product.ts" />
/// <reference path="productFactory.ts" />

enum VendingMachineSize {
  small = 6,
  medium = 9,
  large = 1,
}

class Cell {
  constructor(public product: CocoCola) {}
  stock: 3;
  sold: false;
}

class VendingMachine {
  private totalMoney = 0;
  private totalMoneyText = <HTMLSpanElement>document.getElementById("total-money");
  private containerElement = <HTMLDivElement>document.querySelector(".machine");
  allCoins: number[] = [0];
  cells = [];
  selectedCells = [new Cell(new CocoCola())];

  set size(givenSize: VendingMachineSize) {
    this.cells = [];

    for (let index = 0; index < givenSize; index++) {
      let product = ProductFactory.GetProduct();
      this.cells.push(new Cell(product));
    }
    this.renderProducts();
  }

  constructor() {
    console.log("I am vending machine!");
  }

  select(cell: Cell) {
    cell.sold = false;
    this.selectedCells.push(cell);
    console.log(this.selectedCells);
  }

  acceptCoin(coin: Quarter): void {
    this.totalMoney += coin.Value;
    this.totalMoneyText.textContent = this.totalMoney.toString();
  }

  renderProducts() {
    this.cells.forEach((product) => {
      let html = `<div class="card " style="width: 18rem">
        <img src=${product.product.category.getImageUrl()} class="" alt="..." />
        <div class="card-body">
          <h5 class="card-title">${product.product.name}</h5>
          <p class="card-text">
           ${product.product.description}
          </p>
          <button type="button" class="btn btn-outline-dark w-100 select-btn"  onclick="machine.select(${product})">💰 ${
        product.product.price
      }</button>
        </div>
      </div>`;
      this.containerElement.insertAdjacentHTML("beforeend", html);
    });
  }
}

<button type="button" class="btn btn-outline-dark w-100 select-btn" onclick="machine.select(${product})">💰 ${product.product.price}</button> I want this button to have an onclick listener with argument of product

When I do it like this it give me this error: Uncaught SyntaxError: Unexpected identifier (at (index):33:63)

This is where I created the instance of the class

/// <reference path="vendingMachine.ts" />

const machine = new VendingMachine();
machine.size = VendingMachineSize.medium;

Solution

You can not do it like that because you use string interpolation.

When you type

`some text ${product}`

and product is Object in your scope, javascript will call toString method on object and returns [Object object] <- here is the error that you recieved: **Uncaught SyntaxError: Unexpected identifier**

When you're trying to interpolate onclick handler, you should produce valid JS code, for example:

<div onclick="machine.select(${number})"></div>,
<div onclick="machine.select('${string}')"></div>,
<div onclick="machine.select(JSON.parse('${JSON.encode(product)}'))"></div>

---

I recommend set listener after generating html; For example:

<button type="button" data-product="${product.product.name}" class="btn btn-outline-dark w-100 select-btn">💰 ${product.product.price}</button>
...
this.containerElement.insertAdjacentHTML("beforeend", html);
this.containerElement.querySelectorAll('button').forEach(item => {
  item.addEventListener('click', () => {
    this.select(item.dataset.product)
  })
})

Answered By - Фарид Ахмедов

Read More

Typescript: How to extend two classes?

Issue

I want to save my time and reuse common code across classes that extend PIXI classes (a 2d webGl renderer library).

Object Interfaces:

module Game.Core {
    export interface IObject {}

    export interface IManagedObject extends IObject{
        getKeyInManager(key: string): string;
        setKeyInManager(key: string): IObject;
    }
}

My issue is that the code inside getKeyInManager and setKeyInManager will not change and I want to reuse it, not to duplicate it, here is the implementation:

export class ObjectThatShouldAlsoBeExtended{
    private _keyInManager: string;

    public getKeyInManager(key: string): string{
        return this._keyInManager;
    }

    public setKeyInManager(key: string): DisplayObject{
        this._keyInManager = key;
        return this;
    }
}

What I want to do is to automatically add, through a Manager.add(), the key used in the manager to reference the object inside the object itself in its property _keyInManager.

So, let's take an example with a Texture. Here goes the TextureManager

module Game.Managers {
    export class TextureManager extends Game.Managers.Manager {

        public createFromLocalImage(name: string, relativePath: string): Game.Core.Texture{
            return this.add(name, Game.Core.Texture.fromImage("/" + relativePath)).get(name);
        }
    }
}

When I do this.add(), I want the Game.Managers.Manager add() method to call a method which would exist on the object returned by Game.Core.Texture.fromImage("/" + relativePath). This object, in this case would be a Texture:

module Game.Core {
    // I must extend PIXI.Texture, but I need to inject the methods in IManagedObject.
    export class Texture extends PIXI.Texture {

    }
}

I know that IManagedObject is an interface and cannot contain implementation, but I don't know what to write to inject the class ObjectThatShouldAlsoBeExtended inside my Texture class. Knowing that the same process would be required for Sprite, TilingSprite, Layer and more.

I need experienced TypeScript feedback/advice here, it must be possible to do it, but not by multiple extends since only one is possible at the time, I didn't find any other solution.

Solution

There is a little known feature in TypeScript that allows you to use Mixins to create re-usable small objects. You can compose these into larger objects using multiple inheritance (multiple inheritance is not allowed for classes, but it is allowed for mixins - which are like interfaces with an associated implenentation).

More information on TypeScript Mixins

I think you could use this technique to share common components between many classes in your game and to re-use many of these components from a single class in your game:

Here is a quick Mixins demo... first, the flavours that you want to mix:

class CanEat {
    public eat() {
        alert('Munch Munch.');
    }
}

class CanSleep {
    sleep() {
        alert('Zzzzzzz.');
    }
}

Then the magic method for Mixin creation (you only need this once somewhere in your program...)

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
             if (name !== 'constructor') {
                derivedCtor.prototype[name] = baseCtor.prototype[name];
            }
        });
    }); 
}

And then you can create classes with multiple inheritance from mixin flavours:

class Being implements CanEat, CanSleep {
        eat: () => void;
        sleep: () => void;
}
applyMixins (Being, [CanEat, CanSleep]);

Note that there is no actual implementation in this class - just enough to make it pass the requirements of the "interfaces". But when we use this class - it all works.

var being = new Being();

// Zzzzzzz...
being.sleep();

Answered By - Fenton

Read More

How to auto-populate an abstract property?

Issue

I have an existing abstract class, say Vehicle and I want to create an intermediate class to reduce repetition of abstract properties in my instantiatable classes.

The problem:

abstract class Vehicle {
  abstract wheelCount: number
  abstract tireCount: number
}

class Car extends Vehicle {
  wheelCount = 4
  tireCount = 4 // Tire count is the same as wheel count
}

class Truck extends Vehicle {
  wheelCount = 4
  tireCount = 4 // Tire count is the same here too
}

class Bike extends Vehicle {
  wheelCount = 2
  tireCount = 2 // Tire count is the same - I really need to abstract this
}

An invalid solution:

abstract class Vehicle {
  abstract wheelCount: number
  abstract tireCount: number
}

// I want an intermediate class like this
abstract class StandardVehicle extends Vehicle {
  tireCount = wheelCount
}

class Car extends StandardVehicle {
  wheelCount = 4
}

class Truck extends StandardVehicle {
  wheelCount = 4
}

class Bike extends StandardVehicle {
  wheelCount = 2
}

What are the valid solutions to this please?

Please note, there are cases where wheelCount and tireCount will differ so I can't combine these properties in Vehicle.

Solution

It is possible to implement properties with getter and setter and then just assign their values in constructor.

So code would like this:

abstract class Vehicle {
  abstract wheelCount: number
  abstract tireCount: number
}

and class with properties and corresponding getters and setters:

abstract class StandardVehicle extends Vehicle {
    private _wheelCount!: number;
    get wheelCount(): number {
        return this._wheelCount;
    }
    set wheelCount(value: number) {
        this._wheelCount = value;
    }


    private _tireCount!: number;
    get tireCount(): number {
        return this._tireCount;
    }
    set tireCount(value: number) {
        this._tireCount = value;
    }

    constructor(wheelCount: number) {
        super()
        this._wheelCount = this._tireCount = wheelCount
    }
}

and it is possible to assign some common value in concrete class:

class Teasl extends StandardVehicle {
    constructor(value: number) {
        super(value)
    }
}

and you can call your class like this:

const anExampleVariable = new Teasl(88)

As an alternative, the initialization function can be created to populate with values.

So the code would look like this. Abstractions:

abstract class Vehicle {
  abstract wheelCount: number
  abstract tireCount: number
}

abstract class StandardVehicle extends Vehicle {
  constructor(value:number) {
      super()
      this.init(value)
  }

    private init(value:number) {
        this.wheelCount = this.tireCount = value
    }
}

and concrete implementations:

class Foo extends StandardVehicle {
    wheelCount!: number
    tireCount!: number

    constructor(value: number) {
        super(value)
    }
}

and usage:

const anExampleVariable = new Foo(88)
console.log(anExampleVariable)

Answered By - StepUp

Read More

Typescript error: An outer value of 'this' is shadowed by this container

Issue

I had an error in a Typescript class method declaration, but I don't understand how the error message relates back to the bug.

The message seems to be saying that 'this' is of type any, but we are in a class definition, and so I thought 'this' was really clear.

Can someone please explain how the error message relates back to the bug?

Original method:

calcSize = function() {
    return this.width * this.length; // Error on this line
};

// Error text: 'this' implicitly has type 'any' because it does not 
//have a type annotation.ts(2683)
//app.ts(39, 16): An outer value of 'this' is shadowed by this container.

fix:

calcSize() {
    return this.width * this.length;
};

Full context (fixed):

class BaseObject {
    constructor(
        public width: number = 0,
        public length: number = 0
        ) {}

};

class Rectangle extends BaseObject {

    constructor(public width: number = 0, public length: number = 0) {
        super(width, length);
    }

    calcSize() {
        return this.width * this.length;
    };
}

Solution

In TypeScript (and ES6) exists two kinds of functions: The classic function declaration and the arrow function. Where the classic function declaration has the default floating binding logic for the this keyword - the arrow function will constantly use the value for this of the context containing the arrow function. In the example this will be the instance of the surrounding class.

class Rectangle extends BaseObject {
// ..
  calcSize = function() {
    // the keyword function will cause this to be floating
    // since the function is explicitly assigned to calcSize
    // (older) TypeScript may not infer the type of this.
    // the value of this can be re-bind by changing the context
    // using bind or call
    // -> Value of this defaults to the class instance
    return this.width * this.length; // (potential) type Error on this line
  };
  calcSizeAsMember () {
    // is also a classic function which will use floating binding
    // therefore this will be the type of the containing class
    // the value of this can be re-bind by changing the context
    // using bind or call
    // -> Value of this defaults to the class instance
    return this.width * this.length; 
  };
  calcSizeAsArrowFunction = () => {
    // is an arrow function which has a constantly bind this keyword, 
    // it is not possible to change the binding afterwords (not re-binding)
    // type of this is constantly the type of the containing class
    // changing the context, use bind or call will have no effect
    // -> this will always remain to the instance of the class
    return this.width * this.length; 
  };
};

Answered By - Matthias Fischer

Read More

What is the difference between interface and abstract class in Typescript?

Issue

I wrote a couple of lines of code to experiment and differentiate between these two: interface and abstract class.

I found out that they have the same restriction.

interface IPerson {
  name: string;
  talk(): void;
}

interface IVIP {
  code: number;
}

abstract class Person {
  abstract name: string;
  abstract talk(): void;
}

class ManagerType1 extends Person {
  // The error I get is that I need to implement the talk() method
  // and name property from its base class.
}

class ManagerType2 implements IPerson {
  // The error I get is that I need to implement the talk() method 
  // and the name property from the interface.
}


class ManagerType3 implements IPerson, IVIP {
  // Now the error I get is that I need to implement all the 
  // properties and methods of the implemented interfaces to the derived class
}

As what I found is, there are no clear differences between these two since they both implement the same restriction. The only thing I notice is inheritance and implementation.

1. A class can only extend to a single base class
2. A class can implement multiple interfaces.

Did I catch it right? If so when do I need to use one?

UPDATE

I do not know if this is the right answer but you can really use BOTH depending on your situation. OOP is really cool.

class ManagerType3 extends Person implements IPerson, IVIP {
  // Now the restriction is that you need to implement all the abstract
  // properties and methods in the base class and all 
  // the properties and methods from the interfaces
}

Solution

Interfaces

An interface is a contract that defines the properties and what the object that implements it can do. For example, you could define what can do a Plumber and an Electrician:

interface Electrician {
  layWires(): void
}

interface Plumber {
  layPipes(): void
}

Then, you can consume the services of your interfaces:

function restoreHouse(e: Electrician, p: Plumber) {
  e.layWires()
  p.layPipes()
}

Notice that the way you have to implement an interface is free. You can do that by instantiating a class, or with a simple object:

let iAmAnElectrician = {
  layWires: () => { console.log("Work with wires…") }
}

An interface doesn't exist at all at runtime, so it is not possible to make an introspection. It is the classic JavaScript way to deal with object programming, but with a good control at compile time of the defined contracts.

Abstract classes

A class is both a contract and the implementation of a factory. An abstract class is also an implementation but incomplete. Especially, an abstract class exists at runtime, even if it has only abstract methods (then instanceof can be used).

When you define an abstract class, you often try to control how a process has to be implemented. For example, you could write something like this:

abstract class HouseRestorer {
  protected abstract layWires(): void
  protected abstract layPipes(): void
  restoreHouse() {
    this.layWires()
    this.layPipes()
  }
}

This abstract class HouseRestorer defines how the methods layWires and layPipes will be used, but it is up to a child class to implement the specialized treatments before it can be used.

Abstract classes are a traditional OOP approach, which is not traditional in JavaScript.

Both approaches allow the same things to be done. But they are two different ways of solving a problem.

Answered By - Paleo

Read More

Typescript: ReferenceError: Cannot access 'Store' before initialization

Issue

I have a class Store which incapsulates State (mobx used).

export class Store<State> {
    @observable
    public state: State;

    constructor(protected rootStore: RootStore, state: State) {
        this.state = state || ({} as State);
    }

    @action
    setState(state: State) {
        this.state = {
            ...this.state,
            ...state
        };
    }
}

And I'm trying to implement a class UserState:

interface UserState {
    authorised?: boolean;
    loading?: boolean;
    name?: string;
    balance?: number;
}

export class UserStore extends Store<UserState> {
    constructor(rootStore: RootStore) {
        super(rootStore, {
            authorised: false,
            loading: true,
            name: ''
        })
    }
}

Everything seems right for me, but I have an error:

ReferenceError: Cannot access 'Store' before initialization

I simply trying to set some default values in a store and it seems in a Store it's inside a constructor, so it's initialized obviously.

Solution

Problem was solved by moving Store class to isolated file, before it was in the same file as the global store.

Answered By - zishe

Read More

Why does VS code say there is an error with my object property?

Issue

I was testing some code that utilizes objects in TypeScript and noticed that my IDE's IntelliSense was throwing an error for a new property I was trying to add. It states that the property "text" does not exist, here is my code:

// create new object
var thing : Object = new Object();

// Do things
thing.text = "This is a test.";
console.log(thing.text);


// dereference the object
thing = null;

The error is highlighted on the line(s):

thing.text = "This is a test.";
console.log(thing.text);

Why does VS code list this as an error when this is perfectly acceptable code and behavior in JavaScript? Here is the error screenshot from my editor: Error

EDIT: I should note the code does compile into valid JS with tsc and runs just fine, just curious why the error is showing up as it throws me off while writing the code and makes me think there is some problem when there is not. It also notes in tsc's output the same errors, does this language behavior of being able to add and remove properties to objects change from JavaScript to TypeScript?

Solution

Typescript types are not part of your final code. When you build/run your code, there are no types. They're just there for your benefit when programming. So you can write valid code with incorrect types. Typescript will complain, but your code will still run.

When you initialize your variable, you're setting its type to Object. Which is basically {}. It doesn't have any properties. When you try to set a value for thing.text it gives you an error because thing doesn't have any properties.

You have a couple options:

1. Initialize thing with text:

const thing = { text: "This is a test." };
thing.text = "You can change the value if you want.";
console.log(thing.text);

Note, you don't need to define the type of thing. Typescript knows its type by its value.

2. Or, Declare a type for thing where text is optional:

type ThingType = {
  text?: string;
};

// or just: const thing: ThingType = {}
const thing: ThingType = new Object();
thing.text = "This is a test.";
console.log(thing.text);

Answered By - Cully

Read More

Print getters when and object is printed in typescript

Issue

Is there an option in TypeScript/JavaScript to print an object who has private properties using their getters instead of printing the private properties names.

By example I have this class in TypeScript

class Vehicle {

  constructor(private _brand: string, private _year: number) {}

  get brand(): string {
    return this._brand;
  }

  get year(): number {
    return this._year;
  }

  set year(year: number) {
    this._year = year;
  }

  set brand(brand: string) {
    this._brand = brand;
  }
}

const vehicle: Vehicle = new Vehicle('Toyota', 10);

console.log(vehicle);

I got this

[LOG]: Vehicle: {
  "_brand": "Toyota",
  "_year": 10
} 

But I'm wondering if I can get something like this

[LOG]: Vehicle: {
  "brand": "Toyota",
  "year": 10
} 

Solution

What console.log does varies by environment. If you want to do what you're describing, you'd have to write your own logger function instead, for instance (in JavaScript, but types are fairly easily added) see comments:

function log(obj) {
    // Get the names of getter properties defined on the prototype
    const ctor = obj.constructor;
    const proto = ctor?.prototype;
    const names = new Set(
        proto
            ? Object.entries(Object.getOwnPropertyDescriptors(proto))
                .filter(([_, {get}]) => !!get)
                .map(([name]) => name)
            : []
    );
    // Add in the names of "own" properties that don't start with "_"
    for (const name of Object.keys(obj)) {
        if (!name.startsWith("_")) {
            names.add(name);
        }
    }
    // Create a simple object with the values of those properties
    const simple = {};
    for (const name of names) {
        simple[name] = obj[name];
    }
    // See if we can get a "constructor" name for it, apply it if so
    let objName =
        obj[Symbol.toStringTag]
        || ctor?.name;
    if (objName) {
        simple[Symbol.toStringTag] = objName;
    }
    // Log it
    console.log(simple);
}

Live Example:

"use strict";

function log(obj) {
    // Get the names of getter properties defined on the prototype
    const ctor = obj.constructor;
    const proto = ctor?.prototype;
    const names = new Set(
        proto
            ? Object.entries(Object.getOwnPropertyDescriptors(proto))
                .filter(([_, {get}]) => !!get)
                .map(([name]) => name)
            : []
    );
    // Add in the names of "own" properties that don't start with "_"
    for (const name of Object.keys(obj)) {
        if (!name.startsWith("_")) {
            names.add(name);
        }
    }
    // Create a simple object with the values of those properties
    const simple = {};
    for (const name of names) {
        simple[name] = obj[name];
    }
    // See if we can get a "constructor" name for it, apply it if so
    let objName =
        obj[Symbol.toStringTag]
        || ctor?.name;
    if (objName) {
        simple[Symbol.toStringTag] = objName;
    }
    // Log it
    console.log(simple);
}

class Vehicle {
    constructor(_brand, _year) {
        this._brand = _brand;
        this._year = _year;
    }
    get brand() {
        return this._brand;
    }
    get year() {
        return this._year;
    }
    set year(year) {
        this._year = year;
    }
    set brand(brand) {
        this._brand = brand;
    }
}
const vehicle = new Vehicle('Toyota', 10);
log(vehicle);

Lots of room to tweak that how you like it, that's just a sketch of how you might go about it.

Answered By - T.J. Crowder

Read More

How would one simplify a state dependent getter, preferrably in a SOLID manner?

Issue

I have an Angular component that uses a type, what would be an easily readable solution to get one data on one case and the other in another?

The component could also be separated in two components, the phone component and the email component, but most of the logic albeit small would be duplicated.

var getContactInfo, hasContactInfo;
if(type === 'email') {
    getContactInfo = function (profile) { return profile.getEmail()};
    hasContactInfo = function (profile) { return profile.hasEmail()};
} else if(scope.type === 'phone') {
    getContactInfo = function (profile) { return profile.getPhone()};
    hasContactInfo = function (profile) { return profile.hasPhone()};
}

Solution

I would probably have used an object mapping the methods depending on the type:

const buildContactInfo = (getContactInfo, hasContactInfo) => ({ getContactInfo, hasContactInfo });

const contactInfoByType = {
  email: buildContactInfo((profile) => profile.getEmail(), (profile) => profile.hasEmail()),
  phone: buildContactInfo((profile) => profile.getPhone(), (profile) => profile.hasPhone())
};

Then, when calling:

const contactInfo = contactInfoByType[type];
if (!contactInfo) {
  throw new Error(`No contact info matched type '${type}'`);
} else {
  contactInfo.hasContactInfo(profile);
  contactInfo.getContactInfo(profile);
}

Answered By - sp00m

Read More