navigation-api-types

import './src/global.d.ts'; // Ensure your global type definitions are included (or adjust path) // src/global.d.ts (or similar file in your project): // /// <reference types="navigation-api-types" /> // --- main.ts (or any application file) --- function setupNavigationListener() { if ('navigation' in window) { console.log('Navigation API is supported.'); // 'navigation' property now has types due to the reference directive window.navigation.addEventListener('navigate', (event: NavigateEvent) => { console.log(`Navigation event caught: ${event.destination.url}`); if (event.destination.url.includes('/sensitive')) { event.intercept({ async handler() { console.log('Intercepting navigation to sensitive area.'); // Simulate some async work, e.g., auth check await new Promise(resolve => setTimeout(resolve, 500)); console.log('Navigation intercepted and handled.'); // You might redirect or prevent default here } }); } }); console.log('Navigation event listener added.'); } else { console.warn('Navigation API is not supported in this browser.'); } } setupNavigationListener(); // Example of directly accessing a typed API property if ('navigation' in window && window.navigation.currentEntry) { console.log('Current navigation entry ID:', window.navigation.currentEntry.id); } // To make this runnable, ensure a tsconfig.json is set up to include global.d.ts // and compile with tsc.