Learn

If we’d like to be explicit about what type a function returns, we can add an explicit type annotation after its closing parenthesis. Here, we use the same syntax as other type annotations, a colon followed by the type. TypeScript will produce an error for any return statement in that function that doesn’t return the right type of value.

function createGreeting(name?: string): string {
  if (name) {
    return `Hello, ${name}!`;
  }

  return undefined;
  // Typescript Error: Type 'undefined' is not assignable to type 'string'.
};

We can also explicitly state return types for arrow functions (which were defined in the ES6/ES2015 version of JavaScript). We’ll see the same kinds of error messages for both function types.

const createArrowGreeting = (name?: string): string => {
  if (name) {
    return `Hello, ${name}!`;
  }

  return undefined;
  // Typescript Error: Type 'undefined' is not assignable to type 'string'.
};

Now let’s take a look at an example of how explicit return type annotation can be useful when we’re working with other people’s code.

Instructions

You’re designing an online multiplayer game where fruit battles against fruit for culinary supremacy.

The function getUserChoice() gets a user’s fruit choice entered as a number from 1 to 12. Then, returnFruit() runs a fruit-generating function (f1() through f12()) to return a filename '<fruitname>.jpg'.

First, let’s verify that this works. Add console.log(returnFruit()) to the code.

Click “Run” to save your changes, compile using tsc, then execute the code using node.

You may or may not have noticed a problem here. In fact, only 11 out of 12 of the functions f1() through f12() correctly return a fruit .jpg filename. Run the code a bunch more times until you see the problem. This might take a few tries, since getUserChoice() is always different.

2545434685676. What? That’s not a fruit. Clearly, one of the functions f1() through f12() are not working correctly. But which one? It would be a nightmare to have to look through all that source code! (That’s why we’ve disabled that option for you.)

You could just run them all one by one. But doing something 12 times is too much work. Instead, let TypeScript do the work for you. Think about which kind of type annotation can help you here. Then, implement it!

Finally, we can figure out which of the functions f1() through f12() have the problem. Once you know which one, type your answer as a code comment, in the following format:

//The problematic function is f2()

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?