Setup and your first program

A computer does exactly what it is told, one instruction at a time, and nothing more. A program is a list of instructions written for a computer, and a programming language is a language with strict rules for writing those instructions.

This course teaches TypeScript. It is built on top of JavaScript, the programming language that every web browser understands and that runs a huge share of the world’s websites and apps. TypeScript is JavaScript plus types: labels that say what kind of value something is, such as a number or a piece of text. A tool called the type checker reads those labels and warns you about mistakes before your program ever runs. You will meet it in 1.7. Everything you learn about how JavaScript runs also holds for TypeScript, because a TypeScript program runs as JavaScript.

Your computer does not understand JavaScript on its own. Outside a web browser, it needs a program called Node (also written Node.js), which reads JavaScript or TypeScript instructions and carries them out. Installing Node also installs npm, a tool for adding ready-made code to your projects, which you will use in 1.2. Today you will also install a code editor, an app for writing program files. Any plain text editor works, but a code editor colors the parts of your code, and VS Code has TypeScript support built in, so it underlines mistakes as you type.

Install the tools

1. Go to nodejs.org and download the version labeled LTS (long-term support) for your computer. This course needs Node 24 or newer: it runs TypeScript files directly, and it is the version this course is tested with.
2. Run the installer and accept the default choices. npm comes with it.
3. Install VS Code from code.visualstudio.com and open it once so it finishes setting up.

Check that it worked

To talk to Node you use a terminal: a window where you type a command, press Enter, and read the reply as text. Every computer has one (Terminal on macOS and Linux, PowerShell or Terminal on Windows), and VS Code has one built in: choose Terminal → New Terminal.

Type this command into the terminal and press Enter:

node --version

The command has two parts: node names the program to run, and --version asks it only to report which version it is. If Node is installed, the terminal answers with one line: the letter v followed by the version number, with the main version number first. Version numbers change often, so yours will not match anyone else’s exactly; what matters is that the first number is 24 or higher.

Now vary the program you ask: npm reports its version the same way.

npm --version

npm answers with a version number too (without the v). Its numbers are different from Node’s, because npm is a separate program that happens to be installed alongside Node. If both commands answer, your tools are ready.

Node can run a single file, but the type checker needs a little setup first: it has to be installed, and it has to be told how strict to be. Programmers keep each program, with its settings and tools, in its own folder called a project. Every day of this course starts the same way, so it is worth doing slowly once.

Make the folder and open it

1. Make a folder named day01 somewhere easy to find, such as your Documents folder.
2. In VS Code, choose File → Open Folder and open day01.
3. Open the terminal with Terminal → New Terminal. It starts inside day01, the folder you opened. Every command below must run in that folder.

Tell npm about the project

Type this command and press Enter:

npm init -y

npm init creates a file named package.json, a short description of the project: its name, its version, and later the tools it uses. Normally npm init asks you a list of questions; -y means “yes, use the default answer for every question.” The terminal prints the new file’s contents, and package.json appears in VS Code’s file list. You do not need to edit it today.

Install the type checker

Next, install TypeScript into the project:

npm install --save-dev typescript

A package is ready-made code that someone has published for others to use, and npm (short for “Node package manager”) downloads packages for you. This command has three parts:

npm downloads the package into a new folder named node_modules, and writes a file named package-lock.json that records exactly what it installed. Both are managed by npm: never edit them by hand. If you delete node_modules, running npm install brings it back.

Turn on strict checking

Finally, the type checker reads its settings from a file named tsconfig.json. In VS Code choose File → New File, name it tsconfig.json, and type this into it exactly:

{
  "compilerOptions": {
    "strict": true,
    "noEmit": true,
    "target": "ES2024",
    "module": "nodenext",
    "erasableSyntaxOnly": true,
    "allowImportingTsExtensions": true
  }
}

Every setting is a name in quotes, a colon, and a value, and the settings are separated by commas. Here is what each one asks for. You do not need to remember them today; Day 13 comes back to this file.

Your folder now looks like this:

day01/
  node_modules/
  package-lock.json
  package.json
  tsconfig.json

The project is ready, but it does nothing yet. Time to give the computer its first instruction.

A TypeScript program lives in a file whose name ends in .ts. You write the file in your editor, save it, and then ask Node to run it from the terminal. Node starts at the first line and carries out the instructions until it reaches the end of the file.

console.log("Hello, world!");
console.log("I am learning TypeScript.");

node hello.ts

Hello, world!
I am learning TypeScript.

Take one line apart. console.log("Hello, world!"); has four pieces:

