TfL API TypeScript Client Demo
A demonstration component showcasing the `tfl-ts` npm package - a fully-typed TypeScript client for the Transport for London (TfL) API. Features real-time London transport data, live status updates, and comprehensive coverage of all TfL services including Tube, Bus, DLR, Overground, and more.
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:
Live TfL Status
Powered by tfl-ts npm package
Service Disruptions
Waterloo & City
Central
Mildmay
Suffragette
Bus arrivals
Enter a TfL stop point ID (e.g. 490008660N for a bus stop). Find IDs on TfL bus stops.
Good Service(16 lines)
Northern
Jubilee
Piccadilly
District
Victoria
Circle
Hammersmith & City
Bakerloo
Metropolitan
DLR
Tram
Elizabeth line
Liberty
Lioness
Weaver
Windrush
Data provided by Transport for London via the tfl-ts npm package. Updated in real-time.
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