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.
v0.0.1
🍰
🏃
🎓
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
Fully Typed
Complete TypeScript support
Zero Dependencies
Lightweight & fast
Real-time Data
Live transport updates
Service Disruptions
Suffragette
SuspendedNo service on the entire line due to a broken down freight train at Woodgrange Park. London Underground are accepting tickets via any reasonable route.
Piccadilly
Severe DelaysNo service between Acton Town and Uxbridge / Heathrow Terminals while we fix a points failure at Acton Town. SEVERE DELAYS on the rest of the line. Tickets being accepted on London Buses, Elizabeth Line and South Western Railway.
Part SuspendedNo service between Acton Town and Uxbridge / Heathrow Terminals while we fix a points failure at Acton Town. SEVERE DELAYS on the rest of the line. Tickets being accepted on London Buses, Elizabeth Line and South Western Railway.
District
Part SuspendedNo service between Turnham Green and Ealing Broadway. GOOD SERVICE on the rest of the line. Tickets are being accepted on London Buses, London Overground and South Western Railway.
Tram
Part ClosureLONDON TRAMLINK: Tuesday 26 May, no service between Addiscombe and Birkbeck / Elmers End due to emergency engineering works. A shuttle service will operate between Beckenham Junction and Birkbeck. Please use local bus services for other destinations. Valid Tram tickets will be accepted.
Part SuspendedLondon Tramlink: No service between Addiscombe and Birkbeck / Elmers End due to emergency engineering works. A shuttle service will operate between Beckenham Junction and Birkbeck. GOOD SERVICE on the rest of the Tramlink Network.
Central
Severe DelaysSevere delays due to train cancellations. Tickets are being accepted on London Buses and London Overground.
Mildmay
Severe DelaysSevere delays between Willesden Junction and Richmond due to train cancellations.
Northern
Minor DelaysMinor delays between Camden Town and Edgware while we fix a points failure at Edgware. GOOD SERVICE on the rest of the line.
Elizabeth line
Minor DelaysMinor delays between Whitechapel and Shenfield due to an earlier signal system failure. GOOD SERVICE on the rest of the line.
Bus arrivals
Enter a TfL stop point ID (e.g. 490008660N for a bus stop). Find IDs on TfL bus stops.
Good Service(12 lines)
Jubilee
Victoria
Circle
Hammersmith & City
Bakerloo
Metropolitan
Waterloo & City
DLR
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