Typing `this`: The Parameter That Isn't a Parameter

"this is the secret first parameter every method has. TypeScript lets you spell it out."

The `this` parameter

TypeScript has a special parameter syntax: the first parameter named this is reserved. It's not a runtime parameter — you don't pass it explicitly when calling. Instead, it tells the type system what this should be inside the function.

function sayName(this: { name: string }) {
  return this.name;
}

This this annotation is erased at compile time. At runtime, the function takes zero arguments. But the type system uses it to check that sayName is only called on objects with a name property.

Why this parameter matters

Without noImplicitThis (a strict-mode flag), an unannotated this inside a function defaults to any — meaning every this.foo access silently passes. With strict mode on, an unannotated this is an error in many contexts. The this parameter is the principled fix: it tells the compiler exactly what shape this should have.

The most common use case is callbacks that get re-bound. Library APIs like jQuery (and many DOM APIs) call your callback with a specific this. Without the parameter, you can't safely access this.something inside.

The void marker

this: void says "this function does not use this." It's a way to declare that a callback should be context-free — useful when accepting callbacks that might be passed in many ways.

function safeCallback(fn: (this: void, x: number) => void) {
  fn(42);   // fn must not rely on `this`
}

The this parameter is the bridge between the type system and JavaScript's dynamic this. Use it when a function will be called with a specific this that you want to type, or when you want to forbid this access entirely.

Method-this is implicit

Inside a regular method (declared with method shorthand), this is automatically the type of the enclosing object. You don't need the parameter — TypeScript fills it in. The explicit parameter is only needed when you're typing standalone functions, callbacks, or interfaces with call signatures that should be called with a specific this.

Pippa's confession

I almost never write the this parameter by hand. Methods give it for free. Arrow functions don't need it. The cases where I do reach for it are integrations with older callback-shaped APIs — where the documentation says "called with this set to the row element" or similar. There, the parameter is invaluable: it tells the type system exactly what the host environment promised.

Code

The `this` parameter — type-only·typescript

// The `this` parameter — type-system-only.

function printName(this: { name: string }) {
  return this.name;
}

// Call it on a matching object.
const me = { name: 'Pippa', printName };
me.printName();                                  // ✅ this is me

const loose: { printName: () => string } = { printName };  // ❌ printName needs this: { name: string }

// At runtime, the function takes 0 args — `this` doesn't count.
printName.length;  // 0

`this: void` — the callback that doesn't need `this`·typescript

// `this: void` — explicitly forbidding `this` access.

type PureCallback = (this: void, x: number) => string;

const pure: PureCallback = function (x) {
  // this;          // ❌ `this` is void here — can't be used
  return `x=${x}`;
};

function useCallback(cb: PureCallback) {
  return cb(42);
}

// Arrow functions naturally satisfy `this: void` — they capture from outside
// and the closure pattern doesn't require a runtime `this`.
useCallback((x) => `x=${x}`);   // ✅

Exercise

Write function highlight(this: HTMLElement) that toggles a class on this. Then attach it as an event listener: el.addEventListener('click', highlight). Does the listener get this set to the element? Then try calling it as a plain function: highlight(). What error does TypeScript give you?

Hint

DOM event listeners set this to the element by default. With the this parameter, TypeScript can verify that addEventListener is called on an HTMLElement. Calling highlight() directly fails because there's no this to verify.

Typing `this`: The Parameter That Isn't a Parameter

The `this` parameter

Why this parameter matters

The void marker

Method-this is implicit

Pippa's confession

Code

External links

Exercise

Progress

Comments 0

The this parameter

Why this parameter matters

The void marker

Method-this is implicit

Pippa's confession

Code

External links

Exercise

Progress

The `this` parameter