Как использовать функцию стрелки в качестве свойства в функциональном программировании JS / TS

Question

Предполагая, что я бы сделал конструктор функционального класса с TypeA: некоторый аргумент и TypeB: тип самого класса, я могу использовать

functionName(argument: TypeA): TypeB {
    this.property = argument;
    return this;
  }

но не может использовать

property: (argument: TypeA): TypeB => ({
    property: argument,
    ...
  })

Я понимаю, что это связано с разницей в this, когда я использую функцию стрелки и нормальную функцию.

Тогда, как я могу использовать функцию стрелки, которая будет работать как первый случай с нормальной функцией?

Пример:

import personConst from './personConst';
// const personConst: { [key: string]: UnitBase } = {
//   brah: {
//     name: "Thomas",
//     age: 25,
//     gender: "male"
//   },
//   hoge: {
//     name: "Sarah",
//     age: 29,
//     gender: "female"
//   },
//   ...
// }

import { PersonBase } from './PersonBase';
// export interface UnitBase {
//   name: string;
//   age: number;
//   gender: string;
// }


interface Person extends PersonBase {
  income: number;
  zip: number;
  setIncome(newIncome: number): this;
  setZip(newZip: number): this;
}

const person = (key: string): Person => ({
  income: 50000,
  zip: 50000,
  setIncome: (newHp: number): Person => ({
    income: newIncome,
    ... // Error: Expression expected.
  }),
  setZip(newZip: number): Person {
    this.zip = newZip;
    return this; // OK
  },
  ...personConst[key]
});

export default person;

Answer 1

Я не уверен, что понимаю ваш вопрос, но если вы хотите использовать контекст this, вам не следует использовать функцию стрелки x => y напрямую. Вместо этого вы можете просто использовать более подробную анонимную функцию (function(x){ return y }) синтаксис:

const person = (key: string): Person => ({
  income: 50000,
  zip: 50000,
  setIncome: function(newIncome: number): Person { // anonymous function
    return {
      ...this, 
      income: newIncome
    };
  },
  setZip(newZip: number): Person {
    this.zip = newZip;
    return this; // OK
  },
  ...personConst[key]
});

Я думаю это ведет себя так, как вы хотите:

const thomas = person("brah");

console.log(thomas.zip); // 50000
thomas.setZip(10301);
console.log(thomas.zip); // 10301

console.log(thomas.income); // 50000
thomas.setIncome(100000);
console.log(thomas.income); // 50000
const newThomas = thomas.setIncome(100000);
console.log(newThomas.income); // 100000

но я не могу сказать по вашему вопросу. Во всяком случае, надеюсь, что это помогает; удачи!

Ссылка на код

Answer 2

Нельзя нигде использовать жирную стрелку. В основном используется: - Используя жирную стрелку (=>), мы избавляемся от необходимости использовать ключевое слово 'function'. Его анонимная функция - Чтобы избежать привязок в конструкторе, вы можете использовать (=>) - Для таких функций, как doSomething () {}, вы не можете использовать жирную стрелку здесь. Но например: function () {}, здесь вы можете использовать лямбду.