DEV Community

Kuncheria Kuruvilla
Kuncheria Kuruvilla

Posted on • Edited on

TypeScript Magic: Extracting Route Parameters with Conditional Types

#typescript #webdev #programming

In the world of web development, building and managing routes is a common task. Whether you're creating a RESTful API or a dynamic web application, handling route parameters is essential. TypeScript, a statically typed superset of JavaScript, offers a powerful feature known as conditional types. In this blog post, we'll delve into a piece of TypeScript magic that demonstrates how to extract route parameters from a path string using conditional types.

The IsPathParameter and GetPathParameter Types

Our journey begins with two TypeScript types: IsPathParameter and GetPathParameter.

IsPathParameter<Part extends string>

The IsPathParameter type takes a string Part as a parameter and serves as our starting point. It's designed to check whether Part corresponds to a path parameter or a wildcard in a route. Here's how it works:

type IsPathParameter<Part extends string> = 
    Part extends `:${infer Parameter}` ? Parameter : 
    Part extends `*` ? '*' : 
    never;
Enter fullscreen mode Exit fullscreen mode
  • If Part begins with a colon (":"), it uses the infer keyword to capture the parameter name after the colon. This parameter name is then returned.
  • If Part is an asterisk (""), it simply returns a string containing "".
  • If neither of these conditions is met, it returns never, indicating that the input is neither a parameter nor a wildcard.

GetPathParameter<Path extends string>

Now, let's move to the GetPathParameter type. This type is where the magic happens. It takes a path string Path as a parameter and recursively breaks it down to extract route parameters. Here's the definition:

export type GetPathParameter<Path extends string> =
  Path extends `${infer A}/${infer B}`
    ? IsPathParameter<A> | GetPathParameter<B>
    : IsPathParameter<Path>;
Enter fullscreen mode Exit fullscreen mode
  • It begins by checking if the Path can be divided into two segments using a slash ("/"). If it can, it proceeds to check the first segment (A).
  • If A corresponds to a route parameter, it includes it in the result, and then it recursively analyzes the second segment (B).
  • If the Path can't be divided any further, the type checks whether the whole Path is a route parameter. If it is, it includes it in the result.

Practical Application: Building a Record

Let's put these types into action by building a Record type. We'll use GetPathParameter to extract route parameters from a path string and create a record type. Here's an example:

type X = Record<GetPathParameter<'base/:a/:b'>, string>;
Enter fullscreen mode Exit fullscreen mode

In this example, we're defining a type X by using Record. We pass the string 'base/:a/:b' to GetPathParameter. As a result, X becomes a record type with keys based on the route parameters in the path and values of type string.

Conclusion

Conditional types, as demonstrated by IsPathParameter and GetPathParameter, provide a powerful mechanism for handling complex type transformations in TypeScript. These types can be invaluable when working with routing systems, ensuring type safety and making your code more robust. So, whether you're creating APIs or web applications, remember that TypeScript has the tools to handle route parameters effectively.

Top comments (0)