TypeScript Route Parameter Parsing

Route parameters are essential in web applications, but they need proper handling and validation. Let's explore a TypeScript solution that makes this process robust and type-safe.

The parseRouteParamsToNumber Function

export function parseRouteParamsToNumber(id: string | string[] | undefined): Number | null {
  if (id) {
    if (Array.isArray(id)) {
      if (id.length === 0) return null
      id = id[0] // take the first element if id is an array
    }
    return isNaN(Number(id)) ? null : Number(id)
  } else {
    return null
  }
}

This utility function handles various input scenarios:

• Single string parameters
• Array of strings
• Undefined values
• Invalid number formats

Understanding the Implementation

Type Annotations

• Input accepts string | string[] | undefined
• Returns Number | null
• Ensures type safety throughout

Input Validation

1. Checks for falsy values
2. Handles array inputs
3. Validates number conversion
4. Returns appropriate results

Usage Examples

Example 1: Single String Parameter

import { parseRouteParamsToNumber } from './utils'

const productId = parseRouteParamsToNumber('123') // Returns 123

Example 2: Array Parameter

import { parseRouteParamsToNumber } from './utils'

const productIds = parseRouteParamsToNumber(['123', '456']) // Returns 123

Example 3: Invalid Input Handling

import { parseRouteParamsToNumber } from './utils'

const invalidId = parseRouteParamsToNumber('abc') // Returns null
const emptyArray = parseRouteParamsToNumber([]) // Returns null
const undefinedValue = parseRouteParamsToNumber(undefined) // Returns null

Best Practices

1. Type Safety

   • Use TypeScript's type system effectively
   • Define clear return types
   • Handle edge cases explicitly

2. Input Validation

   • Check for undefined values
   • Validate number conversion
   • Handle array cases properly

3. Error Handling

   • Return null for invalid inputs
   • Maintain consistent return types
   • Document edge cases

Applications

• Route parameter validation
• API endpoint parsing
• Form input processing
• Data conversion utilities

Remember that well-handled route parameters contribute to a robust and maintainable application.