"typeof this" returns "this" (instance) instead of its type (class)

[clshortfuse]

Bug Report

🔎 Search Terms

typeof this
this
constructorOf

🕗 Version & Regression Information

v.4.8.4 will say a property doesn't exist.

v.4.9.0 (nightly) will give the same, but also cannot find this

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

⏯ Playground Link

https://www.typescriptlang.org/play?suppressImplicitAnyIndexErrors=true&ts=4.9.0-dev.20221021#code/MYGwhgzhAECC0G8CwAoa0IBcyYJbGgDMB7Y6AXmgHIAjMAJyoG5VV1hiA7LegV2EzF6ACgCUiAL6s00ABYBTECGJjE0evMy96nagHchIACZVoUlG2gBzTQBEc8sQC57meYkvoNWndE7y9aFdHURYZc0sbTAAVAE8AB3liQmDnTASkwiCHDxl0AHp89U1tXWCw9C8S32F-QNTRUQA6Dm5MPgEhaEhodMTk7LcKs2l0KOjZXAg0yZhkPOKfXUxZ4YiZcYzkiam0rayVqdzKxdLe2ZauHn5Bem6YXk4Aa05iPV0evszzqbXUddaWGgZEodTgYjCqGITSiDRhdjAsQhUPhMX2cNeemRFhQ0PGszETQUShUoRRm36hB202axOUTGghQwsmIvGMRDAuBA5M0cUp1MJJGIYSAA

💻 Code

class A {
  static foo = 'bar';

  constructor() {}

  hello() { return 'world' }

  getDate():Date {
    return new Date();
  }

  getTypeofDate():typeof Date {
    // return Date;
    return (new Date()).constructor as typeof Date;
  }

  getThis():this {
    return this;
  }

  getTypeofThis():typeof this {
    return this.constructor as unknown as typeof this;
  }
}

const o = new A();

o.getDate().getDay();
o.getTypeofDate().now();

o.getThis().hello();
o.getTypeofThis().hello; // should fail
o.getTypeofThis().foo; // should pass

🙁 Actual behavior

(typeof this) returns this

🙂 Expected behavior

(typeof this) should return the static context of an instance.

---

I am aware that I can do typeof A, but I'm simplifying for the reproducible.

Actual usage is web components: HTMLElement and static observedAttributes. Classes that extend the base class (eg => InputElement extends FormControlElement) will override the static attributes. Therefore, the base class FormControlElement needs to access this.constructor.observedAttributes , not FormControlElement.observedAttributes in order to properly see what attributes are being observed. (ie: subclass is extending superclass static properties).

[clshortfuse]

Out of curiosity, it works in flow:

https://flow.org/try/#0MYGwhgzhAECC0G8BQ1oQC5nQS2NAZgPaHQC80A5AEZgBOFA3EitMIQHYa0Cuw6htABQBKRAF9mqABYBTECEIjE0WjPTda7SgHcBIACYVoElgHM1AESwyRALivoZiFqlXrN0djO3QHN4UyoJqjm6AAqAJ4ADjKE+H52AMLgUAA8fgB8zqiuahpaXj4JwgB0bJzoPHwCgcaS0KFhUtgQdujNMMg5Knke7S21wQ1qkTFxTS1JKRCp-RBZXTlu+dBzZRxcvPy0g0gm5RjQJOSFcCJMSIQlocXXlmAR55d34dGx8dYiJeyE2k-PjQ6X1k8kUAQBIze4yBpRBCgY0AA9Ii0FJCNwDAQwNgQBDXmN8BNWqUiIQEcjUejMVFIBBmEhQLToAAhaAyAAejnY+hg8EWGCwuAIxAATGRKDRaCLGHtmAd0GhuFRxadmU8IEqXqN3kSvqSmBqqFqoYSYSVSSKmEA

I can even extend in flow and this works as expected:

class B extends A {
  static foo2 = 'bar2';
}

const sub = new B();
sub.getTypeofThis().foo;
sub.getTypeofThis().foo2;

That's because flow supports :Class<this>.

• TS Playground link showing extending doesn't work either

[fatcerberus]

This is right, because typeof x in TypeScript means “the type of the value referred to by x” (in other words what you get if you console.log(x)). For this inside a method, that’s the current instance, so you get the instance type.

Basically typeof is giving you the type of a binding that exists in value space. It so happens that this in type space refers to the same type as this in value space. Which isn’t true for classes: MyClass refers to the instance type in typespace but console.log’ging it will log the class itself.

[RyanCavanaugh]

typeof takes an expression which is a value and produces its type. The value this, at that position, refers to an instance of a class, not its constructor.

Flow chose a different interpretation of it, I can't speak as to why.

[clshortfuse]

Is there a way we can do ClassOf<T> and get back the class (constructor)? I raked my head for hours trying to figure out a way to do with TS, and all I could come with was a type map, but that somewhat kills it being dynamic. No code I could write could recreate a class "type". It seems internal only.

Ended up with this on my base class:

  /** @return {typeof CustomElement} */
  get static() {
    return /** @type {typeof CustomElement} */ (/** @type {unknown} */ (this.constructor));
  }

And these on the subclasses:

  /** @return {typeof Control} */
  get static() { return /** @type {typeof Control} */ (super.static); }

It's not major, or production blocking, I wish I didn't have to reapply every time. I did see an issue related to polymorphic this, but wasn't sure if that's the same "issue": #5863

[RyanCavanaugh]

Not today, no. We tried making this.constructor be the class constructor type, but doing this quickly breaks the type system because it makes all class instances invariant whenever their constructors vary contravariantly (which is quite common). See #3841

[clshortfuse]

@RyanCavanaugh Thanks. I figured I'm not breaking new ground here. Just wasn't sure where to track the conversation. I'll keep an eye on the other filed issue.