TypeScript vs JavaScript: what types add and which to learn first
TypeScript vs JavaScript comes down to one added layer. JavaScript is the language browsers and Node.js run, and its types are only known while the code runs. TypeScript is JavaScript plus type information that a checker reads before the code runs. After checking, the types are erased and plain JavaScript remains, so TypeScript never changes how a program behaves.
The comparison is often framed as a choice between two languages. It is closer to a choice of tooling: TypeScript keeps JavaScript's syntax and adds information for a checker. This guide shows what that information buys, where it costs effort, and in what order to learn the two.
Key ideas
- JavaScript syntax is legal TypeScript; TypeScript adds rules about how kinds of values may be used.
- TypeScript checks code before it runs, then erases the types and outputs plain JavaScript.
- Dividing 4 by an empty array runs in JavaScript and prints Infinity; TypeScript reports it as an error first.
- Learn JavaScript first, then add TypeScript once variables, functions, objects and arrays feel solid.
What TypeScript adds
JavaScript has dynamic types: a variable is not tied to one kind of value, so the same variable can hold a number, then a string, then a boolean. It is also weakly typed, which means that when an operation mixes types it converts them quietly instead of stopping. The number 42 plus the string "1" gives the string "421". These rules are flexible, and they let some mistakes reach the running program.
TypeScript adds static checking: it reads the code without running it and reports where values are used in ways that make no sense. The official handbook calls it a typed superset of JavaScript, so existing JavaScript syntax stays legal. Many types never need writing, because TypeScript infers them, for example from the text a variable is set to.
How TypeScript turns into JavaScript
Browsers and Node.js run JavaScript, not TypeScript. The compiler, tsc, checks a .ts file and writes a plain .js file. During that step the types are erased, so the output carries no type information.
As a principle, TypeScript never changes the runtime behaviour of JavaScript code: code moved from JavaScript to TypeScript runs the same way, even when type errors are reported. By default the compiler still writes the JavaScript file when it finds errors; the noEmitOnError option makes it stop instead.
The same small task in both
Take a function named area that multiplies the width and height of a rectangle object. In JavaScript you write it, call it with an object that has width and height, and it works. Mistype one property as heigth and nothing complains while you edit: the program runs, reads a property that does not exist and produces a wrong result, often far from the typo.
In TypeScript the same function states that its parameter has a width and a height, both numbers. The checker reports heigth before anything runs and suggests height. Calling area with a string, or with an object that lacks a field, is reported the same way. The function body is identical; only the annotation and the earlier warning are new.
Which to learn first
The TypeScript handbook is direct about this: you cannot learn TypeScript without learning JavaScript, because the two share syntax and runtime behaviour. Start with JavaScript: values, variables, functions, conditions, loops, objects and arrays. Move to TypeScript once you can write and debug small programs on your own; the types will then describe things you already understand.
VITON13 SCHOOL has two free courses for that order, JavaScript and TypeScript, with 16 short lessons each. Code runs in the browser and exercises are checked on the page, so practice starts without installing anything.
In everyday language
JavaScript is a letter sent without proofreading; TypeScript is the same letter read by a strict proofreader before it leaves. The person who receives it gets the same words either way.
Try it yourself
Open the JavaScript course and complete the first lesson, running the code in the browser until the page marks the exercise as passed.
Expected result
The exercise is checked on the page, so you see straight away whether your code gives the expected result.
Check your answer: In plain JavaScript a property name is misspelled as heigth. When do you find out, and when would TypeScript tell you?
In JavaScript you find out only when the program runs and gives a wrong result. TypeScript reports the misspelled property while checking, before the code runs, and suggests height.
Questions
Is TypeScript faster than JavaScript?
The types make no difference at run time: TypeScript compiles to plain JavaScript and never changes its runtime behaviour. The gain is in finding mistakes earlier, not in execution speed.
Can JavaScript code go into a TypeScript project?
Yes. JavaScript syntax is legal TypeScript, and code moved over runs the same way. The checker may report type errors in it, which point to places worth a closer look.
Start the free VITON13 SCHOOL JavaScript course today, finish its 16 lessons, then continue with the TypeScript course to add types to what you already know.
Sources and further reading
- TypeScript handbook: TypeScript for the New Programmer ↗Sources checked:
- TypeScript handbook: The Basics ↗Sources checked:
- MDN: JavaScript data types and data structures ↗Sources checked: