Type annotation for `this` keyword in Typescript

by

First of all, you can use the special this parameter syntax to identify the type of object you expect this to be:

function foo (this: {bar: string}) {
    return this.bar; // no more error
}

which helps if you call it directly:

foo(); // error, this is undefined, not {bar: string}

var barHaver = { bar: "hello", doFoo: foo };
barHaver.doFoo(); // acceptable, since barHaver.bar is a string

var carHaver = { car: "hello", doFoo: foo };
carHaver.doFoo(); // unacceptable, carHaver.bar is undefined

UPDATE for TS3.2+

TypeScript 3.2 introduced the --strictBindCallApply compiler option which strongly types the .call() method of functions. If you use this (or the --strict suite of compiler features which includes this), then the this parameter will also enforce that foo.call() behave as desired:

foo.call({ bar: "baz" }); // okay
foo.call({ baz: "quux" }); // error!

Playground link to code

pre TS3.2 answer follows:

But you want to use foo.call(). Unfortunately the Function.prototype.call() typing in TypeScript won’t really enforce this restriction for you:

foo.call({ bar: "baz" }); // okay, but
foo.call({ baz: "quux" }); // no error, too bad!

Merging something better into TypeScript’s Function declaration caused me problems, (First point of ugliness; you will need to cast foo to something) so you can try something like this:

interface ThisFunction<T extends {} = {}, R extends any = any, A extends any = any> {
  (this: T, ...args: A[]): R;
  call(thisArg: T, ...args: A[]): R;
}

A ThisFunction<T,R,A> is a function with a this of type T, a return value of type R, and a rest argument of type A[]. (Second point of ugliness: you can’t easily specify multiple arguments of different types in a way that will be enforced by the type system.)

You can then cast foo to ThisFunction<{ bar: string }, string>, (Third point of ugliness: the type system just will not infer this types) and then finally use call():

(<ThisFunction<{ bar: string }, string>>foo).call({ bar: "baz" }); // okay, and
(<ThisFunction<{ bar: string }, string>>foo).call({ baz: "quux" }); // error, hooray!

More Related Contents:

  1. combining two arrays in specific format
  2. Interface type check with Typescript
  3. How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2
  4. Importing lodash into angular2 + typescript application
  5. Get keys of a Typescript interface as array of strings
  6. angular 2 how to return data from subscribe
  7. Why does the argument for Array.prototype.includes(searchElement) need the same type as array elements?
  8. Deep copy an array in Angular 2 + TypeScript
  9. How to call JavaScript functions from Typescript in Angular 5?
  10. ngOnInit not being called when Injectable class is Instantiated
  11. Angular 2 – communication of typescript functions with external js libraries
  12. what is new() in Typescript?
  13. Get list of duplicate objects in an array of objects
  14. Rxjs toPromise() deprecated
  15. Is any JavaScript code a valid TypeScript code?
  16. How to check for isBrowser in Angular 4
  17. How to achieve a debounce service on input keyup event in angular2 with rxjs
  18. How to resolve Node.js ES6 (ESM) Modules with the TypeScript Compiler (TSC). TSC doesn’t emit the correct file-ext
  19. TypeError: Class extends value undefined is not a function or null
  20. Return an empty Observable
  21. “You may need an additional loader to handle the result of these loaders.”
  22. Missing basic DOM types in TypeScript project
  23. Subscribe to observable is returning undefined
  24. Can you create nested classes in TypeScript?
  25. Error: Cannot invoke an expression whose type lacks a call signature
  26. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  27. intellisense and code complete for DefinitelyTyped (TypeScript type definitions) on WebStorm IDE
  28. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  29. Preserve Type when using Object.entries
  30. Transforming TypeScript into JavaScript

Leave a Comment