How do I type "this" inside a JavaScript function?

The short answer

Add @this {Type} to the function’s JSDoc. Here the handler is attached to buttons, so this is an HTMLButtonElement:

/**
 * @this {HTMLButtonElement}
 * @param {MouseEvent} event
 */
function toggleSaved(event) {
  const saved = this.classList.toggle("saved");
  this.textContent = saved ? "Saved" : "Save";
  if (event.shiftKey) this.blur();
}

for (const button of document.querySelectorAll("button")) {
  button.addEventListener("click", toggleSaved);
}

function toggleSaved(this: HTMLButtonElement, event: MouseEvent): void {
  const saved = this.classList.toggle("saved");
  this.textContent = saved ? "Saved" : "Save";
  if (event.shiftKey) this.blur();
}

for (const button of document.querySelectorAll("button")) {
  button.addEventListener("click", toggleSaved);
}

Inside toggleSaved, this.classList and this.blur() are checked against the button type, and addEventListener accepts the function because its this matches the element the listener is added to.

Why it works

JavaScript decides this when a function is called, not when it is written, so the checker cannot work it out from the function alone. @this {HTMLButtonElement} is the JSDoc form of TypeScript’s fake first parameter, this: HTMLButtonElement: it types this in the body, and it is checked at every call, which must supply a matching this.

The same thing in TypeScript

The TypeScript equivalent tab declares function toggleSaved(this: HTMLButtonElement, event: MouseEvent). The this parameter is not a real argument; it disappears when the code runs, which is why JavaScript needs a JSDoc tag for it instead.

What goes wrong

Without the tag, strict (through noImplicitThis) reports the first use of this (TS2683):

/** @param {MouseEvent} event */
function toggleSaved(event) {
  const saved = this.classList.toggle("saved");error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
  return saved && event.shiftKey;
}

for (const button of document.querySelectorAll("button")) {
  button.addEventListener("click", toggleSaved);
}

With the tag, the calls are checked instead. A plain call supplies no this at all, so it fails with TS2684:

/**
 * @this {HTMLButtonElement}
 * @param {MouseEvent} event
 */
function toggleSaved(event) {
  this.classList.toggle("saved");
  return event.shiftKey;
}

toggleSaved(new MouseEvent("click"));error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'HTMLButtonElement'.

Call it with toggleSaved.call(button, event), or let addEventListener call it, and the error goes away.

Gotchas

• @this belongs to normal functions. On an arrow function it is an error (TS2730, “An arrow function cannot have a ‘this’ parameter”), because arrow functions never get a this of their own.
• The element type must match. button.addEventListener("click", toggleSaved) passes because the button is an HTMLButtonElement. Adding the same listener to a <div>, or to the plain Element that querySelector(".save") returns, fails with TS2769; narrow the element with instanceof HTMLButtonElement first. That check leans on the typed event parameter: a handler with no parameters also matches addEventListener’s catch-all signature, and the wrong element goes unreported (the @this page shows that case).
• A constructor function is different. A function that assigns to this.x is treated as a constructor, so its this is never an implicit any; a class is the clearer way to write it.