console.log is a function: a named instruction that does one job when you use it. Using a function is called calling it, and you call a function by writing its name followed by parentheses. The value inside the parentheses is the argument, the thing you hand to the function to work on. console.log shows its argument in the terminal and then moves to a new line.

Text in a program goes inside double quotes, like "Hello, world!". A piece of text in quotes is called a string, because it is a string of characters one after another. The quotes are not part of the text; they only show where it starts and ends, which is why the terminal shows Hello, world! with no quotes. (Single quotes work too, and Day 3 covers strings in depth; this course uses double quotes.)

Hello, world!
I am learning TypeScript.

A program only shows what you log, so console.log is the most important tool of the day. It is worth knowing exactly how it treats text and numbers.

Numbers are written without quotes, like 9 or 3.5. A program can also do arithmetic: + adds, - subtracts, * (an asterisk) multiplies, and / divides. A piece of code that works out to a value, such as 4 + 5, is called an expression. When an expression is the argument to console.log, the program works out its value first and then shows the result.

The quotes change everything. Whatever is inside quotes is plain text, copied exactly; anything outside quotes is an expression to work out.

console.log("Total cost:");
console.log(4 + 5);
console.log("4 + 5");

Total cost:
9
4 + 5

Now vary the number of arguments. console.log can take several, separated by commas; it shows them on one line with one space between each. And console.log() with nothing inside shows an empty line.

console.log("Tickets:", 3 * 12);
console.log();
console.log("Thanks for visiting!");

Tickets: 36

Thanks for visiting!

Line 1 has two arguments: the string "Tickets:" and the expression 3 * 12. The program works out 36, then shows the text, a space, and the number. Line 2 shows a blank line, and line 3 shows the last string.

Arithmetic follows the same order of operations as math class: multiplication and division happen before addition and subtraction, and parentheses go first.

console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(7 / 2);
console.log(8 / 2);

14
20
3.5
4

In 2 + 3 * 4, the program multiplies 3 * 4 first to get 12, then adds 2 to get 14. In (2 + 3) * 4, the parentheses make it add first to get 5, then multiply by 4 to get 20. The numbers are the same; only the order changed, and so did the answer. The last two lines show that division gives a decimal answer when it needs one (3.5) and a whole number when it comes out even (4).

Finally, an expression that is not inside console.log is worked out and then thrown away. Nothing shows it:

console.log("Adding 2 and 3:");
2 + 3;
console.log(2 + 3);

Adding 2 and 3:
5

Line 2 works out 2 + 3, but nothing asks to show the result, so no line appears for it. Only line 3, which hands the expression to console.log, shows 5.

console.log("Price:", 2 * 5, "dollars");

Price: 10 dollars

Your programs so far have had a few lines each, and their output appeared in the same order as the lines. That is not a coincidence; it is the rule every program follows.

Each complete instruction in a program, such as one call to console.log ending in a semicolon, is a statement. This course writes one statement per line. When you run a program, Node starts at line 1 and carries out the statements one at a time, from top to bottom. It finishes each statement before starting the next, and it never skips ahead or rearranges them to make more sense.

console.log("Wake up");
console.log("Eat breakfast");
console.log("Walk to school");

Wake up
Eat breakfast
Walk to school

Now change one thing: move the last line to the top. The statements are the same, but the order is not:

console.log("Walk to school");
console.log("Wake up");
console.log("Eat breakfast");

Walk to school
Wake up
Eat breakfast

Node ran the lines in exactly the order you wrote them, even though walking to school before waking up makes no sense. The computer cannot know what you meant; it follows the order on the page.

console.log(3);
console.log(1);
console.log(2);
console.log("Liftoff!");

console.log(3);
console.log(2);
console.log(1);
console.log("Liftoff!");

3
2
1
Liftoff!

Next week you will open today’s files and wonder what they were for. Programmers solve this by leaving notes in the code itself, written for people, not for the computer.

A comment is text in a program that Node and the type checker skip completely. TypeScript has two kinds:

• A line comment starts with // (two slashes) and runs to the end of that line. It can fill a whole line, or follow code on the same line, where the code before the // still runs.
• A block comment starts with /* and ends with */, and can cover several lines.

// Shopping receipt for Saturday
console.log("Apples:", 6);
console.log("Bread:", 4); // one loaf
// console.log("Milk:", 3);
console.log("Done");

Apples: 6
Bread: 4
Done

Now vary the kind of comment, and where the slashes sit. A block comment covers every line between /* and */. And inside quotes, // is just two characters in the text, not the start of a comment:

/*
  Ticket prices for the school play.
  All prices are in dollars.
*/
console.log("Adult:", 8);
console.log("Student:", 5); // half price, rounded down
console.log("Visit https://play.example // tickets");

