Parameter Types

In the JavaScript course, you wrote functions like this one. It adds the health that a potion heals to a hero's health:

function heal(health, amount) {
    return health + amount;
}

console.log(heal(30, 20));
console.log(heal(45, "5"));

In JavaScript, it prints 50 and then 455. The second call passes the text "5", and + with a text joins instead of adding. The hero suddenly has 455 health, and nobody notices until much later.

In TypeScript, this program doesn't run at all. The compiler reports:

main.ts(1,15): error TS7006: Parameter 'health' implicitly has an 'any' type.
main.ts(1,23): error TS7006: Parameter 'amount' implicitly has an 'any' type.

TypeScript can work out the type of a variable from its value, but a parameter has no value in the function itself. It gets one only when the function is called, and every call can pass something different. So TypeScript doesn't know what health is, and it would have to give it the type any, which turns the checking off, as you know from the previous lesson. That's what the message says: the parameter implicitly (without you saying so) has the type any. TypeScript doesn't allow that and asks you to write the type yourself.

You write the type of a parameter just like the type of a variable, with a colon and the type after its name:

function heal(health: number, amount: number) {
    return health + amount;
}

console.log(heal(30, 20));
console.log(heal(45, "5"));

main.ts(6,22): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Now TypeScript knows what the function needs, and it checks every call. You know this message from the exercise on arrays in the previous lesson, where push got a wrong value: push is also a function whose parameter has a type. Column 22 points right at the argument "5". It is a string, but the parameter amount is a number. Change it to 5, and the program prints 50 twice.

The types help inside the function too. TypeScript knows that health is a number, so health.toUpperCase() in the function's body would be an error, just as with a variable.

Typical mistakes:

• A type for only some of the parameters. In function heal(health, amount: number), health still has no type, and you get TS7006 for it. Every parameter needs its own type, even when they all have the same one.
• = instead of a colon. function heal(health = number, amount = number) gives 'number' only refers to a type, but is being used as a value here. After = comes a default value, as you know from the JavaScript course, and number is a type, not a value.