TfL API TypeScript Client Demo

A demonstration of the tfl-ts npm package - a fully-typed TypeScript client for the Transport for London (TfL) API. This component showcases real-time London transport data using the published npm library.

About the Library

The tfl-ts package provides:

• Zero dependencies - Lightweight and fast
• Fully typed - Complete TypeScript support with auto-generated types
• Real-time data - Live transport status and arrivals
• Comprehensive coverage - All TfL endpoints including Tube, Bus, DLR, Overground, and more
• Modern API - Built with modern TypeScript practices

Installation

npm install tfl-ts

Basic Usage

import TfLClients from "tfl-ts";

const tfl = new TfLClients();

// Get tube status
const tubeStatus = await tfl.line.getStatus({ modes: ['tube'] });

// Get arrivals for a station
const arrivals = await tfl.stopPoint.getArrivals({ id: '940GZZLUPAC' });

// Plan a journey
const journey = await tfl.journey.getJourney({
  from: '940GZZLUPAC',
  to: '940GZZLUVIC',
  date: '2024-01-15',
  time: '09:30'
});

Live Demo

This component demonstrates real-time London transport data using the tfl-ts library:

Key Features Demonstrated

• Real-time Status Updates - Live transport line status with severity indicators
• Visual Line Representation - Authentic TfL line colors and branding
• Smart Sorting - Lines with issues prioritized, good service grouped
• Responsive Design - Works across all device sizes
• Accessibility - Proper ARIA labels and keyboard navigation
• Dark Mode Support - Seamless theme switching

API Coverage

The library supports all major TfL services:

• Underground - All 11 tube lines
• Overground - London Overground network
• DLR - Docklands Light Railway
• Elizabeth Line - Crossrail services
• Tram - London Tramlink
• Bus - All London bus routes
• River Services - Thames Clippers
• Cable Car - Emirates Air Line

Type Safety

Every API response is fully typed:

// Fully typed responses
const status: LineStatus[] = await tfl.line.getStatus({ modes: ['tube'] });
const arrivals: Arrival[] = await tfl.stopPoint.getArrivals({ id: '940GZZLUPAC' });
const journey: Journey[] = await tfl.journey.getJourney({ from: 'A', to: 'B' });

Error Handling

The library provides comprehensive error handling:

try {
  const status = await tfl.line.getStatus({ modes: ['tube'] });
} catch (error) {
  if (error instanceof TfLError) {
    console.log('TfL API Error:', error.message);
  }
}

Performance

• Zero dependencies - No bloat
• Tree-shakable - Only import what you use
• Caching support - Built-in request caching
• Batch requests - Efficient API usage

Links

• npm package
• GitHub repository
• TfL API documentation