TypeError：“名稱”是只讀的

Question

我試圖在一個Sharepoint Framework小示例中實現原型模式，我從這里獲取了示例：

https://mertarauh.com/tutorials/typescript-design-patterns/prototype-pattern/

並修改如下：

 class Employee  {

    private totalperMonth: number;


    constructor(public name: string, public hiredDate: Date, public 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;

和組件

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

但是我在控制台中遇到此錯誤：

我想念什么？

Answer 1

這種方法存在幾個問題。

在TypeScript中，類是一等公民，繼承的替代方法可以使類型安全性變得不那么直接。

Object.create是低級工具，除非您知道自己在做什么以及為什么這么做，否則不要使用它。 此處的實際錯誤是選擇了錯誤的原型（ Employee而不是Employee.prototype ），因此name屬性指向函數name屬性 ，該屬性是只讀的，不應重新分配。 實現clone正確方法是：

public clone():Employee{
    return Object.assign(Object.create(Employee.prototype), this);
}

它忽略類構造函數的事實是一個令人懷疑的決定，因為構造函數可能包含與clone應用的邏輯不同的邏輯。

React促進了函數式編程來代替OOP，將應用程序狀態保持為純對象而不是類實例是有益的，這可能有助於避免設計上的缺陷，而這些缺陷在將來將很昂貴。 在這種情況下，沒有什么真正需要一個類的。 同一件事可以表示為：

const createEmployee = (name, hiredDate, dailyRate) => ({
 name,
 hiredDate,
 dailyRate,
 totalperMonth: dailyRate * 20
});

...

let employee1 = createEmployee('Luis', today, 500);
let employee2 = {...employee1, dailyRate: 550};

請注意， totalperMonth即不是重新計算Employee類也不createEmployee工廠函數。 這可能是不可取的（請參見上面有關構造函數的注釋）。