Errors That Save You

In the JavaScript course, some mistakes didn't cause any error. The program ran and gave a strange result, or it crashed only when it got to the mistake. This program has three such mistakes:

const hero = { name: "Kira", health: 50 };
const maxHealth = 50;

hero.health = hero.helth - 10;
console.log("Health:", hero.health);
console.log(hero.name.toUppercase());
maxHealth = 60;

As JavaScript, it would print Health: NaN and then crash with TypeError: hero.name.toUppercase is not a function. The third mistake would wait until you fixed the second one. TypeScript finds all three before the program runs:

main.ts(4,20): error TS2551: Property 'helth' does not exist on type '{ name: string; health: number; }'. Did you mean 'health'?
main.ts(6,23): error TS2551: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
main.ts(7,1): error TS2588: Cannot assign to 'maxHealth' because it is a constant.

• A typo in a property's name. In JavaScript, a property that doesn't exist gives undefined, and a calculation with undefined gives NaN. TypeScript knows which properties the object has, from the object you created. It catches the typo even when you assign: in JavaScript, hero.Health = 60; would quietly add a new property Health, while TypeScript reports Property 'Health' does not exist on type … and suggests health.
• A misspelled method. Uppercase and lowercase letters are different, so toUppercase isn't toUpperCase. TypeScript knows all the methods of texts, and it suggests the right one.
• Assigning to a constant. In JavaScript, this was TypeError: Assignment to constant variable., but only while the program was running. TypeScript reports it beforehand: Cannot assign to 'maxHealth' because it is a constant. If the value is supposed to change, create the variable with let. If it isn't, don't assign to it.

Remember that const protects the variable, not the object in it. hero.health = … above is fine, even though hero is a constant: the constant holds the same object all the time, only a property of the object changes. That's how JavaScript works, and TypeScript follows it.

All these mistakes are easy to make and hard to find in a large program, because JavaScript shows their effect somewhere other than where they are. TypeScript points at the exact line. That's the main reason why programmers use it: many bugs never even get to run.