Chapter 12: TypeScript Functions

Part 1: The Basics – Function Types and Signatures

Function Parameter Types

Every parameter can (and should!) have a type:

typescript

What TypeScript does here:

  • ✅ Ensures you call greet with exactly 2 arguments

  • ✅ Ensures first argument is a string, second is a number

  • ✅ Ensures the function returns a string

  • ✅ Gives you full IntelliSense when calling the function

Return Type Inference

TypeScript is smart – it often knows what you return:

typescript

Rule of thumb: Let TypeScript infer return types for simple functions. Explicitly annotate return types for complex functions or public APIs.

Part 2: Optional and Default Parameters

Optional Parameters

Use ? to mark parameters that aren’t required:

typescript

Important: Optional parameters must come AFTER required parameters:

typescript

Default Parameters

Provide default values that are used when no argument is passed:

typescript

Type inference with defaults:

typescript

Part 3: Rest Parameters – Variable Arguments

When you need a function that accepts any number of arguments:

typescript

Mixing Required and Rest Parameters

typescript

Part 4: Function Types – Functions as Values

Functions are values in JavaScript. TypeScript lets you type them:

Declaring Function Types

typescript

Function as Parameters

typescript

Part 5: Overloads – Multiple Calling Signatures

Sometimes a function can be called in different ways. Function overloads let you describe each valid calling pattern:

Basic Overloads

typescript

Real-World Overload Example

typescript

Part 6: Generic Functions – Type Variables

Generic functions work with ANY type, while maintaining type safety:

Basic Generics

typescript

Generic Constraints

Sometimes you need to restrict what types can be used:

typescript

Part 7: this Typing – The Often-Forgotten Parameter

JavaScript’s this is notoriously tricky. TypeScript helps:

Typing this in Functions

typescript

this Parameters in Callbacks

typescript

Part 8: Async Functions and Promises

TypeScript fully supports async/await:

Basic Async Functions

typescript

Async Error Handling

typescript

Part 9: Advanced Function Patterns

Curry Functions

typescript

Function Composition

typescript

Partial Application

typescript

Part 10: Real-World Case Study – Complete API Client

Let’s build a fully-typed API client that demonstrates everything we’ve learned:

typescript

Part 11: Function Best Practices

DO:

  1. Use explicit return types for public APIs – Document the contract

  2. Use generics for reusable logic – Don’t use any

  3. Prefer pure functions – Same input, same output, no side effects

  4. Keep functions small and focused – One responsibility per function

  5. Use overloads for complex calling patterns – But don’t overdo it

  6. Leverage type inference for simple functions – Let TypeScript work

DON’T:

  1. Don’t use function parameters as output – Return values instead

  2. Don’t over-abstract – Not everything needs to be a generic

  3. Don’t ignore this typing – It will bite you

  4. Don’t use Function type – It’s any in disguise

  5. Don’t create deep callback chains – Use async/await

The Big Picture

Functions in TypeScript aren’t just about adding types to JavaScript functions. They’re about creating contracts that make your code:

  1. Self-documenting – Types tell you exactly what a function needs and returns

  2. Safe – Compiler catches mistakes before runtime

  3. Maintainable – Refactoring is fearless when types guide you

  4. Reusable – Generics create flexible, type-safe utilities

  5. Composable – Function types let you build complex operations from simple pieces

Every function you write in TypeScript is an opportunity to create a clear, verifiable contract. When you define parameters, return types, and generics, you’re not just satisfying the compiler – you’re communicating with your future self and your teammates.

Remember: The best TypeScript function is one that’s impossible to call incorrectly. When someone looks at your function signature, they should immediately know:

  • What information they need to provide

  • What they’ll get back

  • What could go wrong

  • How to use it correctly

That’s the power of TypeScript functions – turning dynamic, error-prone operations into predictable, verifiable building blocks.

Does this help clarify TypeScript functions? Would you like me to elaborate on any specific aspect or show more examples of advanced function patterns?

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *