|is an alias name, to which variables or functions can be assigned to. @see: https://docs.angularjs.org/guide/directive
|Dependency Injection list, it is resolved by angular and passing as an argument to constuctor functions.
While doing the directive in TypeScript, keep in mind, that power of this language of custom type and interfaces that you can create. This is extremely helpfull when developing huge applications. Code completion supported by many IDE will show you the possible value by corresponding type you are working with, so there is far more less that should be kept in mind (comparing to VanillaJS).
"Code Against Interfaces, Not Implementations"