Typed 'this' in object literal methods

[Anders Hejlsberg (ahejlsberg)]

With this PR we strongly type this in methods of object literals and provide a facility for controlling the type of this through contextual typing. The new behavior is only enabled in --noImplicitThis mode.

The type of the expression this in a method of an object literal is now determined as follows:

• If the method has an explicitly declared this parameter, this has the type of that parameter.
• Otherwise, if the method is contextually typed by a signature with a this parameter, this has the type of that parameter.
• Otherwise, if --noImplicitThis is enabled and the containing object literal has a contextual type that includes a ThisType<T>, this has type T.
• Otherwise, if --noImplicitThis is enabled and the containing object literal has a contextual type that doesn't include a ThisType<T>, this has the contextual type.
• Otherwise, if --noImplicitThis is enabled this has the type of the containing object literal.
• Otherwise, this has type any.

Some examples:

// Compile with --noImplicitThistypePoint={x: number;y: number;moveBy(dx: number,dy: number): void;}letp: Point={x: 10,y: 20,moveBy(dx,dy){this.x+=dx;// this has type Pointthis.y+=dy;// this has type Point}}letfoo={x: "hello",f(n: number){this;// { x: string, f(n: number): void }},}letbar={x: "hello",f(this: {message: string}){this;// { message: string }},}

In a similar manner, when --noImplicitThis is enabled and a function expression is assigned to a target of the form obj.xxx or obj[xxx], the contextual type for this in the function expression is obj:

// Compile with --noImplicitThisobj.f=function(n){returnthis.x-n;// 'this' has same type as 'obj'}obj['f']=function(n){returnthis.x-n;// 'this' has same type as 'obj'}

In cases where an API produces a this value by transforming its arguments, a new ThisType<T> marker interface can be used to contextually indicate the transformed type. Specifically, when the contextual type for an object literal is ThisType<T> or an intersection including ThisType<T>, the type of this within methods of the object literal is T.

// Compile with --noImplicitThistypeObjectDescriptor<D,M>={data?: D;methods?: M&ThisType<D&M>;// Type of 'this' in methods is D & M}functionmakeObject<D,M>(desc: ObjectDescriptor<D,M>): D&M{letdata: object=desc.data||{};letmethods: object=desc.methods||{};return{ ...data, ...methods}asD&M;}letobj=makeObject({data: {x: 0,y: 0},methods: {moveBy(dx: number,dy: number){this.x+=dx;// Strongly typed thisthis.y+=dy;// Strongly typed this}}});obj.x=10;obj.y=20;obj.moveBy(5,5);

In the example above, the methods object in the argument to makeObject has a contextual type that includes ThisType<D & M> and therefore the type of this in methods within the methods object is { x: number, y: number } & { moveBy(dx: number, dy: number): number }. Notice how the type of the methods property simultaneously is an inference target and a source for the this type in methods.

The ThisType<T> marker interface is simply an empty interface declared in lib.d.ts. Beyond being recognized in the contextual type of an object literal, the interface acts like any empty interface.

Patterns similar to the above are used in several frameworks, including for example Vue and Ember. Using ThisType<T> we can now more accurately describe those frameworks.

Supercedes #8382. We revoked that PR because it always made the type of this in object literal methods be the type of the object literal. We now make that the default behavior, but allow the default to be overridden using a ThisType<T> contextual type.

[Anders Hejlsberg (ahejlsberg)]

Latest commit adds contextual this type in assignments of the form obj.xxx = function(...) and obj[xxx] = function(...).

[Anders Hejlsberg (ahejlsberg)]

The one issue that remains for discussion here is whether the strongly typed this behavior should always be in effect or only be in effect in --noImplicitThis mode. It is technically a breaking change, but it also provides a better authoring experience (statement completion for this) and catches legitimate bugs.

[Nathan Shively-Sanders (sandersn)]

I like this change.

1. Still need tests
2. Braden Snell (@bradenhs) points out that the contextual typing code only applies to functions and object literal methods. It should apply to object literal getters/setters as well.
3. I ran RWC to see what breaks. I found several good breaks, a few breaks that require a d.ts update with ThisType (Object.defineProperty, knockout and react), and a couple of places that show that this needs to be the intersection of the object literal type and the parameter type.

[Nathan Shively-Sanders (sandersn)]

shouldn't applyToContextualType just be named mapType and replace mapType? It doesn't do anything specific to contextual types that I could see, and it's better than the current mapType because it skips return values of undefined. #Resolved

[Anders Hejlsberg (ahejlsberg)]

Yes, that makes sense.

