{"id":2027,"date":"2024-04-03T16:36:51","date_gmt":"2024-04-03T23:36:51","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2027"},"modified":"2024-04-03T16:36:52","modified_gmt":"2024-04-03T23:36:52","slug":"understanding-angular-typescript-types","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/understanding-angular-typescript-types\/","title":{"rendered":"Understanding Angular\/Typescript types"},"content":{"rendered":"\n

First, some news: I’m running a public 5 half-day online Angular class<\/a> during the week of April 22nd. It’s the perfect class if you’re new to Angular or have some experience and want to ensure you know about all the fundamentals. It’s the ideal class to prepare for the Angular Level 1 certification<\/a> exam.<\/p>\n\n\n\n

On a side note, I can give private talks for your company or dev team on any topic, including Signals, the future of Angular, and more. Just email me for more info if you’d like to get such a talk planned in the future.<\/p>\n\n\n\n

Today, I want to cover a tricky topic for many developers I interact with: Reading and understanding Typescript type definitions from the Angular framework.<\/p>\n\n\n\n

For instance, let’s look at the type definition of the canActivate<\/code> function<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

We can tell CanActivateFn<\/code> is a function because:<\/p>\n\n\n\n

    \n
  1. The Angular team uses the Fn<\/code> suffix as a convention for all functions<\/li>\n\n\n\n
  2. The type signature is ( params ) => returnType<\/code>, which is how TypeScript defines types for functions. The arrow symbol =><\/code> is key there.<\/li>\n<\/ol>\n\n\n\n

    So, in that case, the function has two parameters, route<\/code> of type ActivatedRouteSnapshot<\/code>, and state<\/code> of type RouterStateSnapshot<\/code>. The function returns a type MaybeAsync<GuardResult><\/code>.<\/p>\n\n\n\n

    Here is what the type definition of MaybeAsync<\/a><\/code> looks like:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    <\/p>\n\n\n\n

    What does that mean? MaybeAsync<T><\/code> is a generic type, which means it works with any number of types, referred to as T<\/code> here. You can see T<\/code> as a type variable that gets replaced with an actual value decided when we use that type. For instance, if I end up using MaybeAsync<\/code> on a string<\/code>, T<\/code> becomes string<\/code>, and our type definition means:<\/p>\n\n\n\n

    type MaybeAsync<string> = string | Observable<string> | Promise<string><\/code><\/p>\n\n\n\n

    So MaybeAsync<string><\/code> can be either a string<\/code>, an Observable<\/code> that will return a string<\/code>, or a Promise<\/code> that will return a string<\/code>. That’s because the | character defines a union type<\/a> and can be seen as a logical OR. In other words: <\/p>\n\n\n\n

    MaybeAsync<string> IS A string OR Observable<string> OR Promise<string><\/code>.<\/p>\n\n\n\n

    Now, in the case of our CanActivate<\/code> function, the return type is MaybeAsync<GuardResult><\/code>. On angular.io<\/a>, most types are clickable (a lot less on angular.dev<\/a> for now). If I click on GuardResult<\/a><\/code> on this page<\/a>, I get to the following documentation entry:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    So a GuardResult<\/code> is either a boolean<\/code> or a UrlTree<\/code>. This tells us that a CanActivate<\/code> function can return six possible different types:<\/p>\n\n\n\n