Hello, TypeScript

By the end of this lesson you can write a TypeScript program that reads a line of input and prints text built from it, and you will know what a type annotation does and, just as important, what it does not do.

What TypeScript adds

TypeScript is JavaScript with a static type system on top. Every valid JavaScript file is already valid TypeScript, so you could rename app.js to app.ts and it would still work. What TypeScript adds is a checker that reads your code before it runs and reports type mistakes:

const user = { name: "Alice" };
console.log(user.nmae.toUpperCase()); // typo: the checker flags it as you type

Plain JavaScript only discovers the nmae typo when that line runs, maybe in production. TypeScript knows user has a name property and nothing called nmae, so it points at the mistake immediately. The bonus is tooling: autocomplete, go-to-definition and safe renames all work because the editor knows the type of every value.

A first program

const city: string = "Lisbon";
console.log("Welcome to " + city + ".");
console.log(`${city} has ${city.length} letters.`);

Output:

Welcome to Lisbon.
Lisbon has 6 letters.

Piece by piece:

• : string is a type annotation: it says "city holds text". Assigning a number to it later would be flagged.
• console.log(...) prints its argument followed by a newline.
• + between strings glues them together (concatenation).
• A template literal, text in backticks, can contain ${expression}. The expression is evaluated and its value is inserted into the text. city.length is the number of characters.

Annotations are optional where TypeScript can work the type out itself (const city = "Lisbon" is already known to be a string). The next lesson covers when to write them.

Reading input

Every exercise in this course gets its input from standard input. The starter does the reading for you with this line, so it is worth knowing what it does:

const text: string = require('fs').readFileSync(0, 'utf-8').trim();

readFileSync(0, 'utf-8') reads file descriptor 0, which is standard input, and returns everything the program was given as one string. That string normally ends with a newline, and .trim() removes whitespace from both ends. Input is always text: the characters 42 arrive as the string "42", not the number 42. A later lesson shows how to convert.

Types vanish at runtime

The compiler checks your annotations and then erases them. What actually runs is plain JavaScript:

const count: number = JSON.parse('"seven"'); // JSON.parse returns any, so this compiles
console.log(count + 1);                      // prints seven1

The annotation says number, but nothing checks it while the program runs, so the string "seven" slips through and + 1 glues a character onto it. TypeScript is a static analyzer, not a runtime bodyguard. Data that arrives from outside, such as input or a network response, still has to be validated by code you write.

This platform works the same way: it removes the types and runs the JavaScript that is left. It does not type-check your submission, so a type mistake never fails a run by itself. Only your program's output is compared. Use a type-aware editor, or run tsc yourself, to see the checker's complaints.

Common mistakes

• Forgetting .trim() on input. The trailing newline stays in the string, so "Hello, " + text + "!" prints Hello, Ada and then ! on a line of its own.
• Using quotes instead of backticks for ${...}. '${city}' is not interpolated; it prints the characters ${city} literally.
• Expecting an annotation to validate data. : number on a value parsed from text does not turn it into a number.
• Printing extra text. The grader compares your output exactly, so a label, a blank line or a trailing space you were not asked for fails the test.

Your exercise

Read a name and print two lines built from it: a greeting and the name's length. The starter already reads and trims the input into name. The likeliest mistake is the punctuation of the greeting, so compare your output with the example character by character.