TypeScript vs JavaScript: a practical beginner guide

TypeScript is JavaScript with types added. You write the same code, plus labels that say what kind of value each variable and function works with, like a number or a piece of text. A checker reads those labels and points out mistakes before your code ever runs. Then the labels are stripped away, and what actually runs is ordinary JavaScript.

So the difference is not what your program can do. It is when you find out about your mistakes. This guide shows that difference with the same bug in both languages, explains what types look like, and helps you decide which to learn first. Every example runs in your browser.

The same bug in both

Here is a small JavaScript function that adds 20% VAT to a price. Press run:

function addVat(price) {
  return price + price * 0.2;
}
console.log(addVat(10));
console.log(addVat("10"));

12
102

The first answer is right. The second is badly wrong, and JavaScript gives no warning at all. The price arrived as the text "10", perhaps typed into a form, so + joined text instead of adding numbers: "10" and 2 became "102". This kind of bug can sit unnoticed for months.

Now the same function in TypeScript, with one label saying the price must be a number:

function addVat(price: number): number {
  return price + price * 0.2;
}
console.log(addVat(10));
console.log(addVat("10"));

TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. (line 5)

The code does not even run. TypeScript points at line 5 and says exactly what is wrong: text was passed where a number was expected. You fix it before anyone ever sees a wrong price.

That is TypeScript in one example. Everything else is detail.

What types look like

A type goes after a colon. Here are the basic ones:

const name: string = "Sam";
const age: number = 12;
const member: boolean = true;
const scores: number[] = [7, 9, 8];
console.log(name, age, member, scores);

Sam 12 true [7,9,8]

• string is text.
• number is any number, whole or decimal.
• boolean is true or false.
• number[] is an array of numbers. string[] is an array of text.

You do not have to label everything

TypeScript works out most types by itself. This is called type inference. Write let city = "Leeds" and TypeScript already knows city holds a string, so this is caught:

let city = "Leeds";
city = 5;

TS2322: Type 'number' is not assignable to type 'string'. (line 2)

In practice you label function inputs and a few important values, and let TypeScript work out the rest.

Describing objects

For objects, you describe their shape once and reuse it:

type Pet = { name: string; age: number };

const pet: Pet = { name: "Biscuit", age: 3 };
console.log(`${pet.name} is ${pet.age}`);

Biscuit is 3

Now TypeScript catches typos too. Change pet.name to pet.nmae and run it again: TypeScript stops with Property 'nmae' does not exist on type 'Pet'. JavaScript would happily print undefined instead, and carry on.

How TypeScript turns into JavaScript

Browsers cannot run TypeScript. Before your code reaches them, a tool checks the types, then removes them, leaving plain JavaScript. The official tool is called tsc, the TypeScript compiler, and most website build tools do the same job for you.

Some tools can now run .ts files directly. Recent versions of Node.js, for example, strip the types out and run what is left. But stripping is not checking: Node runs the file even when the types are wrong. You still need the checker, usually built into your code editor, to get the benefit.

On Gwecode, run boxes check the types first and show the first problem they find, as you saw above.

The differences, side by side

• File names: JavaScript files end in .js. TypeScript files end in .ts.
• Types: JavaScript has none written in the code. TypeScript lets you add them.
• When mistakes show up: JavaScript finds them when the code runs, or not at all. TypeScript finds many of them before it runs.
• What runs: both end up as JavaScript. The browser never sees a type.
• Editor help: TypeScript gives code editors much more to work with, so suggestions and warnings appear as you type.
• Setup: JavaScript runs straight away in any browser. TypeScript needs a checking step.

Which should you learn first?

Either works, and the second comes quickly, because almost everything is shared: variables, decisions, loops, arrays, functions and objects are identical. Here is a fair way to choose.

Start with JavaScript if

• You want to build things in the browser today, with no extra steps.
• You will follow lots of tutorials, since most beginner tutorials online use JavaScript.
• You prefer to learn one idea at a time and add types later.

Start with TypeScript if

• You like being told about mistakes early, with clear messages.
• You are aiming for a job building websites or apps, where TypeScript is widely used.
• You want habits that make bigger programs easier to manage.

On Gwecode you can start either from zero. TypeScript Level 1 and JavaScript Level 1 follow the same path unit by unit, 28 lessons each, about three and a half hours of lessons. TypeScript Level 1 adds a type label from its first variable lesson onwards, so you could even take a lesson in each and see which you prefer.

Common mistakes

Thinking types protect you while the code runs

Types are checked before the code runs, then removed. Data that arrives while it runs, like JSON from a server or text typed into a form, is not checked by TypeScript at all. If it might be wrong, check it in your code.

Using any to make errors go away

The type any switches checking off for that value. It silences the error, and it also removes the protection you came to TypeScript for. Fix the type instead.

Ignoring errors because the code still ran

By default, tsc still writes out JavaScript even when it finds type errors, and tools like Node.js may skip checking altogether. An error that did not stop the code is still a bug waiting to happen.

Labelling everything

Writing const count: number = 0 is not wrong, but TypeScript already knew. Label function inputs and let inference handle the obvious cases.

Confusing TypeScript with Java

Despite the names, TypeScript is related to JavaScript, not Java. Java is a separate language with its own tools.

A short exercise

This JavaScript function has a bug that only shows up with certain values. Turn it into TypeScript by adding types to the inputs, then run it and read the error.

function welcome(name, visits) {
  return "Welcome back, " + name + ". Visit number " + (visits + 1);
}
console.log(welcome("Ava", 3));
console.log(welcome("Ben", "3"));

Welcome back, Ava. Visit number 4
Welcome back, Ben. Visit number 31

One possible answer

function welcome(name: string, visits: number): string {
  return "Welcome back, " + name + ". Visit number " + (visits + 1);
}
console.log(welcome("Ava", 3));
console.log(welcome("Ben", "3"));

TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. (line 5)

TypeScript catches the text "3" on line 5. Change it to the number 3 and both lines print properly.

Related reading

• JavaScript console.log() explained, which works exactly the same in TypeScript.
• Selecting DOM elements in JavaScript, a skill you will use in both languages.

Your next step

The best way to feel the difference is to write a little of each. Gwecode’s TypeScript Level 1 starts from zero and adds types from the very first variable, and its level check is a tiny quiz game. Every lesson is free and runs in your browser, with type checking built in. Create a free account to keep your progress, and try the lesson below.

questions