title: Generic type 'CanDeactivate<T>' requires 1 type argument(s)
body: <p>In the code below (an example from the book "Angular 2 Development with TypeScript"):</p>
  
  <pre><code>import {CanDeactivate, Router} from "@angular/router";
  import {Injectable} from "@angular/core";
  
  @Injectable()
  export class UnsavedChangesGuard implements CanDeactivate{
  
      constructor(private _router:Router){}
  
      canDeactivate(){
          return window.confirm("You have unsaved changes. Still want to leave?");
  
      }
  }
  </code></pre>
  
  <p>I see a warning when I hover over CanDeactivate in WebStorm:</p>
  
  <p><a href="https://i.stack.imgur.com/u5O4S.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u5O4S.png" alt="enter image description here"></a></p>
  
  <p>Referring to the answers to this question - <a href="https://stackoverflow.com/questions/41757684/generic-type-observablet-requires-1-type-argument">Generic type &#39;Observable&lt;T&gt;&#39; requires 1 type argument</a> - the following change removes the warning:</p>
  
  <pre><code>export class UnsavedChangesGuard implements CanDeactivate&lt;any&gt;{
  </code></pre>
  
  <p>However, <strong>I would like to know how I can find out what is the actual argument that CanDeactivate requires</strong>.</p>
  
  <p>Edit: Looking at @angular/router/src/interfaces.d.ts we can see the following:</p>
  
  <pre><code>/**
   * @whatItDoes Indicates that a class can implement to be a guard deciding if a route can be
   * deactivated.
   *
   * @howToUse
   *
   * ```
   * class UserToken {}
   * class Permissions {
   *   canDeactivate(user: UserToken, id: string): boolean {
   *     return true;
   *   }
   * }
   *
   * @Injectable()
   * class CanDeactivateTeam implements CanDeactivate&lt;TeamComponent&gt; {
   *   constructor(private permissions: Permissions, private currentUser: UserToken) {}
   *
   *   canDeactivate(
   *     component: TeamComponent,
   *     route: ActivatedRouteSnapshot,
   *     state: RouterStateSnapshot
   *   ): Observable&lt;boolean&gt;|Promise&lt;boolean&gt;|boolean {
   *     return this.permissions.canDeactivate(this.currentUser, route.params.id);
   *   }
   * }
   *
   * @NgModule({
   *   imports: [
   *     RouterModule.forRoot([
   *       {
   *         path: 'team/:id',
   *         component: TeamCmp,
   *         canDeactivate: [CanDeactivateTeam]
   *       }
   *     ])
   *   ],
   *   providers: [CanDeactivateTeam, UserToken, Permissions]
   * })
   * class AppModule {}
   * ```
   *
   * You can also provide a function with the same signature instead of the class:
   *
   * ```
   * @NgModule({
   *   imports: [
   *     RouterModule.forRoot([
   *       {
   *         path: 'team/:id',
   *         component: TeamCmp,
   *         canActivate: ['canDeactivateTeam']
   *       }
   *     ])
   *   ],
   *   providers: [
   *     {
   *       provide: 'canDeactivateTeam',
   *       useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =&gt; true
   *     }
   *   ]
   * })
   * class AppModule {}
   * ```
   *
   * @stable
   */
  export interface CanDeactivate&lt;T&gt; {
      canDeactivate(component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean;
  }
  </code></pre>
  
  <p>But it's not clear what "TeamComponent" is.</p>