Add type annotations to the function arguments
The solution is to add type annotations to the function's arguments.
In this case, both a
and b
should be typed as number
:
export const addTwoNumbers = (a: number, b: number) => {
return a + b;
};
Type Annotations are Critical to Understanding TypeScript
TypeScript relies on type annotations to understand the contracts the function must meet. Type annotations are critical to understanding TypeScript.
Whenever you create a function, you must always specify the types of each argument!
To help you remember this fundamental rule, I recommend turning on strict mode for all TypeScript projects.
When strict mode is enabled, you'll get the implicitly has 'any' type
error whenever you leave type annotations out.
But why can't TypeScript just look at the +
and know that a
and b
are numbers?
Experiment with Different Types
Try setting the types of a
and b
to be string
.
Running the test again, TypeScript would give you an error:
Argument of type 'number' is not assignable to parameter of type 'string'
Updating the test code to pass strings into addTwoNumbers
ends up giving runtime errors.
Changing a type to a Boolean won't work because you can't add a boolean to a number.
A string can have a number appended to it with +
, but the test would fail.
Transcript
The solution, then, is to add some type annotations to the function's arguments. A, now, is typed as a number and B is typed a number. We can change this, if we want to. We can change this to string and string here, but then we start getting errors further down, addTwoNumbers.
0:19 It says, "Argument of type 'number' is not assignable to parameter of type 'string'". We'd have to parse in a couple of strings here. Then, of course, things are going to fail at runtime.
This idea that you need to annotate and make TypeScript understand the contracts that your functions must meet, the things you must parse into your functions, is critical to understanding TypeScript.
We could change this to a boolean, as well, if we want to. Actually, booleans can't be added together here. "Operator '+' cannot be applied to types 'boolean' and 'number'". You can't add a boolean to a number.
Weirdly, you can add a string to a number here, but what would happen is it would get appended together. We would have a two here. It's expecting it to be a number six, but it actually ends up being 24 there because it's adding the four, concatenating it to the two.
You may be asking yourself why doesn't TypeScript understand this? It sees that there's a plus between the two things here. Why can't it understand that A is a number and B is a number without us needing to add this?
Well, it's because TypeScript, at the source of its functions, like whenever you create a function you need to make that contract so TypeScript understands what you can parse to the function exactly. That's one of TypeScript's fundamental rules, is that every function you create you must always specify the types of each argument.
If you don't, you're going to get this pretty confusing error, but that's exactly what this error means. In tsconfig, we have enabled strict mode. Strict mode means that if you don't specify these, then you're going to get an error.
I recommend turning on strict mode for all TypeScript projects. That is your first solution. Well done.