this in TypeScript

A method that loses its cart

A shop's cart has an add method. Inside it, this means the cart the method was called on: the object before the dot. Copy the method out of the cart and call it on its own, and there is no cart any more (the Losing this lesson shows why). Here is that bug in TypeScript:

1class Cart {2  items: string[] = [];3  add(item: string) {4    this.items.push(item);5  }6}7 8const cart = new Cart();9const add = cart.add;10add("Tea");11console.log(cart.items);

Lines 1 to 6 are a Cart class (Class basics covers classes). Line 2 is a field: every cart starts with an empty list of item names, typed string[]. Line 3 is the add method, and line 4 pushes the item onto this.items.

Line 8 makes a cart. Line 9 copies the method into add, without the cart. Line 10 calls it with nothing before the dot. Code inside a class always runs in strict mode, so this is undefined, and line 4 throws TypeError: Cannot read properties of undefined (reading 'items'). Line 11 never runs. The list under the code is empty: TypeScript assumes a class's method is always called on an object of that class.

One small change makes TypeScript check it. Line 3 now starts with this: Cart:

1class Cart {2  items: string[] = [];3  add(this: Cart, item: string) {4    this.items.push(item);5  }6}7 8const cart = new Cart();9const add = cart.add;10add("Tea");11console.log(cart.items);

this: Cart looks like a parameter, but it isn't one you pass. It tells TypeScript what this must be whenever add runs. Now line 10 gets an error, on purpose, because it's the bug:

• The 'this' context of type 'void' is not assignable to method's 'this' of type 'Cart' means "this call has no object before the dot, and add needs a Cart as this". TypeScript calls the missing object void, its word for "nothing here".
• The code still throws when it runs. The error is a warning for you, before anyone clicks a button.

The this parameter

A this parameter always goes first in the brackets, and it works in any function, not only in classes. This function describes whichever product it's called on:

1type Product = { name: string; price: number };2 3function describe(this: Product) {4  return `${this.name}: $${this.price.toFixed(2)}`;5}6 7const tea = { name: "Tea", price: 3, describe };8console.log(tea.describe());

Line 1 names the shape of a product: a name and a number price. Line 3 says describe's this must be a Product. Line 4 reads this.name and this.price, and TypeScript knows both, because it knows what this is. Line 7 puts the function into a tea object as a method; { describe } is short for { describe: describe }. Line 8 calls tea.describe() and prints Tea: $3.00.

A function's call method runs it with the this you choose (call, apply, and bind covers it). Try five ways to call describe on line 8:

1type Product = { name: string; price: number };2 3function describe(this: Product) {4  return `${this.name}: $${this.price.toFixed(2)}`;5}6 7const tea = { name: "Tea", price: 3, describe };8console.log(tea.describe());

tea.describe() and describe.call(tea) both give this a product, so there are no errors. describe() gets the same error as the cart's line 10. describe.call({ name: "Cake" }) gets an ordinary argument error, because call's first argument is checked against Product, and this one has no price.

The table below lists the ways to call a function with a this parameter. Read each row as: this call, what this is, and what TypeScript checks.

Like every type, the this parameter is only there for TypeScript. It checks the calls, then removes it, so the browser gets a describe with no parameters at all:

function describe() {
  return `${this.name}: $${this.price.toFixed(2)}`;
}

const tea = { name: "Tea", price: 3, describe };
console.log(tea.describe());

Line 1 has empty brackets: this: Product is gone, and so is the type on line 1 of the TypeScript. The rest is the same code, and line 6 still prints Tea: $3.00. This is also why describe takes no argument for this: there was never a real parameter to fill.

noImplicitThis: a this with no type

What if a function uses this and you don't say what it is? Here is a click handler written as a plain function:

