ThisType doesn't work with objects in array

[Akryum]

TypeScript Version: 3.7.0-dev.20190912

Search Terms: thistype array

Code

interface Instance {
  foo: 'bar' | 'baar'
}

type Fn = () => any | any

interface Sub {
  vars: Fn
}

interface Options {
  subs: Sub | Sub[]
}

const meow: Options & ThisType<Instance> = {
  subs: {
    vars () {
      return this.foo === 'bar'
    }
  }
}

const meows: Options & ThisType<Instance> = {
  subs: [
    {
      vars () {
        // Error happens here
        return this.foo === 'bar'
      }
    }
  ]
}

Expected behavior:

No errors.

Actual behavior:

error TS2339: Property 'foo' does not exist on type 'Sub'.

Playground Link:

https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgJIgM5jiJyDeAUMsjAPZkBcyA5AEZxQ3IA+tDjNhAvoYWAE8ADigBiIZAF5kACgCUUgHzIcA1ipAC+oSLEQoAygFc6BYsgBujDNXE9t4aPDwB5IWGBlMZkhhM3kY1M2IIBtAF17QgQvLGQAWwgyAHdqNw9Y5AAyZAAVAAtgDFzhCAAedCwcJGVpIl9-anqSS2tZBWaW5CgIMCMoCTBCjAA6cjIpSWl6TnMSXnmomMwwBKTkgPTPbxyCopKRCpXqiFqfZD86ANC5866rKAx2u67u3v7B4bGKSemGJluiy6C2QkV4QA

Related Issues:

[j-oliveras]

The this inside meows is a reference to the object inside the array, not the object meows. You can test it with node:

var meows = {
  subs: [
    {
      vars () {
        this.foo = 'hello' // assigned to display what is this here
        // Error happens here
        return this.foo === 'bar'
      }
    }
  ]
}
console.log(meows) // { subs: [ { vars: [Function: vars] } ] }
meows.subs[0].vars()
console.log(meows) // { subs: [ { vars: [Function: vars], foo: 'hello' } ] }

[Akryum]

It will do the same with:

const meow = {
  subs: {
    vars () {
      this.foo = 'hello'
      return this.foo === 'bar'
    }
  }
}
console.log(meows) // { subs: { vars: [Function: vars] } }
meows.subs.vars()
console.log(meows) // { subs: { vars: [Function: vars], foo: 'hello' } }

That's not the point of this issue, those methods a bound internally by my library.

[fatcerberus]

Pretty sure ThisType only affects the object directly assigned to it, not sub-objects, whose properties have their own types (and therefore don't inherit the ThisType).

[Akryum]

https://www.typescriptlang.org/play/#code/JYOwLgpgTgZghgYwgAgJIgM5jiJyDeAUMsjAPZkBcyA5AEZxQ3IA+tDjNhAvoYWAE8ADigBiIZAF5kACgCUUgHzIcA1ipAC+oSLEQoAygFc6xugWLIAbowzVxPbeGjw8ZiyRAQsEACbUzM0dCHRd9ZAB5ITBgMkwPZAwTO2R3NjMAbQBdYIQ4rGQAWwgyAHdqKJj85AAyZAAVAAtgDHrhCAAedCwcJGVpIhIkuhTBkmQvH38E8etbWQUx2ZIoCDAjKAkwZowAOnIyKUlpek5LWd4Ly15eQjzMMCKS0pTK2Pi6ppa2kS6H3og-QSwxSGXOM3Gk0g0yWyxsUAwCwhy2Qq3Wm2Q2xa+woRxODCY4KuKMu41JOV4QA

[Akryum]

I guess it's necessary, otherwise Vue typings wouldn't work 😁

[RyanCavanaugh]

@fatcerberus is correct

[weswigham]

FYI, if you want a deeply bound ThisType, you can do something like

type DeepApplyThisType<T, TThis> = {[K in keyof T]: DeepApplyThisType<T[K], TThis>} & ThisType<TThis>;

but it's on you to make sure your library can actually bind the this's of those functions up to match that.

[Akryum]

@RyanCavanaugh I've put a link in this message showing the inconsistency in nested objects.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[Akryum]

Using a custom type DeepApplyThisType breaks other types:

Example

[Akryum]

Could the issue be re-open? It causes me a lot of difficulties for vue-apollo typings.

[dragomirtitian]

@Akryum DeepApplyThisType works but does not cover all cases as it should. It should distribute over T[K] to correctly apply this in a union, and should not perform the transformation on function or primitives. This works with your example:

type DistributionHelper<T, TThis> = T extends Function | string | number | boolean ? T: DeepApplyThisType<T, TThis>

type DeepApplyThisType<T, TThis> = {
  [K in keyof T]: DistributionHelper<T[K], TThis>
} & ThisType<TThis>;

play

Other corner cases may arise but they can probably be solved.