title: Angular Private Inner Interface (aka Typescript Nested Class)
body: <h2>How can I use a nested interface in an Angular directive?</h2>
  
  <p>In Java, I find static nested classes a great way to organize code. I'd like to do the same in Typescript/Angular but am having trouble getting it all setup.</p>
  
  <p>The code below comes close to working. But I'm having trouble with whether I export the namespace or not</p>
  
  <p>If I do, then I can't declare the directive in the module that holds it. I get the following warning:</p>
  
  <blockquote>
    <p>MyDirective is not declared in any Angular module. </p>
  </blockquote>
  
  <p>If I do not, then I have trouble typing objects as <code>MyDirective.DirectiveOptions</code> because of the following error: </p>
  
  <blockquote>
    <p>TS2702: 'MyDirective' only refers to a type, but is being used as a namespace here.</p>
  </blockquote>
  
  <p>My directive</p>
  
  <pre><code>@Directive({
      selector: '[appMyDirective]'
  })
  export class MyDirective implements OnInit {
      defaultDirectiveOptions: MyDirective.DirectiveOptions = {
          callback: () =&gt; {console.log('default callback called')}
      };
  
      @Input('appMyDirective')
      directiveOptions: MyDirective.DirectiveOptions = {};
  
      ngOnInit(): void {
          this.directiveOptions = {...this.defaultDirectiveOptions, ...this.directiveOptions};
      }
  }
  
  // Seems like a dumb way to nest an interface, but whatever.
  export namespace MyDirective {
      export interface DirectiveOptions {
          callback?: () =&gt; void;
      }
  }
  </code></pre>
  
  <p>Elsewhere in a <code>foo.component.ts</code> file:</p>
  
  <pre><code>options: MyDirective.DirectiveOptions = {
      callback: ()=&gt;{
          console.log('Overridden callback called');
      }
  }
  </code></pre>