maintain certain class property characteristics in mapped types, like protected/private visibility, and instance property vs instance function

[trusktr]

Search Terms

mapped types with protected private members

Suggestion

Feature request:

Allow types/interfaces to contain member visibility as well as property type ("instance member function" vs "instance member property") and perhaps other intrinsics.

Or at least keep these characteristics intact in mapped types where the mapped type is generated from class types.

Use Cases

I've made a function called multiple that allows me to do multiple inheritance. In plain JavaScript, it works fine, like this:

class One {one() {}}
class Two {two() {}}
class Three {three() {}}
class Four extends multiple(One, Two, Three) {
  test() {
    this.one() // OK
    this.two() // OK
    this.three() // OK
  }
}

So far, after making type definitions for multiple(), the above works fine in TypeScript. playground example.

However when making properties protected or private, those properties are lost from the mapped type returned from multiple(), and therefore inheritance of protected (or denial of accessing private) members doesn't work:

class One {protected one() {}}
class Two {protected two() {}}
class Three {private three() {}}
class Four extends multiple(One, Two, Three) {
  test() {
    this.one() // ERROR, Property 'one' does not exist on type 'Four'. Expected no error.
    this.two() // ERROR, Property 'two' does not exist on type 'Four'. Expected no error.
    this.three() // ERROR, Property 'three' does not exist on type 'Four'. Expected an error relating to private access.
  }
}

Here's the playground example.

Because the private properties are deleted from the mapped type (just like the protected ones are), it becomes possible to inadvertently use private properties because the type system says they don't exist:

class One { private foo = 1 }
class Two { }
class Three extends multiple(One, Two) {
    foo = false
    test() {
        this.foo = true // Uh oh! There's no error using the private property!
    }
}

Here's the playground example.

Another problem is methods of the classes passed into multiple() are converted from instance member function to instance member property, and this happens:

class One {one() {}}
class Two {two() {}}
class Three {three() {}}
class Four extends multiple(One, Two, Three) {
    one() {} // ERROR, Class '{ three: () => void; two: () => void; one: () => void; }' defines instance member property 'one', but extended class 'Four' defines it as instance member function.(2425)
}

Here's the playground example.

Related

• https://github.com/microsoft/TypeScript/issues/26760
• https://github.com/microsoft/TypeScript/issues/7124
• https://github.com/microsoft/TypeScript/issues/3854

Checklist

My suggestion meets these guidelines:

• [ ] This wouldn't be a breaking change in existing TypeScript/JavaScript code I'm not sure
• [x] This wouldn't change the runtime behavior of existing JavaScript code
• [x] This could be implemented without emitting different JS based on the types of the expressions
• [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [x] This feature would agree with the rest of TypeScript's Design Goals.

[trusktr]

I'm aware that we can use class-factory mixins, but they are more complex and harder to use than my multiple() helper:

• it requires wrapping existing classes in functions to make them composable.
• There's a lot of type definition boilerplate that has to be repeated for each mixin, and the boilerplate is tricky to understand, gets in the way, and is very error prone.
  • @dragomirtitian Can vouch for this, we spent much time trying to figure out how to compose mixins inside of other mixins.

On the other hand, for the end user, using multiple() is very simple:

• take any classes, even if they are 3rd party classes imported from 3rd-party packages, and pass them into multiple() for multiple inheritance. With class-factory mixins, one can not import a 3rd-party class and wrap it with a mixin function.
• To compose any existing classes, nothing is required: existing classes do not need to be modified (they do not need to be wrapped in functions). Just pass them into multiple() in the extends expression of a new class.

This totally decouples class composability from class implementation, with the only needed boilerplate for composition being a call to multiple() with commas between the classes.

---

I'd love to make this a reality, but I haven't made a code contribution to TypeScript yet, and do not know the TS source yet).

I'm interested in implementing this, but I want to wait to see if the team thinks it may be feasible, so that I won't spend time before knowing if the team thinks it is feasible.

One thought I had is to always keep property characteristics inside of mapped types (keep protected/private members, keep instance member functions as instance member functions, etc), then if the type is passed into the extends expression of a class definition, pass those characteristics along.

[trusktr]

@kitsonk You mentioned here that

there is no real private or protected, therefore they affect the shape of the object, and therefore it is safer to consider them for assignability purposes. This keeps you from accidentally overwriting private or protected members.

I currently have this issue with the abovemultiple(). What are you thoughts on passing down class property characteristics?

