Add typing to router events

packages/next/client/router.ts

@@ -1,6 +1,9 @@
 /* global window */
 import React from 'react'
-import Router, { NextRouter } from '../next-server/lib/router/router'
+import Router, {
+  NextRouter,
+  RouterEvents,
+} from '../next-server/lib/router/router'
 import { RouterContext } from '../next-server/lib/router-context'
 
 type ClassArguments<T> = T extends new (...args: infer U) => any ? U : any
@@ -44,7 +47,7 @@ const urlPropertyFields = [
   'isPreview',
   'isLocaleDomain',
 ]
-const routerEvents = [
+const routerEvents: RouterEvents[] = [
   'routeChangeStart',
   'beforeHistoryChange',
   'routeChangeComplete',
@@ -89,7 +92,7 @@ coreMethodFields.forEach((field: string) => {
   }
 })
 
-routerEvents.forEach((event: string) => {
+routerEvents.forEach((event) => {
   singletonRouter.ready(() => {
     Router.events.on(event, (...args) => {
       const eventField = `on${event.charAt(0).toUpperCase()}${event.substring(

packages/next/next-server/lib/mitt.ts

@@ -14,29 +14,32 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 // It's been edited for the needs of this script
 // See the LICENSE at the top of the file
 
-type Handler = (...evts: any[]) => void
+type Handler<Event = any> = (...evts: Event[]) => void
 
-export type MittEmitter = {
-  on(type: string, handler: Handler): void
-  off(type: string, handler: Handler): void
-  emit(type: string, ...evts: any[]): void
+export type MittEmitter<EventType extends string = string, Event = any> = {
+  on(type: EventType, handler: Handler<Event>): void
+  off(type: EventType, handler: Handler<Event>): void
+  emit(type: EventType, ...evts: Event[]): void
 }
 
-export default function mitt(): MittEmitter {
+export default function mitt<
+  EventType extends string = string,
+  Event = any
+>(): MittEmitter<EventType, Event> {
   const all: { [s: string]: Handler[] } = Object.create(null)
 
   return {
-    on(type: string, handler: Handler) {
+    on(type: EventType, handler: Handler<Event>) {
       ;(all[type] || (all[type] = [])).push(handler)
     },
 
-    off(type: string, handler: Handler) {
+    off(type: EventType, handler: Handler<Event>) {
       if (all[type]) {
         all[type].splice(all[type].indexOf(handler) >>> 0, 1)
       }
     },
 
-    emit(type: string, ...evts: any[]) {
+    emit(type: EventType, ...evts: Event[]) {
       // eslint-disable-next-line array-callback-return
       ;(all[type] || []).slice().map((handler: Handler) => {
         handler(...evts)

packages/next/next-server/lib/router/router.ts

@@ -442,6 +442,14 @@ type ComponentLoadCancel = (() => void) | null
 
 type HistoryMethod = 'replaceState' | 'pushState'
 
+export type RouterEvents =
+  | 'routeChangeStart'
+  | 'routeChangeComplete'
+  | 'routeChangeError'
+  | 'beforeHistoryChange'
+  | 'hashChangeStart'
+  | 'hashChangeComplete'
+
 const manualScrollRestoration =
   process.env.__NEXT_SCROLL_RESTORATION &&
   typeof window !== 'undefined' &&
@@ -522,7 +530,7 @@ export default class Router implements BaseRouter {
   clc: ComponentLoadCancel
   pageLoader: any
   _bps: BeforePopStateCallback | undefined
-  events: MittEmitter
+  events: MittEmitter<RouterEvents>
   _wrapApp: (App: AppComponent) => any
   isSsr: boolean
   isFallback: boolean
@@ -538,7 +546,7 @@ export default class Router implements BaseRouter {
 
   private _idx: number = 0
 
-  static events: MittEmitter = mitt()
+  static events: MittEmitter<RouterEvents> = mitt()
 
   constructor(
     pathname: string,

test/integration/typescript/components/router.tsx

@@ -4,13 +4,13 @@ import Router, { withRouter } from 'next/router'
 
 export default withRouter(({ router }) => {
   React.useEffect(() => {
-    Router.events.on('event', () => {})
+    Router.events.on('routeChangeStart', () => {})
     Router.prefetch('/page')
     Router.push
     Router.back
     Router.reload
 
-    router.events.on('event', () => {})
+    router.events.on('routeChangeStart', () => {})
     router.prefetch('/page')
     router.push
     router.back