CODEWITHSUNDEEP
reactjstypescript
Luis Valencia
Luis Valencia

Reputation: 34028

display is not a function

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.

enter image description here

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>
    );
  }
}

Upvotes: 0

Views: 1029

Answers (1)

Hespen
Hespen

Reputation: 1452

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.

Upvotes: 1

Related Questions