Skip to content

Exercise 1 of 10 · Output

Checked, Then Run

What you will make

A five-line card with your own name on it, printed by TypeScript you ran yourself once the compiler had checked it.

The one new idea: console.log() puts text on the screen

Every program you write from here on needs a way to show you what it did, and console.log is that way. The check that happens before it runs is the reason TypeScript exists at all: it is what will catch many of your mistakes before they ever reach the screen.

Go straight to the code ↓

Two steps behind every Run

TypeScript is JavaScript with a checking step added in front. When you press Run, your program does not start straight away. First a program called the compiler reads all of it, top to bottom, making sure every line makes sense. Only once that check passes does a single line actually run.

That checking step is the reason TypeScript exists, and most exercises in this path lean on it. The program in the editor is too small to go wrong in any interesting way, but the step still happens every time you press the button.

What console.log does

Whatever sits between the round brackets of console.log(...) appears on the screen, on a line of its own. Wrap it in quotes and it comes out exactly as you typed it: letters, spaces, punctuation and all.

Each part of the line is doing something:

  • console is the panel your output lands in, and log means write this down there. The dot joins the two.
  • The quotes mark where your text starts and stops. Everything between them is shown.
  • The semicolon ends the instruction, the way a full stop ends a sentence.

A worked example

A different program, so the one in the editor stays yours:

TypeScript
console.log("Gate opens at 9.");
console.log("  Bring your ticket.");
console.log("Gate opens at 9.");
Output
Gate opens at 9.
  Bring your ticket.
Gate opens at 9.

Three calls, three lines, in the order they were written. The two spaces in front of the middle line survive because they are inside the quotes. Nothing gets tidied up, and printing the same line twice takes nothing more than writing it twice.

Your turn

The editor already holds a working program. Press Run before you change anything and a five-line card appears, with YOUR NAME where your name belongs.

Type your own name over those two words, keep the quotes where they are, and press Run again. That is the whole task.

If something goes wrong

Many mistakes are reported before anything runs, so instead of part of the card you get the compiler's message and no card at all.

The likeliest slip is deleting the quotes along with the placeholder. Here is what that looks like in a two-line program:

TypeScript
console.log("Welcome");
console.log(Welcome, Noor!);
Output
main.ts(2,13): error TS2304: Cannot find name 'Welcome'.
main.ts(2,22): error TS2304: Cannot find name 'Noor'.

The first line was fine, and it still did not print. Every message begins with where the compiler was looking: main.ts is the name this site gives your program, and (2,13) means line 2, character 13. Without quotes, the words were read as the names of things, and nothing by those names exists.

The other likely slip is a capital letter. Write Console.log and the message is Cannot find name 'Console'. Did you mean 'console'? The compiler has spotted a name that is nearly right and suggested the fix itself.

Nothing you do here can break anything. Change it, run it, and change it again.

Write your code

Runs in your browser. Press Run (or Ctrl/Cmd+Enter) and the output is checked for you.

Ctrl/Cmd+Enter to run

Press Esc then Tab to move keyboard focus out of the code editor.

Ready
Output will appear here after you run your code.

The runtime is starting in the background. You can type now — it will be ready before you are.

The answer appears here once you have run your code at least once.

Things that often go wrong here

Deleting the quotes along with the placeholder
Quotes are what make something text. Without them the compiler reads Hello and your name as the names of things, finds neither, and stops before a single line runs. Its first message is Cannot find name 'Hello'.
Typing Console with a capital C
Capital letters matter. The compiler knows console but has never heard of Console, so nothing runs and the output panel shows Cannot find name 'Console'. Did you mean 'console'? The fix is right there in the message.
Retyping one of the rows of wavy lines
Those two rows are the top and bottom edges of the card and are already finished. Only the second line holds a placeholder. Make one row shorter and the card looks lopsided, and the check asks for the full row back.
Expecting the lines above a mistake to print
The whole program is checked before any of it runs, so a mistake on the last line stops the first line too. A message where the card should be means the compiler found something, not that the lines above it are broken.

Want a blank editor instead? Open the TypeScript playground.