Input and output

Think about a vending machine. You press buttons and feed in coins — that's the input. The machine whirs, works out what you chose and whether you paid enough — that's the processing. Then a can of drink drops into the tray — that's the output. Almost every useful program works the same way: it takes some input, does some processing, and produces some output.

This "shape" is so common it has a name — the input → process → output model:

Input — data coming into the program: what the user types, a tap on the screen, a reading from a sensor, a file it opens.
Process — the program does something with that data: a calculation, a decision, sorting, searching.
Output — the result going out: text on the screen, a sound, a saved file, a robot arm that moves.

A calculator app takes the numbers you tap (input), adds them (process), and shows the total (output). A game takes your key presses (input), works out where your character should move (process), and redraws the screen (output). Once you spot this pattern, you'll see it everywhere.

Output first: making the program say something

The simplest output a program can make is to print some text. In TypeScript we do that with console.log(...) — whatever you put in the brackets appears in the output. Press Run and watch.

console.log("Hello, world!"); console.log("This program has three lines of output."); console.log("Each console.log prints on its own new line.");

Anything in "double quotes" is a piece of text — a string — and it is printed out exactly as written. You can also print numbers and the result of a sum; a bare number needs no quotes:

console.log(2 + 3); // prints the answer, 5 console.log("2 + 3"); // prints the text, 2 + 3 console.log("The answer is", 2 + 3); // mix text and a value

Look carefully at the first two lines — they show something important. 2 + 3 without quotes is a calculation that the computer works out to 5. Put quotes around it and it becomes plain text that is printed letter-for-letter. Quotes change everything.

Building output from pieces

Real output usually mixes fixed words with values the program has worked out. You can glue text together with + (called concatenation), or drop values straight into a template string written in backticks with ${...} gaps. Run this to compare both styles:

const name: string = "Ada"; const age: number = 12; // Style 1: join pieces with + console.log("Hi " + name + ", you are " + age + " years old."); // Style 2: a template string (backticks) — often easier to read console.log(`Hi ${name}, next year you will be ${age + 1}.`);

The template-string version reads almost like a sentence with blanks, and the computer fills each ${...} blank with the value inside it — even a calculation like ${age + 1}. This is how programs produce output that changes depending on their data.

Now the input: standing in for the user

Output is easy to see; input is a little more subtle. In a finished program, input might come from the keyboard, a touchscreen, a mouse click, a microphone, or a sensor. But every kind of input ends up the same way inside the program: stored in a variable. Once the data is in a variable, your code doesn't care how it arrived — it just processes it.

So the clean way to think about — and to test — a program is to put the input in a variable at the top, exactly as if the user had just typed it. Then the rest of the program processes that variable. Here the "input" is a name; the program greets it. Change the value and Run again — that's just like a different user typing a different name.

// Pretend the user typed this name — in a real program you'd READ it from the keyboard. const userName: string = "Sam"; // PROCESS: build a greeting from the input. const greeting: string = "Welcome, " + userName + "!"; // OUTPUT: show the result. console.log(greeting);

There it is — input → process → output — in three lines. The middle line does the work; swap the top line and the whole program behaves differently, even though not one word of the processing changed.

Good eye! A real program running on your computer or phone can pop up a box and wait for you to type — that's genuine keyboard input. The little sandbox behind the Run button on this page is deliberately sealed off: it can't reach your keyboard, the internet, or your files. That keeps it safe, but it means there is no one to type an answer. So on this page we do the next best thing: we preset the input in a variable at the top and change it by hand. It behaves exactly as if a user had typed that value.

Input → process → output, working with numbers

Let's process some numbers. Imagine a program that asks how many pencils you're buying and how much each one costs, then tells you the total. We stand in for the two inputs with variables, do the sum in the middle, and print the answer at the end:

// INPUT (pretend the user entered these): const pencils: number = 4; const priceEach: number = 25; // in pence // PROCESS: const totalPence: number = pencils * priceEach; const totalPounds: number = totalPence / 100; // OUTPUT: console.log(`${pencils} pencils at ${priceEach}p each`); console.log(`Total: ${totalPence}p, which is £${totalPounds}`);

Try changing pencils or priceEach and running again. The program stays exactly the same — only the input changes — yet the output updates to match. A single piece of code that handles any input is far more useful than one that only ever prints one fixed answer.

When input really does arrive from the keyboard, it comes in as text — a string — even if it looks like a number. Typing 2 gives the program the string "2", not the number 2. And + does two different jobs: it adds numbers but joins strings. So if you forget to convert, you get a nasty surprise:

// Imagine these two came from the keyboard, so they are STRINGS: const a: string = "2"; const b: string = "3"; console.log(a + b); // "23" — glued together, NOT added! // Convert to numbers first with Number(...), THEN add: console.log(Number(a) + Number(b)); // 5 — correct

"2" + "3" is "23", not 5, because both sides are text and + simply sticks them together. The fix is to convert the input to a number first — Number("2") gives the number 2 — and only then do the maths. Rule of thumb: convert keyboard input to a number before calculating with it.

Putting it all together

Here's a slightly bigger example that uses the whole pattern and the conversion trick. Two inputs arrive as text (as they would from a keyboard); the program converts them, processes them, and outputs a friendly result:

// INPUT — as text, the way the keyboard would deliver it: const yearBornText: string = "2012"; const thisYearText: string = "2026"; // PROCESS — convert to numbers, then calculate: const age: number = Number(thisYearText) - Number(yearBornText); // OUTPUT: console.log(`You are about ${age} years old.`); if (age >= 13) { console.log("You're a teenager!"); } else { console.log("Not a teenager yet."); }

Every program you write from now on — however clever — is really this same story told in more detail: get some input, process it, produce some output.