However, often you don't have to. Similar to not having to specify the type of a variable that you immediately assign a value, TypeScript's type inference can also work out the return type of a function based on the return statement. Since TypeScript knows that adding two numbers still produces a number, it automatically deduces that the return type of the add function is a number. This is why the previous example not specifying a return type worked. Generally this works so effectively that it's rare you'll have to specify the return type yourself. However while practicing you can specify the return type to make sure your function returns the correct values. Later on when you write more advanced code, you may find you need to specify the return value in cases where TypeScript doesn't infer the exact type you want. So it's still worth knowing about the syntax for this.
It's also worth noting a function that does not return a value has the return type void in TypeScript. This applies to the logMessage function we used before - it doesn't return a value and so its return type is void.
If you want to check what return type TypeScript has inferred, you can hover the mouse over the function name in the code editor. A tooltip will then appear with the full function definition, including an explicit return type, indicating the return type that was inferred, e.g. function add(a: number, b: number): number.
Similar to break in loops or switch statements, return also exits the function early, so no code after it in the function will run.
function add(a: number, b: number)
{
return a + b;
// no code here will run, as 'return'
// also exits the function
}
You can also conditionally exit a function early, such as by returning in an 'if' statement.
function divide(a: number, b: number)
{
if (b === 0)
{
// Log a warning message
console.log("Dividing by zero!");
// Return 0 instead of Infinity or NaN
return 0;
}
// This only runs if it did not already return
return a / b;
}
console.log(divide(1, 0));
Remember that TypeScript infers the return type from the function's return statements. In this case every return statement returns a number, so the function return type is still number. However if a function returns a string in one place and a number in another, TypeScript will infer a return type that covers all possible cases - in this case string | number. This then makes the calling code have to check the type of the return value, so usually it's most straightforward to make sure a function always returns the same type in all cases.
Functions can still use return to exit early even if they don't need to return a value - in that case return; by itself with no value will just exit the function. This doesn't affect the fact they return void, as they still don't return any value in this case.
Don't add a newline after return
There's one significant pitfall to be aware of when using return. Back in part 2 we noted that often you can omit semicolons and TypeScript will guess where they are meant to go - a feature it has inherited from JavaScript. In part 4 we also covered how TypeScript generally doesn't care about where spaces or line breaks go. However if a line break comes after return, TypeScript always guesses the semicolon comes immediately after return. This is often a wrong guess and is generally regarded as a design mistake, but it's too late to change it and so we just have to live with it.
The following code snippet demonstrates code that won't work as expected.
function add(firstValue: number, secondValue: number, thirdValue: number)
{
// OOPS: line break after 'return'
return
firstValue + secondValue + thirdValue;
}
In this case TypeScript incorrectly guesses a semicolon goes after return. Then nothing after a return statement is run. So it's equivalent to writing this:
function add(firstValue: number, secondValue: number, thirdValue: number)
{
return;
}
TypeScript will then infer that the function returns void, so you'll probably notice the mistake when you try to write code that calls the function. However it's worth highlighting as it is a relatively easy mistake to make. This is one of the reasons automatic semicolon insertion is regarded as a mistake.
So the lesson here is never to have a line break after a return statement. Use code like the following instead.
function add(firstValue: number, secondValue: number, thirdValue: number)
{
// OK: no line break after 'return'
return firstValue + secondValue + thirdValue;
}