TypeScript中如何为泛型接口数组定义正确类型

报错说明 #

触发的TS报错信息：
TS2314: Generic type 'Route ' requires 1 type argument(s).

报错原因：Route是要求传入1个类型参数的泛型接口，直接声明routes: Route[]时缺失必填的泛型参数，因此类型检查不通过。

问题复现 #

interface Route<T> {
  path: string
  handler: () => T
}

class Router {
  // 此处Route未传入泛型参数，触发报错
  routes: Route[] = []

  addRoute<T>(path: string, handler: Route<T>['handler']) {
    this.routes.push({
      path,
      handler
    })
  }
}

const router = new Router()
router.addRoute<string>('home', () => '123')

修复方案 #

如果路由数组需要兼容任意返回类型的handler，直接给Route接口的泛型参数设置默认值unknown即可，既满足泛型传参要求，也不会限制不同路由的handler返回类型：

// 给泛型T设置默认类型unknown
interface Route<T = unknown> {
  path: string
  handler: () => T
}

class Router {
  // 不传泛型参数时自动使用默认值unknown，不会触发报错
  routes: Route[] = []

  addRoute<T>(path: string, handler: Route<T>['handler']) {
    this.routes.push({
      path,
      handler
    })
  }
}

const router = new Router()
router.addRoute<string>('home', () => '123')
// 支持任意返回类型的路由注册
router.addRoute<number>('detail', () => 456)
router.addRoute<boolean>('status', () => true)

如果业务场景要求所有路由的handler返回类型统一，可以将Router定义为泛型类，在实例化时统一约束返回值类型即可。

内容的提问来源于stack exchange，提问作者Dmitriy Rudnik