TypeScript Basics: Understanding How Variable Types are Determined

When you declare a variable in TypeScript, the compiler needs to figure out what type to assign to that variable. In this post, we will cover how TypeScript infers variable’s type. Knowing this is important to build a solid understanding of the language.

There are three different ways TypeScript figures out types: type annotation, inferred typing, and duck typing.

Let’s cover each of them in more detail.

Type annotation

Type annotation is the most explicit way to tell TypeScript what type a variable should be. In this method, you use a colon after the type name to specify the variable’s type. For example:

1

const myNumber: number = 123;

Here we tell TypeScript that the myNumber variable should have a number type. In other words, it can only store numbers and no strings or any other data type.

What happens if we try to assign a string to myNumber? TypeScript will give us the following error because we are not allowed to store strings in a number variable:
Type 'string' is not assignable to type 'number'

Inferred Typing

Inferred typing is the default way TypeScript determines a variable’s type. With this method, TypeScript will try its best to figure out the most appropriate type for the variable based on the initial value that you’re assigning to it.

1

const myString = "Hello world!"

In the example above, we have a variable called myString, and we try to assign it the value “Hello world!” In this case, TypeScript will infer that myString should be of type string because the string literal “Hello world!” is being assigned to myString. We didn’t need to assign the type to this variable explicitly using type annotation.

Inferred typing is flexible and allows TypeScript to adapt to the codebase. TypeScript tries to be as helpful as it can when using inferred typing and reduces the amount of type annotations you need to use.

However, it’s important to note that inferred typing can sometimes lead to errors if TypeScript can’t figure out the appropriate type. In those cases, you can always help TypeScript by manually annotating the variable type.

Duck Typing

TypeScript uses duck typing or structural subtyping on values other than primitives, like objects and arrays. Duck typing is a method where TypeScript looks at the shape of the object to figure out its type.

Duck typing adheres to the following principle: If an object “looks like” it has the same properties and methods as another object, then TypeScript will consider them to be of the same type. If it looks like a duck and quacks like a duck then it probably is a duck.

Take the following example:

1
2
3
4
5
6

let lion = { name: "Lion", sound: "roar" };
let dog = { name: "Dog", sound: "bark" };
let bird = { name: "Bird", sound: "chirps", fly: () => console.log("flying") };
lion = dog;
dog = bird;
bird = lion; // Error: Property 'fly' is missing in type...

In the example above, we’re able to assign dog to a lion because they both have the same set of properties: name and sound. However, we can’t assign lion to a bird because lion is missing the fly property that the bird object has. A good thing too; flying lions would be a scary sight.

Duck typing allows for more flexibility than type annotation. Even though lion and dog were not explicitly assigned the same type, TypeScript still considers them of the same type and we can use them interchangeably.

As you can see, TypeScript has a variety of ways to determine a variable’s type. Inferred typing or duck typing are used by default, but you can always fall back on type annotation if TypeScript is getting stuck.

Conclusion

That’s all for this post! We covered how TypeScript infers a variable’s type. We looked at three different ways TypeScript determines types: type annotation, inferred typing, and duck typing.

Inferred typing is the most common way TypeScript determines types. However, if TypeScript can’t infer the appropriate type automatically, you can always help it out by using type annotation.

Duck typing is a method where TypeScript looks at the shape of an object to determine its type, and it usually kicks in when working with arrays or objects. Thanks for reading!

If you’d like to get more web development, React and TypeScript tips consider following me on Twitter, where I share things as I learn them.
Happy coding!