What TypeScript is
TypeScript is JavaScript with one addition: types, which say what kind of value something is. Follow a four-line program as plain JavaScript quietly prints 23 instead of 5, then watch the TypeScript compiler, tsc, catch the same mistake before the program runs, remove the types and hand plain JavaScript to Node.js or a browser.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01What does TypeScript add to JavaScript?
TypeScript is JavaScript plus types. Writing a: number says a must be a number; everything else is ordinary JavaScript.
02In plain JavaScript, what does console.log(add("2", 3)) print when add returns a + b?
"2" is text (a string). When one side of + is a string, JavaScript joins the two as text, so "2" + 3 is "23". It runs without any warning.
03When does tsc find the mistake in add("2", 3)?
tsc checks every value against its type before anything runs. It reports error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
04What is in the add.js file that tsc writes?
tsc erases the types: function add(a: number, b: number) becomes function add(a, b). Browsers and Node.js run that plain JavaScript.
05Why can an editor such as VS Code show add(a: number, b: number) while you type?
Editors use the same types tsc checks. That is how they underline mistakes at once and suggest names and parameters (autocomplete).
Glossary
- JavaScript
- The programming language that web browsers run. Node.js runs it outside the browser too.
- TypeScript
- JavaScript plus types. It is checked by the TypeScript compiler and turned into plain JavaScript to run.
- Type
- What kind of value something is, such as number (2, 3.5) or string (text in quotes, like "2").
- Type annotation
- A type written next to a name, like : number in a: number.
- tsc
- The TypeScript compiler. It checks the types, reports errors, and writes .js files with the types removed.
- Compile time
- When tsc checks and converts the code, before the program runs. Run time is while it is running.
- Type erasure
- Removing the types when writing JavaScript. The running program never sees them.
- Autocomplete
- An editor suggesting names, parameters and types as you type, using what the types say.
Notes and sources
- By default tsc still writes the .js file even when it finds type errors; turn on the noEmitOnError setting to stop that. Either way, you see the error first.
- The add.js shown is exactly what tsc 5.9 writes for this file with no settings. Other settings (such as the target version of JavaScript, or strict mode adding "use strict";) can change small details.
- Some newer tools, such as recent versions of Node.js, can run a .ts file directly. They do it the same way: by stripping the types out first, without checking them. Run tsc to get the check.
- The code on both cards is real and runnable. The fixed program prints 5; the buggy JavaScript prints 23.
- TypeScript Handbook: TypeScript for the New Programmer
- TypeScript Handbook: The Basics (static type checking, tsc, erased types)
- TypeScript Handbook: Everyday Types (number, string, parameter annotations)
- TSConfig Reference: noEmitOnError
- MDN: Addition (+)
- MDN: console.log()
- Node.js documentation: Modules: TypeScript (type stripping)
- Visual Studio Code: TypeScript in Visual Studio Code
Quiz Unlocks after the last step.