JavaScript vs TypeScript

Learning objectives#

• Explain dynamic vs static typing
• Compare tooling, safety and setup cost
• Choose JavaScript or TypeScript for a project
• Migrate a JavaScript file to TypeScript gradually

Explanation#

JavaScript is dynamically typed: a variable can hold a number now and a string later, and type mistakes only show up when that line runs.

TypeScript is statically typed: types are known while you write the code, so mistakes appear in the editor immediately.

TypeScript adds a build step (tsc, Vite, esbuild) and some learning. In return you get refactoring safety, better autocomplete and self-documenting code.

Small scripts and quick prototypes are fine in JavaScript. Team projects, long-lived apps and libraries benefit greatly from TypeScript.

You can migrate gradually: rename one .js file to .ts, fix its errors, and repeat. allowJs lets both live in one project.

Code example: The same function in both languages#

1// ── JavaScript (calc.js) ─────────────────
2function total(items) {
3  return items.reduce((sum, i) => sum + i.price, 0);
4}
5total([{ price: '100' }, { price: 50 }]);   // "010050" — a string, silently wrong
6

7// ── TypeScript (calc.ts) ─────────────────
8interface CartItem {
9  price: number;
10}
11function totalTs(items: CartItem[]): number {
12  return items.reduce((sum, i) => sum + i.price, 0);
13}
14totalTs([{ price: '100' }, { price: 50 }]);
15//         ~~~~~
16// ✗ Type 'string' is not assignable to type 'number'.

The JavaScript version runs and returns "010050" instead of 150, because the string price turns + into text joining. The TypeScript version refuses to compile until the price is a number.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. In JavaScript nothing stops a string price from entering the calculation.
2. The bug is only found when someone notices a wrong total — maybe in production.
3. In TypeScript, CartItem says price must be a number.
4. The wrong call is flagged immediately in the editor.

Real-world use case#

Common mistakes#

Best practices#

• Use TypeScript for anything that will be maintained
• Migrate gradually with allowJs
• Turn on strict mode early — it is harder to enable later
• Keep using JavaScript for tiny scripts where setup is not worth it

Remember this#

Practice exercise#

1JavaScript: a one-off script to rename files; a quick CodePen experiment.
2TypeScript: a team-built e-commerce app; a shared npm library used by other projects.

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.