[Nathan Shively-Sanders (sandersn)]

The purpose of this test isn't obvious without following the pointer back to issue #10697. Can you add one more comment at the top of the file like "this test originally failed by using 100% CPU and should now take less than 1 second to run". I'd like a faster way to know that these additional failures are not a problem.

[Nathan Shively-Sanders (sandersn)]

just delete this, I think. #Resolved

[Anders Hejlsberg (ahejlsberg)]

Done.

[Nathan Shively-Sanders (sandersn)]

Summary of RWC breaks [1]: two good breaks from contextual typing of function assignment. Two breaks that show that Object.defineProperty and friends need to include ThisType<T>. One break that shows that choosing the contextual type of the object literal instead of the contextual type from a function call argument is incorrect.

[1] Note that I haven't looked at all of RWC yet; it hit a stack overflow halfway through.

1. A good break resulting from contextual typing of function assignment.

declarefunctionf(elt: HTMLElement): void;functionouter(){varself=this;varargs: Draggable;args.helper=function(){returnf(this);// error 'this: Draggable' is not assignable to 'HTMLElement'// Property 'accessKey' is missing in 'Draggable'};}

This catches code that is just wrong. I looked at Draggable and it's not at all related to HTMLElement.

(This happened in two different projects.)

2. Another break from contextual typing of function assignment.

// Override the prototype method on CCBase.prototype.debug=function(){varself: C=this;// error type 'CBase' is not assignable to 'C'// Property '_subclassProperty' is missing in 'CBase'

I'm not sure what to make of this. The comment makes it sound like the intention is to override the method on C, not on CBase. So probably this is a good error too.

3. Defining properties on Array.prototype using Object.defineProperties.

Object.defineProperties(Array.prototype,{empty: {value: function(){returnthis.length===0;}}})

It looks like Object.defineProperties and related methods need to use ThisType to provide the correct type for this here.

4. Implicit any errors on a this type that has no index signature.

functiondefineProperty(c: any,name: string,defaultValue: any){varbackingFieldName="_"+name;Object.defineProperty(c.prototype,name,{get: function(): any{if(typeofthis[backingFieldName]==='undefined'){this[backingFieldName]=defaultValue;}returnthis[backingFieldName];},// code continues ...});};

This would also be fixed by adding ThisType to Object.defineProperty because c.prototype: any and would avoid the noImplicitAny error.

5. Object literal type overrides contextual type:

interfaceMockJaxOptions{url?: string;responseTime?: number;status?: number;responseText?: string;responseHeaders: StringMap<string>;}$.mockjax({type: "GET",url: "blah/blah/blah",status: 200,contentType: "application/json",response: function(){this.responseText=JSON.stringify({stuff: "things"});// error: property 'responseText' does not exist on '{ type: string ... }'}});

This is bad because $.mockjax shouldn't really need to have its parameter be of type MockJaxOptions & ThisType<MockJaxOptions>.
I have a hunch this is fairly old code because JQuery MockJax now has its own d.ts. So we could fix this particular break in only one place, but it is symptomatic of a larger problem.

[Nathan Shively-Sanders (sandersn)]

More breaks:

1. In vscode/src/vs/languages/markdown/common/markdownWorker.ts:

publicgetEmitOutput(resource: URI,absoluteWorkersResourcePath: string): WinJS.TPromise<Modes.IEmitOutput>{// TODO@Ben technical debt: worker cannot resolve paths absolutelet model =this.resourceService.get(resource);letcssLinks: string[]=this.cssLinks||[];// Custom Renderer to fix href in imagesletrenderer=newMarked.marked.Renderer();let$this=this;renderer.image=function(href: string,title: string,text: string): string{letout='<img src="'+$this.fixHref(resource,href)+'" alt="'+text+'"';if(title){out+=' title="'+title+'"';}out+=(this.options&&this.options.xhtml) ? '/>' : '>';~~~~~~~!!!errorTS2339: Property'options'doesnotexistontype'MarkedRenderer'.~~~~~~~!!!errorTS2339: Property'options'doesnotexistontype'MarkedRenderer'.

This seems like a good break. I can't find a property named 'options' in MarkedRenderer or in the class that contains getEmitOutput.

2. Knockout's observable.fn entries don't specify that this is callable.

ko.observable.fn['toInt']=function(){returnparseInt(this());~~~~~~!!!errorTS2349: Cannotinvokeanexpressionwhosetypelacksacallsignature.Type 'KnockoutObservableFunctions<any>' has no compatible call signatures.
}

This seems like an easy fix to knockout's d.ts. It's just that nobody ever noticed that KnockoutBindingHandler needed to have a line (): any at the beginning.

3. RxJs/src/observable/dom/AjaxObservable.ts gets contextual typing from assignment

privatesetupEvents(xhr: XMLHttpRequest,request: AjaxRequest){constprogressSubscriber=request.progressSubscriber;xhr.ontimeout=functionxhrTimeout(e){const{subscriber, progressSubscriber, request }=(<any>xhrTimeout);if(progressSubscriber){progressSubscriber.error(e);}subscriber.error(newAjaxTimeoutError(this,request));//TODO: Make betterer.~~~~!!!errorTS2345: Argumentoftype'XMLHttpRequestEventTarget'isnotassignabletoparameteroftype'XMLHttpRequest'.!!!errorTS2345: Property'onreadystatechange'ismissingintype'XMLHttpRequestEventTarget'.};

This seems like a good break too. The comment even indicates that the author is suspicious that something is wrong.

4. Angular 2 decorators_spec.ts

exportfunctionmain(){describe('es5 decorators',()=>{it('should declare directive class',()=>{varMyDirective=Directive({}).Class({constructor: function(){this.works=true;}});~~~~~!!!errorTS2339: Property'works'doesnotexistontype'{ constructor: () => void; }'.expect(newMyDirective().works).toEqual(true);});

This is probably another case where the type of the object literal needs to be intersected with the contextual type from the call signature. But it's in a test. It could just be a completely dynamic use of an undeclared property.

5. Angular 2 React benchmark

// tree benchmark in Reactimport{getIntParameter,bindAction}from'angular2/src/test_lib/benchmark_util';import*asReactfrom'./react.min';varTreeComponent=React.createClass({displayName: 'TreeComponent',render: function(){vartreeNode=this.props.treeNode;~~~~~!!!errorTS2339: Property'props'doesnotexistontype'{ displayName: string; render: () => any; }'.

This is evidence that React.createClass will need to update its d.ts too.

[Braden Snell (bradenhs)]

I just tried this out and thought this would work:

const person = {
firstName: 'First',
lastName: 'Last',
getName() {
// works!
return this.firstName + ' ' + this.lastName;
},
get name() {
// 'this' implicitly has type 'any' because it does not have a type annotation.
return this.firstName + ' ' + this.lastName;
},
};

But it looks like the getter isn't aware of the type of this. Is this behavior correct?

[Nathan Shively-Sanders (sandersn)]

Braden Snell (@bradenhs) Nope, that is not correct. But the code right now specifically works with the contextual type of this in functions and methods. It needs code to support getters and setters too. I'll update my review comment above so Anders Hejlsberg (@ahejlsberg) will see it when he gets back from vacaation.

[Anders Hejlsberg (ahejlsberg)]

With latest commits we now properly type this in getters and setters.

[Nathan Shively-Sanders (sandersn)]

Can you move this test case to thisTypeInAccessors.ts so that we can see the types?

[Anders Hejlsberg (ahejlsberg)]

Latest commit puts all of the new functionality under the --noImplicitThis switch. This ensures there are no breaking changes as a result of this PR since the situations in which we strongly type this in object literal methods were previously errors under --noImplicitThis.

[Arthur Ozga (aozgaa)]

In the SymbolDisplayBuilder, should we change the following?

elseif(type.flags&TypeFlags.TypeParameter&&(typeasTypeParameter).isThisType){if(inObjectTypeLiteral){writer.reportInaccessibleThisError();}writer.writeKeyword("this");}

[Anders Hejlsberg (ahejlsberg)]

Arthur Ozga (@aozgaa) No, that is an unrelated check (it reports an error if this is accessed in a type position within an object type literal).

[Anders Hejlsberg (ahejlsberg)]

Mohamed Hegazy (@mhegazy) I think this one is good to do. Want to take a look?

[Derek Wickern (dwickern)]

In this scenario, is it possible to infer this from the containing object literal? Or declare somehow that wrap does not change the context?

let foo = {
hello: "hello",
f() {
return this.hello; // works
},
get p() {
return this.hello; // works
},
g: wrap(function () {
return this.hello; // TS2683:'this' implicitly has type 'any' because it does not have a type annotation.
})
}

[Jessica Franco (Jessidhia)]

I haven’t tested it but it should be possible with generics.

declarefunctionwrap<T,Fextends(this: T)=>any>(f: F): F

[Derek Wickern (dwickern)]

Unfortunately that doesn't seem to work without specifying wrap<{ hello: string }>(function() { ... }).