ReviseAlgo Logo

Functions in TypeScript

Typing Arrow Functions vs Function Declarations

Compare typing syntax, scope binding, hoists, generic syntax differences, and best practices for Arrow Functions vs Function Declarations in TypeScript.

Last Updated: July 29, 2026 • 10 min read

In TypeScript, both Function Declarations and Arrow Functions can be strongly typed, but they differ in type annotation syntax, generic syntax, this binding, and hoisting behavior.

1. Syntax Comparison

Function Declarations

Function declarations annotate parameter and return types inline in the header:

Arrow Functions

Arrow functions can annotate parameter/return types inline, or utilize a separate Function Type Expression:

2. Generics in Arrow Functions vs Declarations

When writing generic functions, arrow functions in JSX/TSX files require a trailing comma , after the type parameter so the compiler doesn't mistake the generic bracket for an HTML tag.

Generic Function Declaration

Generic Arrow Function in TSX Files

3. Key Differences Table

FeatureFunction DeclarationsArrow Functions
HoistingHoisted to top of scopeNot hoisted (Temporal Dead Zone)
this BindingDynamic (Call-site)Lexical (Inherited from parent scope)
Fake this ParameterSupported (function(this: Context))Not Supported
Type Expression AssignmentCannot be directly assigned a type aliasCan be assigned to a type alias
Generic TSX SyntaxRequires in TSX files
arguments ObjectAccessibleNot Accessible

4. When to Use Which Syntax

Use Function Declarations When:

  • Writing top-level module utility functions that benefit from hoisting.
  • Writing functions that require custom, dynamic this binding (e.g. DOM event listeners or class prototypes).
  • Defining complex Function Overloads.

    • Use Arrow Functions When:

  • Passing inline callbacks to array methods (.map(), .filter(), .reduce()).
  • Writing React Functional Components or event handler callbacks.
  • Preserving parent lexical this context inside methods or timeouts.

    • 5. Interactive Code Playground

    Compare function declaration vs arrow function syntax below:

    6. Common Pitfalls & Edge Cases

  • JSX Ambiguity with Generic Arrow Functions: Writing const fn = (val: T) => val; inside a .tsx file results in a parse error: Unterminated JSX contents. Always write or in TSX files.

    • 7. Summary Checklist

  • [x] Use function declarations for overloaded or hoisted top-level functions.
  • [x] Use arrow functions for callbacks, HOFs, and preserving lexical this.
  • [x] Add a trailing comma to generic arrow functions in .tsx files.
  • [x] Separate Function Type Expressions (type Fn = (a: number) => string) work seamlessly with arrow functions.