Function Types & this

TypeScript lets you describe functions as values — a function type names a callable's parameters and return type, a typed this pins down the calling context, and Parameters<F> / ReturnType<F> extract those pieces back out.

Learn Function Types & this in our free TypeScript course — an interactive lesson with runnable examples, a practice exercise and a quick reference.

Part of the free TypeScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

A function type is a job description: "must take two numbers, must return a number." Any worker (function) who fits can be hired for the role. this is "whose desk you're sitting at" when you do the job — it changes depending on who called you in. And Parameters / ReturnType are reading the job description back off the contract: what inputs it demands and what it promises to deliver.

1. Function Type Expressions & Signatures

A function type expression like names a callable shape, so any matching function — arrow or declaration — is assignable to it. For functions that also carry properties, an interface call signature works; for things you build with new , a construct signature ( ) describes the constructor.

2. Typing this

In JavaScript, this depends on how a function is called, which trips up both people and the type-checker. TypeScript lets you declare a fake first parameter named this to pin down what it must be — function increment(this: Counter) . It's erased at runtime and never passed by callers; it just makes this.count type-safe and silences noImplicitThis .

3. Parameters<F> , ReturnType<F> & Overloads

Two built-in utilities read a function's type apart: Parameters<F> gives the argument list as a tuple , and ReturnType<F> gives what it returns. Pair them with typeof fn so your types follow the function automatically. When a return type must vary by input shape, reach for overloads instead of a single union parameter.

🎯 Your Turn

Write a higher-order function that takes a function-typed callback and applies it twice. Fill in the two blanks marked ___ , then run it.

No blanks this time — just a brief and a starting outline. Build the dispatcher of function-typed formatters yourself, run it, and check your output against the example in the comments.

Practice quiz

What does a function type expression describe?

  • A function's name only
  • Its runtime performance
  • A function's parameters and return type (its shape)
  • Its source file

Answer: A function's parameters and return type (its shape). Something like '(a: number, b: number) => number' names a callable shape.

Any function matching the parameters and return type of 'type BinaryOp = (a: number, b: number) => number' is:

  • Assignable to BinaryOp
  • Rejected
  • Converted to a class
  • Made readonly

Answer: Assignable to BinaryOp. Structural typing means any function with matching shape is assignable to the function type.

How do you type 'this' inside a function?

  • With a real first argument
  • With the bind keyword
  • You cannot
  • With a fake first parameter named 'this' (e.g. function f(this: Counter))

Answer: With a fake first parameter named 'this' (e.g. function f(this: Counter)). A 'this' parameter is a fake first parameter; it is erased at runtime and never passed by callers.

Which strict-mode flag does a 'this' parameter help satisfy?

  • noImplicitAny
  • noImplicitThis
  • strictNullChecks
  • exactOptionalPropertyTypes

Answer: noImplicitThis. Typing 'this' fixes 'this implicitly has type any' errors under noImplicitThis.

What does Parameters<F> extract?

  • The parameter list as a tuple type
  • The return type
  • The function name
  • The number of arguments

Answer: The parameter list as a tuple type. Parameters<F> gives the argument list as a tuple type.

What does ReturnType<F> extract?

  • The parameter tuple
  • The this type
  • Whatever the function returns
  • The arity

Answer: Whatever the function returns. ReturnType<F> gives the function's return type.

Why pair these utilities with 'typeof someFunction'?

  • For faster runtime
  • So derived types stay in sync with the actual function automatically
  • To enable decorators
  • To avoid imports

Answer: So derived types stay in sync with the actual function automatically. Parameters<typeof fn> / ReturnType<typeof fn> follow the function, so types update when it changes.

Do arrow functions create their own 'this'?

  • Yes, always
  • Only in strict mode
  • Only as methods
  • No — they capture 'this' lexically from where they are defined

Answer: No — they capture 'this' lexically from where they are defined. Arrow functions do not rebind this; they reuse the surrounding this, ideal for callbacks.

What describes a value you call with 'new'?

  • A call signature

A construct signature (new (...) => T) describes a constructor.

When should you choose overloads over a union parameter?

  • Always
  • When there is one argument
  • When the return type must vary by input shape
  • Never

Answer: When the return type must vary by input shape. Overloads express different return types per input; a single union parameter cannot.