How to use an arrow function as a property in JS/TS functional programming

Question

Assuming I would make a constructor of a functional class with TypeA : some argument, and TypeB : the type of the class itself, I can use

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

but cannot use

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

I understand this is due to the difference in this when I use an arrow function and normal function.

Then, how can I use an arrow function which will work like the first case with normal function?

Example:

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

I'm not sure if I'm understanding your question, but if you want to use the this context, you shouldn't use an arrow function x => y directly. Instead you can just use the more verbose anonymous function (function(x){ return y }) syntax:

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

I think this behaves as you want:

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

but I can't tell from your question. Anyway, hope that helps; good luck!

Link to code

Answer 2

You can not use fat arrow anywhere. Its mostly used: - Using fat arrow (=>) we drop the need to use the 'function' keyword. Its anonymous function - To avoid bindings in constructor you can use ( =>) - For functions like doSomething(){ }, you can not use fat arrow here. But eg: function (){ } , you can use lambda here.