Why is Route#data a type instead of an interface?

[nartc]

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Description

A clear and concise description of the problem...

When we work on the routing configuration, sometimes we leverage the Route#data property to add metadata for a specific route. Eg: permissions information like the following:

In my use-case, I'd like to type Route#data to have an optional property requiredPermission which is a Tuple of [PermissionNames, Privilege]. And I want to enforce this type specifically for requiredPermission if it is added to a Route#data. Normally, I'd just go to typings.d.ts (or whatever *.d.ts you have at root) and override a library's interface there. Eg:

But for the case of Route#data, it has type Data = {} tied to it and Type does not allow for Declaration Merging so TypeScript doesn't allow me to override Route#data as the above screenshot shows. This prevents me from enforcing the correct typings for requiredPermission, hence leads to bad Developer Experience (in our cases) and Runtime bugs (instead of Compilation time).

If Route#data was an interface (which allows for Declaration Merging), I could indeed achieve the following:

Before writing up this issue, I was going to submit a PR right away to "fix" the bug. But looking at the source code, there are many different places (other than Route#data) being given types with Type instead of interface.

• Is there a reason for using Type rather than Interface for these cases?
• If I were to submit a PR, would I need to take into consideration of other Type other than Route#data to change those into Interface?

🔬 Minimal Reproduction

A good way to reproduce this (as the screenshots above have shown) is to:

1. Create a new Angular app (or use existing Angular app)
2. Create a typings.d.ts on the same level as main.ts (or use existing *.d.ts on that same level)
3. Try to merge Data to have custom typed properties:

declare module '@angular/router'  {
   interface Data {
      requiredPermission?: [number, string]
   }
}

4. TypeScript will show error: Duplicate identifier Data

Issues that don't have enough info and can't be reproduced will be closed.

You can read more about issue submission guidelines here: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-submitting-an-issue
-->

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.8
Node: 12.13.0
OS: darwin x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.8
@angular-devkit/core         9.1.8
@angular-devkit/schematics   9.1.8
@schematics/angular          9.1.8
@schematics/update           0.901.8
rxjs                         6.5.4

[atscott]

Related issue #27240

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[Erbenos]

Hypothetically you can already extend Route interface itself rather than the Route.data. Given that Route.data is written to by eg.: route resolvers, perhaps that may already be preferential?

Conflicts can be worked around by using Symbols, except that you would lose autocomplete see microsoft/TypeScript#54870, grouping all metadata under single key, and/or using some property name prefixing I suppose.

Any such extension would be accessible via eg.: ActivatedRoute.routeConfig.