1const button = document.createElement("button");2 3function markActive() {4  this.classList.add("active");5//^?6}7button.addEventListener("click", markActive);8button.click();9console.log(button.className);

Line 1 makes a <button>. Lines 3 to 6 are the handler, and line 4 adds the class active to this. Line 7 makes it the button's click handler (Introduction to events covers addEventListener), line 8 clicks the button, and line 9 prints active. The browser calls a click handler with the element as this, so the code works.

But markActive is a plain function, and code anywhere could call it in any way. TypeScript can't know what this will be, so it gives it the type any, which turns checking off. The query on line 5 shows any. The error on line 4 is on purpose: 'this' implicitly has type 'any' because it does not have a type annotation. In plain words: "you used this, and I would have to guess its type".

That error comes from a compiler option called noImplicitThis. The strict option, which every example here uses, turns it on. Try the handler with it on, with it off, and with a this parameter:

1const button = document.createElement("button");2 3function markActive() {4  this.classList.add("active");5//^?6}7button.addEventListener("click", markActive);8button.click();9console.log(button.className);

With noImplicitThis off, the error is gone, but this is still any. That's worse than an error, because nothing you do with this is checked. Here a typo gets through:

1const button = document.createElement("button");2 3function markActive() {4  this.clasList.add("active");5}6button.addEventListener("click", markActive);7button.click();

Line 4 says clasList, with one s. TypeScript reports nothing, because this is any. When line 7 clicks the button, this.clasList is undefined, and the handler throws TypeError: Cannot read properties of undefined (reading 'add'). With this: HTMLButtonElement, TypeScript would have asked Did you mean 'classList'?

You don't need a this parameter everywhere. In an object's own methods, TypeScript works this out for you:

1const settings = {2  theme: "dark",3  toggle() {4    this.theme = this.theme === "dark" ? "light" : "dark";5  //^?6  },7};8settings.toggle();9console.log(settings.theme);

Lines 1 to 7 make a settings object with a theme and a toggle method. Line 4 flips the theme between dark and light. The query on line 5 shows that TypeScript knows this is the object itself: this: { theme: string; toggle(): void; }. Line 8 calls settings.toggle(), and line 9 prints light. Class methods work the same way: inside them, this is an object made by the class.

The table below shows where TypeScript knows this. Read each row as: where you write this, what TypeScript thinks it is, and whether you need a this parameter.

Methods passed as callbacks

Methods often go to other functions as callbacks: to forEach, to a click listener, to a timer (Callbacks covers the idea). The other function calls yours later, usually with nothing before the dot. Does a this parameter catch that?

1class Cart {2  items: string[] = [];3  add(this: Cart, item: string) {4    this.items.push(item);5  }6}7 8const cart = new Cart();9["Tea", "Cake"].forEach(cart.add);10console.log(cart.items.length);

Line 3 has this: Cart. Line 9 hands cart.add to forEach, which calls it once per item with nothing before the dot. It throws a TypeError, and TypeScript reports nothing.

TypeScript compares this types only when both sides have one. The callback type forEach asks for, (value, index, array) => void, says nothing about this, so there's nothing to compare Cart with. setTimeout's callback type says nothing about this either. So does the general type that addEventListener falls back to when a listener doesn't fit its precise one.

A function can say what this its callback gets. Below, line 1 describes a callback with (this: void, item: string) => void: a function that takes one item and is called with nothing before the dot. Line 4 calls it exactly that way. Now try four ways to hand over cart.add on line 15:

1type ItemCallback = (this: void, item: string) => void;2 3function forEachItem(items: string[], callback: ItemCallback) {4  for (const item of items) callback(item);5}6 7class Cart {8  items: string[] = [];9  add(this: Cart, item: string) {10    this.items.push(item);11  }12}13 14const cart = new Cart();15forEachItem(["Tea", "Cake"], cart.add);16console.log(cart.items.length);

Pass cart.add gets an error, because add needs a Cart and forEachItem promises nothing. The full message says Type 'void' is not assignable to type 'Cart'. Wrap it in an arrow and Bind it to the cart both keep the cart, and print 2. Use forEach is back to no errors and a crash. So write this: void in callback types you design, and wrap or bind a method whenever you hand it over.

bind makes a new function whose this is fixed. TypeScript works out the new function's type too:

1class Cart {2  items: string[] = [];3  add(this: Cart, item: string) {4    this.items.push(item);5  }6}7 8const cart = new Cart();9const addToCart = cart.add.bind(cart);10//    ^?11addToCart("Tea");12console.log(cart.items.length);

Line 9 binds add to the cart. The query on line 10 shows const addToCart: (item: string) => void: it still takes an item, and the this part is gone, because it's always the cart. Line 11 calls it on its own, and line 12 prints 1.

Arrow functions and this

An arrow function has no this of its own. Inside it, this means whatever it meant in the code around the arrow (Arrow functions and this covers it). That makes an arrow function the simplest way to write a method that can't lose its object:

1class Cart {2  items: string[] = [];3  add = (item: string) => {4    this.items.push(item);5  };6}7 8const cart = new Cart();9["Tea", "Cake"].forEach(cart.add);10console.log(cart.items.length);

Line 3 makes add a field whose value is an arrow function. A field's starting value is worked out as each cart is made, where this is the new cart. So this add keeps that cart as its this for good. Line 9 hands cart.add to forEach with no wrapper, and line 10 prints 2.

Because an arrow function has no this, it can't have a this parameter either:

1type Product = { name: string; price: number };2 3const describe = (this: Product) => {4  return `${this.name}: $${this.price}`;5};

Line 3 gets An arrow function cannot have a 'this' parameter. Line 4 gets two more errors: TypeScript uses the this outside the arrow, not your Product. This code sits at the top of a module file, where this is undefined, so both reads get Object is possibly 'undefined'. Use function when you want a this parameter.

The same rule catches people out in objects:

1const settings = {2  theme: "dark",3  label: () => `Theme: ${this.theme}`,4};5console.log(settings.label());

Line 3 makes label an arrow function. You might expect its this to be settings, but an arrow uses the this around the object, not the object. TypeScript marks line 3 on purpose: Object is possibly 'undefined': it checks the code as a module file, where the this around the object is undefined, and reading from it would throw. This page runs the code as a plain script instead, where that this is the browser's window, which has no theme, so line 5 prints Theme: undefined. Either way, it isn't settings. For a method that uses this, write label() { … }, like toggle earlier.

So there are two good ways to write add. The table below compares them. Read each row as a question, then each way's answer.

A search box that reacts to typing

A search box on a shop page updates the results as the shopper types. A class holds the box and what has been typed, and listens for the box's input event. Here is the version many people write first:

1class SearchBox {2  query = "";3  input = document.createElement("input");4 5  constructor() {6    this.input.addEventListener("input", this.update);7  }8 9  update() {10    this.query = this.input.value.trim();11    console.log(`Searching for ${this.query}`);12  }13}14 15const search = new SearchBox();16search.input.value = "  green tea ";17search.input.dispatchEvent(new Event("input"));

Line 2 starts query empty, and line 3 makes the <input> box. Line 6, in the constructor, says: when the box changes, call this.update. Lines 9 to 12 are update: line 10 reads the box's text, trims the spaces, and stores it, and line 11 prints it. Lines 15 to 17 make a search box, put " green tea " in it, and send an input event, as typing would.

TypeScript reports nothing, but it throws. The browser calls an event handler with the element as this, so inside update, this is the <input>, not the search box. The <input> has no input property, so line 10 throws TypeError: Cannot read properties of undefined (reading 'value'). Even this: SearchBox on line 9 wouldn't help here: addEventListener falls back to its general type, which accepts any listener and says nothing about this. The fix is an arrow function:

1class SearchBox {2  query = "";3  input = document.createElement("input");4 5  constructor() {6    this.input.addEventListener("input", this.update);7  }8 9  update = () => {10    this.query = this.input.value.trim();11    console.log(`Searching for ${this.query}`);12  };13}14 15const search = new SearchBox();16search.input.value = "  green tea ";17search.input.dispatchEvent(new Event("input"));

Line 9 makes update an arrow function field, made as each search box is made. Its this is always the search box, whoever calls it. Line 10 reads the box's text, and line 11 prints Searching for green tea. Handlers in classes, for clicks, typing, and timers, are where arrow function fields are used most.

Common mix-ups

• "A this parameter is a real parameter I have to pass." No. It only tells TypeScript what this must be, and it's removed before the code runs. You still call cart.add("Tea") with one argument.
• "With this: Cart, TypeScript catches every lost this." No. It checks calls it can see, and callback types that say what this is. forEach(cart.add) and event listeners get no error.
• "noImplicitThis changes what this is when the code runs." No. Compiler options only change what TypeScript checks. The browser decides this the same way either way.
• "Every function that uses this needs a this parameter." No. In an object's or a class's own methods, TypeScript already knows this. Plain functions, like handlers, are the ones that need it.
• "An arrow function is always the safe choice for this." No. In a class field it keeps the object, but as a method in an object literal it gets the this around the object, not the object.
• "bind loses the types." No. TypeScript knows cart.add.bind(cart) is a (item: string) => void, and it checks that the object you bind fits.

Practice exercises

Each exercise is TypeScript. When you fix code, press Edit & run on the starter code: the errors update as you type, and the console shows what it prints. Try a guess first, then use the hints.

type User = { firstName: string };

function greet(this: User) {
  return `Hi, ${this.firstName}`;
}

const asha = { firstName: "Asha", greet };
console.log(asha.greet());
console.log(greet.call(asha));
console.log(greet());

1type User = { firstName: string };2 3function greet(this: User) {4  return `Hi, ${this.firstName}`;5}6 7const asha = { firstName: "Asha", greet };8console.log(asha.greet());9console.log(greet.call(asha));10console.log(greet()); // line 10: no user before the dot

1type User = { firstName: string };2 3function greet() {4  return `Hi, ${this.firstName}`;5}6 7const asha = { firstName: "Asha", greet };8console.log(asha.greet());

1type User = { firstName: string };2 3function greet(this: User) {4  return `Hi, ${this.firstName}`;5}6 7const asha = { firstName: "Asha", greet };8console.log(asha.greet());

1const button = document.createElement("button");2let clicks = 0;3 4function countClick() {5  clicks += 1;6  this.textContent = `Clicked ${clicks} times`;7}8button.addEventListener("click", countClick);9button.click();10button.click();11console.log(button.textContent);

1const button = document.createElement("button");2let clicks = 0;3 4function countClick(this: HTMLButtonElement) {5  clicks += 1;6  this.textContent = `Clicked ${clicks} times`;7}8button.addEventListener("click", countClick);9button.click();10button.click();11console.log(button.textContent);

1type ProductCallback = (this: void, product: string) => void;2 3function forEachProduct(products: string[], callback: ProductCallback) {4  for (const product of products) callback(product);5}6 7class Wishlist {8  saved: string[] = [];9  save(this: Wishlist, product: string) {10    this.saved.push(product);11  }12}13 14const wishlist = new Wishlist();15forEachProduct(["Tea", "Cake", "Jam"], wishlist.save);16console.log(wishlist.saved.length);

1type ProductCallback = (this: void, product: string) => void;2 3function forEachProduct(products: string[], callback: ProductCallback) {4  for (const product of products) callback(product);5}6 7class Wishlist {8  saved: string[] = [];9  save(this: Wishlist, product: string) {10    this.saved.push(product);11  }12}13 14const wishlist = new Wishlist();15forEachProduct(["Tea", "Cake", "Jam"], (product) => wishlist.save(product));16console.log(wishlist.saved.length);

1class LikeCounter {2  likes = 0;3  like() {4    this.likes += 1;5  }6}7 8const counter = new LikeCounter();9["post-1", "post-2", "post-3"].forEach(counter.like);10console.log(counter.likes);

1class LikeCounter {2  likes = 0;3  like = () => {4    this.likes += 1;5  };6}7 8const counter = new LikeCounter();9["post-1", "post-2", "post-3"].forEach(counter.like);10console.log(counter.likes);

1const profile = {2  firstName: "Asha",3  greeting: () => `Hi, ${this.firstName}`,4};5console.log(profile.greeting());

1const profile = {2  firstName: "Asha",3  greeting() {4    return `Hi, ${this.firstName}`;5  },6};7console.log(profile.greeting());

Check your understanding

For each question, ask two things: what is before the dot when the function runs, and does TypeScript see that call? The quiz shows its code without the checker, so the error list doesn't give the answers away.

Key takeaways

• In JavaScript, this is decided by the call. A method called on its own, or handed to other code, can lose its object.
• A this parameter, like this: Cart, goes first in a function's brackets. TypeScript checks every call against it, then removes it.
• noImplicitThis, part of strict, reports a this with no type in a plain function. Methods of objects and classes don't need one.
• TypeScript catches a lost this only where it can compare: a direct call, or a callback type that says this: void. forEach and event listeners don't.
• To keep the object, wrap the call in an arrow function, use bind, or make the method an arrow function field.
• An arrow function has no this of its own, so it can't have a this parameter, and it's the wrong choice for a method in an object literal.

Coming next: Narrowing with typeof & truthiness. It shows how TypeScript reads your if checks to work out a more precise type for a value.