Foundations

Hello TypeScript

Start with a small TypeScript program that stores a typed value and prints it.

type annotation TypeScript lets you write JavaScript plus explicit types such as `string`, so tools can catch mistakes before the code runs.

Hello

name
hello.ts
Replay: real traced execution (multi-file project)
const name: string = "TypeScript";
const message: string = `Hello, ${name}!`;

console.log(message);

const name: string = "Ada";
const message: string = `Hello, ${name}!`;

console.log(message);

const name: string = "Lattice";
const message: string = `Hello, ${name}!`;

console.log(message);

  1. name ← TypeScript, message ← Hello, TypeScript!

    1const name→ TypeScript: string = "TypeScript";  //@name="Ada", "Lattice"2const message→ Hello, TypeScript!: string = `Hello, ${nameTypeScript}!`;34console.log(messageHello, TypeScript!);
    outputHello, TypeScript!

  1. name ← Ada, message ← Hello, Ada!

    1const name→ Ada: string = "Ada";2const message→ Hello, Ada!: string = `Hello, ${nameAda}!`;34console.log(messageHello, Ada!);
    outputHello, Ada!

  1. name ← Lattice, message ← Hello, Lattice!

    1const name→ Lattice: string = "Lattice";2const message→ Hello, Lattice!: string = `Hello, ${nameLattice}!`;34console.log(messageHello, Lattice!);
    outputHello, Lattice!

Follow the Message

  1. name starts as "TypeScript".
  2. The template text is Hello, ${name}!.
  3. message becomes Hello, TypeScript!.
  4. console.log(message) prints Hello, TypeScript!. | name | message | | --- | --- | | TypeScript | Hello, TypeScript! | | Ada | Hello, Ada! | | Lattice | Hello, Lattice! |

Exercise: hello.ts

Reproduce Hello, TypeScript!, then try Ada and Lattice and predict each greeting before running it.