JS with Types Start

Type expression

this parameters

  • Functions
  • Tested with TypeScript 5.9

TypeScript lets a function type declare the type of this as a first, fake parameter: (this: HTMLInputElement, event: Event) => void. It is not a real argument; callers pass only event. In a .js file you write it inside a function type, or use the @this tag on a function declaration.

The declaration is checked at both ends: inside the function this has the declared type, and a call that would give it a different this (or none) is an error, as the second example shows with TS2684.

At a glance

Use JSDoc in a .js file TypeScript in a .ts file
In a function type /** @type {(this: HTMLInputElement, event: Event) => void} */ : (this: HTMLInputElement, event: Event) => void
On a declaration /** @this {HTMLInputElement} */ function trim() {} function trim(this: HTMLInputElement) {}
In a method type {{ total(this: Cart): number }} { total(this: Cart): number }

Examples

field.js field.ts TypeScript 5.9.3 TypeScript 5.9.3, run 21 October 2026: No errors. 6.0.3 TypeScript 6.0.3, run 21 October 2026: the same as 5.9.3. No errors. 7.0.2 TypeScript 7.0.2, run 21 October 2026: the same as 5.9.3. No errors. checked 21 October 2026 
/** @type {(this: HTMLInputElement, event: Event) => void} */
const trimOnBlur = function (event) {
  this.value = this.value.trim();
  event.stopPropagation();
};

const field = document.createElement("input");
field.addEventListener("blur", trimOnBlur);

export { trimOnBlur };
const trimOnBlur: (this: HTMLInputElement, event: Event) => void = function (event) {
  this.value = this.value.trim();
  event.stopPropagation();
};

const field = document.createElement("input");
field.addEventListener("blur", trimOnBlur);

export { trimOnBlur };
A this parameter in a function type.
jsconfig.json for this example 
{
  "compilerOptions": {
    "checkJs": true,
    "noEmit": true,
    "strict": true,
    "target": "es2022",
    "module": "nodenext",
    "types": []
  },
  "include": ["*.js"]
}
cart.js Error confirmed 5.9.3 TypeScript 5.9.3, run 21 October 2026: cart.js(14,1): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Cart'. 6.0.3 TypeScript 6.0.3, run 21 October 2026: the same as 5.9.3. cart.js(14,1): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Cart'. 7.0.2 TypeScript 7.0.2, run 21 October 2026: the same as 5.9.3. cart.js(14,1): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Cart'. checked 21 October 2026 
/** @typedef {{ lines: number[], total(this: Cart): number }} Cart */

/** @type {Cart} */
const cart = {
  lines: [19.5, 12],
  total() {
    return this.lines.reduce((sum, price) => sum + price, 0);
  },
};

cart.total();
const { total } = cart;
total();error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Cart'.

export { cart };
A method that needs its this, called on its own.
jsconfig.json for this example 
{
  "compilerOptions": {
    "checkJs": true,
    "noEmit": true,
    "strict": true,
    "target": "es2022",
    "module": "nodenext",
    "types": []
  },
  "include": ["*.js"]
}
field.js Error confirmed 5.9.3 TypeScript 5.9.3, run 21 October 2026: field.js(4,3): error TS2532: Object is possibly 'undefined'. 6.0.3 TypeScript 6.0.3, run 21 October 2026: the same as 5.9.3. field.js(4,3): error TS2532: Object is possibly 'undefined'. 7.0.2 TypeScript 7.0.2, run 21 October 2026: the same as 5.9.3. field.js(4,3): error TS2532: Object is possibly 'undefined'. checked 21 October 2026 
/** @type {(this: HTMLInputElement) => void} */
const clear = () => {
  this.value = "";error TS2532: Object is possibly 'undefined'.
};

export { clear };
An arrow function ignores the declared this.
jsconfig.json for this example 
{
  "compilerOptions": {
    "checkJs": true,
    "noEmit": true,
    "strict": true,
    "target": "es2022",
    "module": "nodenext",
    "types": []
  },
  "include": ["*.js"]
}

Detached methods

A method declared with a this parameter cannot be pulled off its object and called on its own: const { total } = cart; total() calls it with no this, which TypeScript reports as TS2684 ("The 'this' context of type 'void' is not assignable…"). Without the this parameter, the same mistake fails only at run time.

Arrow functions

Arrow functions do not have their own this, so a this parameter in the type does not apply to them. In the third example the arrow function's this is the module's this, which is undefined in an ES module, and TypeScript reports TS2532. Use a function expression when the code needs the declared this.

Gotchas

  • The this parameter must come first in the list.
  • Utility types read it: ThisParameterType<F> extracts it and OmitThisParameter<F> removes it.

Questions

How do I declare the type of this in a JSDoc function type?

As a first parameter named this: @type {(this: HTMLElement, event: MouseEvent) => void}. For a function declaration, @this {HTMLElement} does the same.

  • JSDoc tag

    @this

    The JSDoc @this tag gives this a type inside a function, such as an event handler, and makes TypeScript check every call for that this. Syntax and examples.

  • Type expression

    Function types

    Writing function types in JSDoc: TypeScript's arrow syntax (price: number) => string, the older function(number): string, and Function. Examples and errors.

  • JSDoc tag

    @type

    The JSDoc @type tag gives a variable, property or expression a type that TypeScript checks: the syntax, casts with parentheses, and whole function types.

  • TypeScript error

    TS2683: this has no type in a plain function

    TS2683 means a function that is not a method uses this, so the checker does not know what this is. Declare it with @this, or use event.currentTarget.

  • jsconfig.json option

    noImplicitThis

    noImplicitThis reports this inside a function where TypeScript cannot tell what it is (TS2683). In JavaScript, a @this tag says what it is.

Sources

Last reviewed 20 October 2026.