Adult: 8
Student: 5
Visit https://play.example // tickets

Lines 1 to 4 are one block comment, so nothing runs until line 5. Line 6 ends with a line comment. On line 7, both pairs of slashes are inside the string, so the whole web address and the // tickets are shown as text.

// Team scores
console.log("Red team:", 10 + 5);
// console.log("Blue team:", 12);
console.log("Green team:", 7); // console.log("Gold team:", 9);
/* console.log("Silver team:", 4); */

Red team: 15
Green team: 7

So far you have run every program straight away with node. That works, but it skips the reason TypeScript exists. Some mistakes can be found just by reading the code, before it ever runs, and TypeScript has a tool that does exactly that.

Every value in a program has a type, the kind of value it is. 12 and 3.5 are of type number; "Hello" is of type string. (Day 2 introduces more types.) The type checker is a program that reads your code without running it and checks that every value is used in a way its type allows. A mistake it finds is a type error. The type checker is called tsc, short for “TypeScript compiler,” and you installed it in 1.2.

So working on a TypeScript program has two steps, with two different commands:

npx runs a tool installed inside the current project; npx tsc means “run the tsc that lives in this project’s node_modules.” Try it on your project now:

npx tsc

If every file is fine, npx tsc prints nothing at all and the terminal is ready for the next command. Silence means success. When it does find a mistake, it prints a message for each one; 1.8 shows how to read them. It checks every .ts file in the folder at once, so each message starts with the name of the file it is about.

Why does node not check types? Node runs TypeScript by type stripping: it removes the type labels and runs what is left as plain JavaScript, without reading the labels first. That is fast, but it means node runs a file even if npx tsc would report type errors in it. Only npx tsc checks. That is why the routine is always check first, then run.

A mistake that npx tsc cannot see shows up only while the program runs, when Node reaches the broken line and has to stop. That is a runtime error, and you will meet one in 1.10. So TypeScript programmers talk about two kinds of error:

VS Code runs the same type checker in the background, so many type errors show up as a red wavy underline (a “red squiggle”) while you type. Treat each squiggle as a mistake found for free, but still run npx tsc before node: the terminal command checks every file, including ones you do not have open.

Everyone who writes code makes mistakes, every day. The difference between a beginner who gets stuck and one who keeps going is reading the error message instead of panicking. The type checker’s messages tell you exactly where to look and what is wrong.

To see a type error you need code that says what type something should be. Here is a small preview of Day 2:

const muffinsLeft: number = 12;

Read it as “muffinsLeft is a name for a value; its type is number; its value is 12.” The word const creates the name, and the part : number is a type annotation, a label that tells the type checker what type the value must be. Day 2 explains names and annotations fully; today you need only that one sentence. After this line, console.log("Muffins left:", muffinsLeft) shows the value the name holds.

const muffinsLeft: number = "12";
console.log("Muffins left:", muffinsLeft);

muffins-wrong.ts:1:7 - error TS2322: Type 'string' is not assignable to type 'number'.

const muffinsLeft: number = 12;
console.log("Muffins left:", muffinsLeft);

Muffins left: 12

Now vary the mistake the other way round: a number where a string is expected.

const shopName: string = 42;
console.log("Welcome to", shopName);

shop-name-wrong.ts:1:7 - error TS2322: Type 'number' is not assignable to type 'string'.

The same code, TS2322, with the two types swapped: 42 is a number, but the annotation asks for a string. Read the message as “Type what you gave is not assignable to type what was asked for.” The fix depends on what you meant: either put the shop’s name in quotes, or change the annotation. Fix the file one of those ways, or delete it, before you go on, so it does not show up in your next check.

console.log("Class trip");
const busSeats: number = "forty";
console.log("Seats:", busSeats);

debug-type.ts:2:7 - error TS2322: Type 'string' is not assignable to type 'number'.

console.log("Class trip");
const busSeats: number = 40;
console.log("Seats:", busSeats);

Class trip
Seats: 40

The most common mistakes on the first day are tiny: a letter left out, or quotes left off. The type checker catches these too, because it knows every name a program is allowed to use.

A name is a word in code that stands for something, such as console or muffinsLeft. Some names are built in (console is always available); others, like muffinsLeft, exist because your code created them. Any word outside quotes is treated as a name, and the type checker looks it up. If it finds nothing by that name, it reports an error. Names are case-sensitive: capital and small letters count as different, so Console is not the same name as console.

console.log("Ready");
console.log(Hello);
console.log("Done");

missing-quotes.ts:2:13 - error TS2304: Cannot find name 'Hello'.

Now vary the mistake: keep the quotes, but misspell console.

