Specify TypeScript Generics

Overview

Generics are implemented differently in each programming language. This is just the reality. C++, C#, and Java all have different rules and implementations for generics--TypeScript is no different.

TypeScript generics do not infer generics consistently like normal normal static languages.

Take a look at the following Vue computed function:

            
        const result = computed(() => {
          if (hook.valid) {
            return "valid";
          }
          return "";
        });
            
        

What do you thing the return type is?

You may think it is a ComputedRef of type string, but the type is actually:

            
        ComputedRef<"" | "valid">
            
        

The end result is the same, but this is a leaky abstraction. Our function should not leak the details of the exact return type. We want our function to return a string.

The only thing we need to change is:

            
        const result = computed<string>(() => {
          if (hook.valid) {
            return "valid";
          }
          return "";
        });
            
        

And, now, our return type is fixed.

Specifying every generic in your application is likely excessive. Some functions are able to infer your return types with accuracy--others not so much. Keeping your return types in check will help contribute to a rock solid code base.