Soundness: this type is computed with respect to the object it is declared on, rather than the object it is called on

[carlpaten]

Bug Report

This prevents the type-safe construction of path-dependent builders (e.g. a builder where a certain method can only be called once, or where calling a certain method prevents calling other methods)

🔎 Search Terms

this type chained fluent builder generic

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about the this type

⏯ Playground Link

Playground link with relevant code

💻 Code

const toppings = Symbol();
const burgerBuilder = {
  [toppings]: [] as string[],

  withMayo() {
    const {withMayo, ..._this} = this;
    return {..._this, [toppings]: [...this[toppings], 'mayo']};
  },

  withKetchup() {
    const {withKetchup, ..._this} = this;
    return {..._this, [toppings]: [...this[toppings], 'ketchup']};
  },

  order() {
    return `bun-patty-${this[toppings].map(topping => `${topping}-`).join('')}bun`
  }
};


console.log(burgerBuilder.order()); // [LOG]: "bun-patty-bun"
console.log(burgerBuilder.withMayo().order()); // [LOG]: "bun-patty-mayo-bun"
console.log(burgerBuilder.withMayo().withKetchup().order()); // [LOG]: "bun-patty-mayo-ketchup-bun"
console.log(burgerBuilder.withMayo().withKetchup().withMayo().order()); // [ERR]: burgerBuilder.withMayo(...).withKetchup(...).withMayo is not a function

🙁 Actual behavior

console.log(burgerBuilder.withMayo().withKetchup().withMayo().order()) correctly fails at runtime, but passes type-checking

🙂 Expected behavior

console.log(burgerBuilder.withMayo().withKetchup().withMayo().order()) should fail type-checking.

[DanielRosenwasser]

Sounds like #7968.

[carlpaten]

@DanielRosenwasser I actually do not recognize the problem described in #7968, I can't be 100% sure since there is no repro code but I suspect the problem in #7968 is already solved.

Here the issue is that when the return type of the function depends on the type of this, it is computed too early. Here is a semi-absurd variation that I think is less likely to come up in practice but which illustrates the problem:

const item = {
    x: 1,
    getX: function() {
        return this.x;
    },
    setX: function(v: string) {
        return {...this, x: v};
    }
}

const x1 : number = item.getX(); // 1
const x2 : number = item.setX("foo").getX(); // "foo"

[RyanCavanaugh]

You'd need to make the methods generic to detect this correctly, since the return type depends on the input type. But once it's generic, you'd need to name the core shared type to eliminate the circularity. A working version of this code looks like this:

interface Builder {
  [toppings]: string[];
  order(): string;
}

const burgerBuilder = {
  [toppings]: [] as string[],

  withMayo<T extends Builder>(this: T & { withMayo: unknown }) {
    const {withMayo, ..._this} = this;
    return {..._this, [toppings]: [...this[toppings], 'mayo']};
  },

  withKetchup<T extends Builder>(this: T & { withKetchup: unknown }) {
    const {withKetchup, ..._this} = this;
    return {..._this, [toppings]: [...this[toppings], 'ketchup']};
  },

  order() {
    return `bun-patty-${this[toppings].map(topping => `${topping}-`).join('')}bun`
  }
};


console.log(burgerBuilder.order()); // [LOG]: "bun-patty-bun"
console.log(burgerBuilder.withMayo().order()); // [LOG]: "bun-patty-mayo-bun"
console.log(burgerBuilder.withMayo().withKetchup().order()); // [LOG]: "bun-patty-mayo-ketchup-bun"
// Errors as desired
console.log(burgerBuilder.withMayo().withKetchup().withMayo().order()); // [ERR]: burgerBuilder.withMayo(...).withKetchup(...).withMayo is not a function

[carlpaten]

Brilliant, thank you!