console.log("Ready");
consol.log("Go");

misspelled-console.ts:2:1 - error TS2552: Cannot find name 'consol'. Did you mean 'console'?

The same problem, a name the checker cannot find, with a bonus: when a known name looks very close, the checker uses code TS2552 and adds a suggestion, “Did you mean ‘console’?”. With Hello there was no similar name to suggest, so the message was plain TS2304. Either way, the words “Cannot find name” mean “check the spelling, the capitals, and the quotes.”

There is one more kind of mistake the checker reports before anything runs: broken punctuation. Every language has rules for how code must be written, called its syntax: every ( needs a matching ), and every string needs both quotes. A broken rule is a syntax error:

console.log("Hello");
console.log("World";
console.log("Goodbye");

missing-paren.ts:2:20 - error TS1005: ')' expected.

At line 2, column 20, the checker reached the semicolon while the ( was still open, so it says it expected a ) there. Syntax errors have codes starting with TS1. Add the ) before the semicolon to fix it.

If you typed missing-quotes.ts, misspelled-console.ts, and missing-paren.ts to see these messages, fix or delete each one now, so your next npx tsc checks only the programs you are working on.

console.log("Quiz time!");
console.log("Question 1");
console.log(Goodbye);

debug-name.ts:3:13 - error TS2304: Cannot find name 'Goodbye'.

console.log("Quiz time!");
console.log("Question 1");
console.log("Goodbye");

Quiz time!
Question 1
Goodbye

The type checker reads code without running it, so it can only catch mistakes visible in the code itself. Some mistakes depend on what happens when the code actually runs. Those slip past npx tsc, and Node reports them when it reaches them.

To see one, you need a tool that can fail while running. Strings have a handy one: "=".repeat(12) makes a new string of 12 copies of "=". (This is a preview of Day 3, which covers many such string tools.) The number in the parentheses is how many copies to make.

console.log("=".repeat(12));
console.log("BAKE SALE");
console.log("=".repeat(12));

============
BAKE SALE
============

Now vary one character: a stray minus sign on line 3 asks for −12 copies, and add a fourth line.

console.log("=".repeat(12));
console.log("BAKE SALE");
console.log("=".repeat(-12));
console.log("Everything is $2");

npx tsc prints nothing: repeat needs a number, and -12 is a number, so the types fit. Then node banner-crash.ts shows this (in the line ending in :3, your terminal shows the full path to your own folder where ... appears here):

============
BAKE SALE
.../day01/banner-crash.ts:3
console.log("=".repeat(-12));
                ^

RangeError: Invalid count value: -12
    at ...

After that come several more lines starting with at, which list the places inside Node involved, and a last line naming your Node version. Read the report in order:

You cannot make a negative number of copies, so repeat gave up and the program stopped with a RangeError, the kind of runtime error for a number outside the allowed range. Line 4 never ran: once a program stops with an error, the statements after it are skipped. Fix the minus sign and all four lines show.

The type checker checks the kind of each value, not whether the value makes sense. -12 is the right kind of value (a number); only running the program discovers that it is the wrong number.

console.log("Step 1");
console.log("Step 2:", 5 * 2);
console.log("-".repeat(2 - 5));
console.log("Step 3");

Step 1
Step 2: 10
.../day01/runtime-trace.ts:3
console.log("-".repeat(2 - 5));
                ^

RangeError: Invalid count value: -3

Maya is making a sign for her school’s bake sale. Follow her through three rounds of check and run; each round uses a different part of today’s lesson.

Round 1: check (1.6, 1.7, 1.9). Maya starts with a comment saying what the program is for, then the sign’s lines. She runs npx tsc first:

// Sign for the bake sale table
console.log("=".repeat(20));
console.log("BAKE SALE TODAY");
console.log("Muffins left:", 30 - 12);
consol.log("Cookies left:", 48 - 20);
console.log("=".repeat(20 - 25));

bake-sale-attempt1.ts:5:1 - error TS2552: Cannot find name 'consol'. Did you mean 'console'?

Nothing has run yet. The checker points at line 5, column 1, where she typed consol, and suggests console. She fixes the spelling and checks again; this time npx tsc prints nothing.

Round 2: run (1.4, 1.5, 1.10). Now she runs node bake-sale-attempt2.ts:

// Sign for the bake sale table
console.log("=".repeat(20));
console.log("BAKE SALE TODAY");
console.log("Muffins left:", 30 - 12);
console.log("Cookies left:", 48 - 20);
console.log("=".repeat(20 - 25));