At the moment, anyone using my multiple() helper to compose classes with private properties will easily be able to define new properties of the same name without any error, for example.

[trusktr]

@RyanCavanaugh What sort of more feedback would you like? I think my examples covered all the details.

I have a real working multiple() function in plain JavaScript that allows me to perform multiple inheritance in a simple way (from the end-user perspective), and the ergonomics and flexibility are much better than class-factory mixins. I would love for this to work in TS while using protected or private.

[trusktr]

cc people with thoughts and work in this general area of mixins (multiple inheritance): @canonic-epicure @justinfagnani @tannerntannern

[tannerntannern]

@trusktr, it's not entirely clear to me what you're looking for based on this thread, but I believe the typing you want for multiple inheritance for can already be achieved without changes to TypeScript's internals.

[trusktr]

@tannerntannern If that's the case, how would we fix the above playground examples? In particular this one. I thought there to be no solution.

[trusktr]

Here's an example showing a way to make it work without mapped types. I made 9 overloads of the multiple function. Each overload has an extra generic param and extra regular param than the previous. This is limited because if I pass more than 9 args, it won't work.

With mapped types, there would be no limit, but it erases the types. Did I miss some other way to do it?

[trusktr]

@MicahZoltu just showed me how to do it with tuple-to-union-to-intersection. Amazing. Playground Example.

[trusktr]

I'm re-opening this, because the problem still persists with mapped typed specifically. Any time we run something like Pick, Required, Optional on a class, it obliterates the protected and private fields.

One key issue caused by this is that it makes working with mixins and other class-programming concepts more difficult.

In the previous comment's playground example, it works, except that if two classes have the same property but with differing types then the outcome type will be never.

Here is a playground example that shows how the never type pops into the picture when there are property collisions. Also notice, the protected characteristic of the zero property is preserved, so we get the expected type error at the end of the example when trying to access the prop outside of the class.

At runtime (in plain JS) the mutiple() implementation uses the property of the first class of the list of classes with the property collision, in the same order they are passed into multiple().

However in TypeScript, there's no way to pluck the first property (with mapped types) without losing protected and private properties.

Here's the same example but using the original multiple() implementation (playground). Notice that the protected property disappeared, but the public property works fine and the type was chosen to be string based on the first property in the collided properties (based on order classes were passed into multiple()).

It seems that if we wish to "pick the type of the first property in the collision", we have to use mapped types, and in such case we can not use protected or private properties, otherwise it may lead to human errors like accidentally overriding private properties that seem to not exist.

For example, here's a playground example that shows the accidental overriding of a private property, which may break the application.

Going back to the tuple-based approach, here's that same example with a private collision but showing an error (playground). The error is: The intersection 'Zero & One' was reduced to 'never' because property 'zero' exists in multiple constituents and is private in some. (2509).

Here is a playground example that shows my preferred approach (for now), which is to use _ prefixes for protected members, and __ prefixes for private members along with the mapped-type approach (because it picks the type of first collided property, which reflects what actually happens at runtime). In reality, they are all still public members.

Finally, note that ES #private class fields actually avoid the private property collisions, using either approach. Here's a playground example showing the tuple approach with a private field, and playground example showing the mapped-type approach in which case no overriding of private fields happens.

[jonlepage]

i have similar issue here where some pattern make complications !

type Writable<T> = { -readonly [P in keyof T]: T[P] }; // make writable A.parent for Childrable

class A {
  public readonly parent?: A
  protected Renderer() { }
}

class Childrable {
  public entity!: A;
  public readonly children: A[] = [];

  public addChild(...children: Writable<A>[]) {
    if (children.length > 1) {
      for (const child of children) this.addChild(child);
    } else {
      const child = children[0];

      if (child) {
        // So Writable<A> allow replace A.parent
        child.parent = this.entity;
        // But Writable<A> seem remove protected.Renderer prototype and now they are not compatible
        // I need allow replace A.parent and add A in Childrable.children in the same scope !
        this.children.push(child);
      }
    }

    return this;
  }
}

playground

---

It would be great to see easy way to handle more pattern with protected, private fields when we map types for specific case In my case upper, Childrable is a component where you can attach to Entity A , and Childrable have some method where allowed to write in some readOnly field from A. It can be look weird without context, but is a valid architecture pattern (hybride ECS, ECA). 😉

[jonlepage]

To participate, my suggest will be to ask for add a new utility called fieldof maybe !?

type Writable<T> = { -readonly [P in fieldof T]: T[P] }; 

So same as keyof, but include all private and protected field for specific pattern.