🎯

callback-this-type

🎯Skill

from marius-townhouse/effective-typescript-skills

What it does

Explicitly types and documents the `this` context in callbacks, enabling better type safety and autocompletion for library and event handler functions.

📦

Part of

marius-townhouse/effective-typescript-skills(83 items)

callback-this-type

Installation

Quick InstallInstall with npx

npx skills add marius-townhouse/effective-typescript-skills --all

Quick InstallInstall with npx

npx skills add marius-townhouse/effective-typescript-skills -s prefer-unknown-over-any exhaustiveness-checking

Quick InstallInstall with npx

npx skills add marius-townhouse/effective-typescript-skills -a opencode claude-code

Quick InstallInstall with npx

npx skills add marius-townhouse/effective-typescript-skills -l

git cloneClone repository

git clone https://github.com/marius-townhouse/effective-typescript-skills.git

📖 Extracted from docs: marius-townhouse/effective-typescript-skills

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Use when callbacks use this. Use when API provides this context. Use when typing event handlers. Use when library sets this in callbacks. Use when documenting callback context.

Overview

# Provide a Type for this in Callbacks if It's Part of Their API

Overview

When a library calls a user-provided callback with a specific this context, that context is part of the API. TypeScript allows you to type this as the first parameter of a function, even though it's not a real parameter. This documents and enforces the expected context.

When to Use This Skill

Callbacks use this
API provides this context
Typing event handlers
Library sets this in callbacks
Documenting callback context

The Iron Rule

Type this as the first parameter when it's part of your callback API. This documents the expected context and enables autocompletion.

Example

```typescript

// BAD: this is untyped

interface EventEmitter {

on(event: string, handler: (data: any) => void): void;

}

// User doesn't know what 'this' is:

emitter.on('click', function(data) {

this.something; // What properties does this have?

});

// GOOD: this is typed

interface EventEmitter {

on(

event: string,

handler: (this: EventContext, data: any) => void

): void;

}

interface EventContext {

target: Element;

timestamp: number;

preventDefault(): void;

}

// User now gets autocompletion for 'this'

emitter.on('click', function(data) {

this.target; // Autocomplete works!

this.timestamp; // Typed as number

});

```

Reference

Effective TypeScript, 2nd Edition by Dan Vanderkam
Item 69: Provide a Type for this in Callbacks if It's Part of Their API

More from this repository10

🎯

tsdoc-comments🎯Skill

Generates TypeScript documentation comments (TSDoc) to explain public APIs, complex types, and provide comprehensive code documentation with IDE tooltips.

🎯

async-over-callbacks🎯Skill

Transforms callback-based asynchronous code into clean, readable async/await patterns for better type flow and error handling.

🎯

type-safe-monkey-patching🎯Skill

Enables type-safe runtime extension of global objects and DOM elements in TypeScript without sacrificing type checking or using `as any`.

🎯

create-objects-all-at-once🎯Skill

Efficiently initializes multiple TypeScript objects simultaneously using concise object literal syntax and spread operators.

🎯

module-by-module-migration🎯Skill

Guides developers through systematic TypeScript module migration, breaking down complex refactoring into manageable, incremental steps.

🎯

ts-js-relationship🎯Skill

Explains TypeScript's relationship to JavaScript, highlighting how it adds static typing and catches errors before runtime while remaining fully compatible with JavaScript code.

🎯

code-gen-independent🎯Skill

Generates JavaScript code despite TypeScript type errors and demonstrates that TypeScript types are erased at runtime, requiring alternative type checking strategies.

🎯

context-type-inference🎯Skill

Helps restore precise type context when extracting values, preventing type inference errors through annotations, const assertions, and type preservation techniques.

🎯

precise-string-types🎯Skill

Enforces strict string type constraints and prevents unintended string type conversions in TypeScript projects.

🎯

type-display-attention🎯Skill

Displays and simplifies complex TypeScript types to improve IDE readability and developer experience.