====================
BAKE SALE TODAY
Muffins left: 18
Cookies left: 28
.../day01/bake-sale-attempt2.ts:6
console.log("=".repeat(20 - 25));
                ^

RangeError: Invalid count value: -5

Lines 2 to 5 ran (line 1 is a comment), working out 30 - 12 and 48 - 20 along the way. Then line 6 stopped the program. Maya wanted a short border of 5, but she wrote 20 - 25, which is −5. The type checker could not catch it: 20 - 25 is a number, just the wrong one.

Round 3: fixed. She swaps the numbers to 25 - 20, checks, and runs:

// Sign for the bake sale table
console.log("=".repeat(20));
console.log("BAKE SALE TODAY");
console.log("Muffins left:", 30 - 12);
console.log("Cookies left:", 48 - 20);
console.log("=".repeat(25 - 20));

====================
BAKE SALE TODAY
Muffins left: 18
Cookies left: 28
=====

Every message from today in one place, to look up when you meet one again.

• Node runs TypeScript files (node --version must show 24 or newer). A project folder gets a package.json from npm init -y, the type checker from npm install --save-dev typescript, and a tsconfig.json with strict mode on.
• console.log shows its arguments on one line, separated by spaces; text in quotes is shown exactly, and expressions without quotes are worked out first. Comments (// and /* */) are skipped.
• Statements run one at a time, top to bottom, in the order written. A program with no error can still do the wrong thing.
• Two steps, two commands: npx tsc checks types without running anything (silence means no type errors); node file.ts runs the program without checking types.
• Type errors (TS2322, TS2304, TS2552, TS1005) are reported before anything runs and give file:line:column, a code, and a sentence. A runtime error such as RangeError stops a running program at that line, after earlier lines have shown their output.

Do these in your day01 folder. Type each program yourself, check it with npx tsc, run it with node, and only then open the answer.

console.log("Jordan Lee");
console.log("27 Willow Street");
console.log("Apartment 3");
console.log("Brookfield");

Jordan Lee
27 Willow Street
Apartment 3
Brookfield

console.log(12 + 7 + 5);
console.log(60 * 24);
console.log(100 - 3 * 15);
console.log(45 / 9);
console.log((8 + 6 + 10) / 3);

24
1440
55
5
8

console.log("Jordan Lee");
console.log("27 Willow Street);
console.log("Apartment 3");
console.log("Brookfield");

address-broken-quote.ts:2:32 - error TS1002: Unterminated string literal.
address-broken-quote.ts:3:1 - error TS1005: ',' expected.
address-broken-quote.ts:3:27 - error TS1005: ')' expected.

console.log("Jordan Lee");
console.log("27 Willow Street");
consol.log("Apartment 3");
console.log("Brookfield");

address-broken-name.ts:3:1 - error TS2552: Cannot find name 'consol'. Did you mean 'console'?

console.log("Jordan Lee");
console.log("27 Willow Street");
console.log("Apartment 3");
console.log(Brookfield);

address-broken-bare.ts:4:13 - error TS2304: Cannot find name 'Brookfield'.

6 * 7;
console.log("Done");

// Movie night plan
console.log("Movie night");
console.log("Snacks:", 3 + 4); // popcorn and juice
// console.log("Cancelled");
console.log();
/* Tickets cost 9 dollars each. */
console.log("Tickets:", 2 * 9);
console.log("2 * 9");

Movie night
Snacks: 7

Tickets: 18
2 * 9

console.log("A");
console.log("B");
console.log(Finished);
console.log("C");

console.log("A");
console.log("B");
console.log("*".repeat(-1));
console.log("C");

// Lunch menu
console.log("Soup:", 4);
console.log(Salad, 6);

review-menu.ts:3:13 - error TS2304: Cannot find name 'Salad'.

// Lunch menu
console.log("Soup:", 4);
console.log("Salad:", 6);

Soup: 4
Salad: 6

The TypeScript Handbook’s opening pages explain where TypeScript comes from and what the type checker is for, with more examples of errors it catches: TypeScript for the New Programmer and The Basics.

Check each statement. If the answer is “not yet,” reread the linked subsection.

• I can check which version of Node is installed from the terminal. Reread
• I can set up a project with npm init, the typescript package, and a strict tsconfig.json. Reread
• I can create a .ts file and run it with node. Reread
• I can predict what console.log shows with and without quotes. Reread
• I can trace a program from top to bottom. Reread
• I can write both kinds of comment and comment out a line. Reread
• I can explain what npx tsc does and what node does. Reread
• I can read a TS2322 message and say which types clash. Reread
• I can fix a name the checker cannot find, and a missing parenthesis. Reread
• I can tell a runtime error from a type error and say which lines ran before it. Reread