Repository: TypeScript
Issue: Add a way to annote `super` paramerter in objec literal.
Labels: Suggestion,Awaiting More Feedback

# Suggestion

<!--
  Please fill in each section completely. Thank you!
-->

## 🔍 Search Terms

super parameter object literal 

## ✅ Viability Checklist

<!--
   Suggestions that don't meet all these criteria are very, very unlikely to be accepted.
   We always recommend reviewing the TypeScript design goals before investing time writing
   a proposal for ideas outside the scope of the project.
-->
My suggestion meets these guidelines:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [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, new syntax sugar for JS, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).


## ⭐ Suggestion

We could [using super in object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super#using_super.prop_in_object_literals):

```js
var obj1 = {
  method1() {
    console.log('method 1');
  }
}

var obj2 = {
  method2() {
    super.method1();
  }
}

Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"
```

The value of `super` is determined at runtime, like `this`. And we already could explicit `this` parameter like following [example](https://www.typescriptlang.org/docs/handbook/functions.html#this-parameters)`:

```ts
function f(this: void) {
  // make sure `this` is unusable in this standalone function
}
```

There could add a way to annote `super` paramerter in objec literal:

```ts
let parent = { /* some props */ }
let child = {
  method1(super: typeof parent){
    // 
  }
}
```
It won't break the existing codes we aleary have, cause `super` is a keyword, we can't use it as a formal argument.

## 📃 Motivating Example

When extends some object provide by runtime enviroment which have no constructor for us to extend, we can do this:

before:
```ts
function patchA(origin: IOrigin){
   let patch = {
      mehtod1(arg: any){
           // do some compability work
           origin.method1(arg);
      },
      //...
  }
  return Object.setPrototypeof(patch, originObj);
}

function patchB(origin: IOrigin){
   let patch = {
      mehtod1(arg: any){
           // do some compability work
           origin.method1(arg);
      },
      //...
  }
  return Object.setPrototypeof(patch, originObj);
}
```

after:
```ts
let patchA = {
    mehtod1(super: IOrigin, arg: any){
           // do some compability work
           // type friendly to use super here
           super.method1(arg);
      },
}
let patchB = {
    mehtod1(super: IOrigin, arg: any){
           // do some compability work
           // type friendly to use super keyword here
           super.method1(arg);
      },
}

function doPatch(patch, origin: IOrigin){
  return Object.setPrototypeof(patch, origin);
}
```

## 💻 Use Cases

I'm writing a lib about canvas now, it run on multiple platforms, web, weixin-miniprogram, uniapp-h5, uniapp-mp-weixin...

There is some difference on canvas context api. Additionally, same api on different platform are act slightly different. 

In web, canvas context's interface is `CanvasRenderingContext2D`, in wieixn-miniprogram and uniapp, context's interface is `CanvasContext`. In my lib, it's `PainterContext` which is much like `CanvasContext`.

First, I try to use adptor pattern to handle this. 
```ts
class PainterH5Context extends CanvasRenderingContext2D implements PainterContext {
  async drawImage(imageResource: string, sx: number, sy: number){
    const imageElement = await createImageElement(imageResource);
    super.drawImage(imageResource: string, sx: number, sy: number);
  }
}
```
but, `new` a `CanvasRenderingContext2D` instance is forbid in browser, It also violate the rule that child class should implement parent's all interface, casue signature of `drawImage` were different.

So I directly handle prototype chain.

```ts
function patchH5Context (context: CanvasRenderingContext2D): PainterContext {
  let patch = {
      async drawImage(imageResource: string, sx: number, sy: number){
        const imageElement = await createImageElement(imageResource);
        context.drawImage(imageResource, sx, sy);
    }
  }
  // use createExtendableContextProto to make methods on contenxt bind context itself
  // otherwise it with rise an error when invoke
  return Object.setPrototypeof(patch, createExtendableContextProto(context));  
}
```

I want extract the `patch` object out of the function. cause function logic are same on different platforms.
To implement that I use the `super` keyword, but I can't get any type intellesence:

```ts
let h5ContextPatch = {
     async drawImage(imageResource: string, sx: number, sy: number){
        const imageElement = await createImageElement(imageResource);
        super.drawImage(imageElement, sx, sy);
    }
}
let UniContextPatch = {
     async drawImage(imageResource: string, sx: number, sy: number){
        const tempPath = await dowloadFiles(imageResource);
        super.drawImage(tempPath, sx, sy);
    }
}

function doPatch(patch: Partial<PainterContext>, context: CanvasRenderingContext2D | CanvasContext){
  return Object.setPrototypeof(patch, createExtendableContextProto(context));
}
```