display is not a function

Question

I have an employee class with a display function, and then when trying to implement the prototype pattern, I got an error when trying to use the display function from the cloned object.

The employee class code:

class Employee {

    private totalperMonth: number;
    private name: string;
    private hiredDate: Date;
    public dailyRate: number;


    constructor(name: string, hiredDate: Date, dailyRate: number){
        this.totalperMonth = dailyRate * 20 ;
    }

    public display(): string{
        return "Employee " + this.name + " earns per month: " + this.totalperMonth;
    }

    public clone():Employee{
        var cloned = Object.create(Employee || null);
        Object.keys(this).map((key: string) => {
            cloned[key]= this[key];
        });
        return <Employee>cloned;
    }
}

export default Employee;

the component code:

import * as React from 'react';
import styles from './Prototype.module.scss';
import { IPrototypeProps } from './IPrototypeProps';
import { escape } from '@microsoft/sp-lodash-subset';
import  Employee from './Employee';


export default class Prototype extends React.Component<IPrototypeProps, {}> {


  public render(): React.ReactElement<IPrototypeProps> {
    const today = new Date();
    let employee1: Employee = new Employee('Luis', today, 500);
    let employee2 = employee1.clone();
    employee2.dailyRate = 550;

    return (
      <div className={ styles.prototype }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
                <span className={ styles.label }>{employee1.display()}</span>
                <span className={ styles.label }>{employee2.display()}</span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

`cloned` doesn't actually make the object an instance of `Employee`, you need to be doing `new Employee(...)` somewhere. — jonrsharpe, Jan 12 '19 at 16:44
I took the sample from here and adapted: https://mertarauh.com/tutorials/typescript-design-patterns/prototype-pattern/ — Luis Valencia, Jan 12 '19 at 16:52
the goal of the prototype pattern is to avoid instantiating new objects and instead clone them — Luis Valencia, Jan 12 '19 at 16:52
If that's what you're copying, note that you've missed the `prototype` property access... — jonrsharpe, Jan 12 '19 at 16:53

score 1 · Accepted Answer · answered Jan 12 '19 at 16:52

1

You can try this:

    clone():Employee {
        return Object.assign(Object.create(Object.getPrototypeOf(Employee)), this)
    }

This creates a new object based on the current object class, whilst also filling up the data with the ones that you previously had.

Your solution didn't actually make it an Employee, as it was just a cloned plain object.

answered Jan 12 '19 at 16:52

Hespen

1,384
2
17
27

I get this error with your code: Property 'assign' does not exist on type 'ObjectConstructor'. – Luis Valencia Jan 12 '19 at 17:01
https://stackoverflow.com/questions/35959372/property-assign-does-not-exist-on-type-objectconstructor – Hespen Jan 13 '19 at 18:03

display is not a function

1 Answers1

Linked