Beginner's TypeScript #8

⭐ Function Return Type Annotations ⭐

Continuing from last time, we have a User that includes an array of posts.

This time instead of having a defaultUser, we have a makeUser function that should return a user.

const makeUser = () => {
  return {};
}

At this current starting point, the function is returning an empty object.

We will figure out how to annotate the makeUser function to ensure it always returns a User.

👉 Solution:

The solution is to add a colon and the type we want to return after the parentheses when the function is defined.

In this case, we will add : User since we want to return a User.

Before:

const makeUser = () => {
  // ...
}

After:

const makeUser = (): User => {
  // ...
}

Specifying the type a function returns will check our code as we write it.

For example, User expects id to be a number. If we pass it a string, TypeScript will show us the error inside of the return object right away.

Notice that if we do not include everything that User expects, the errors all show within the makeUser function where the errors are instead of in the tests at the bottom of the file.

Adding type return annotations allows us to be more strict in ensuring that our function is safe on the inside as well as the outside.

✍️ Experiment Without the Return Type:

If we erase the : User from the makeUser function declaration, hovering over the function in VS Code will display a preview of what the function returns.

What is impressive about it is that it infers the types based on what is present in the return object. Even if we comment out the User, TypeScript will show information about each of the object's properties.

---

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:

• Medium: https://medium.com/@nhannguyendevjs/
• Dev: https://dev.to/nhannguyendevjs/
• Hashnode: https://nhannguyen.hashnode.dev/
• Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
• X (formerly Twitter): https://twitter.com/nhannguyendevjs/