Typescript chevron_right Hello, World! in TypeScript

Hello, World! in TypeScript

calendar_today schedule 2 min read

1. Welcome and Icebreaker:

  • Great to have you! What’s your favorite programming language and why?

2. Outline the Session:

  • In this session, we’ll write our first TypeScript program: “Hello, World!”.
  • We will learn how to compile TypeScript code into JavaScript and then run it.
  • Learning Outcomes: Understand the basic TypeScript workflow (write -> compile -> run).
  • We’ll keep this interactive, so please ask if anything is unclear.

3. Concept Explanation:

  • TypeScript Files (.ts): We write TypeScript code in files with a .ts extension.
  • Compilation: Browsers and Node.js don’t understand TypeScript directly. We need to compile our .ts files into JavaScript (.js) files using the TypeScript compiler (tsc).
  • Running JavaScript: Once compiled, the resulting .js file can be run by Node.js or in a web browser.

4. Live Coding Demonstration:

  • Create a TypeScript file:
    1. Open VS Code and your project folder (e.g., my-typescript-projects).
    2. Create a new file named hello.ts.
    3. Add the following code to hello.ts:
    let message: string = "Hello, World!";
console.log(message);
  • Compile the TypeScript file:
    1. Open the integrated terminal in VS Code (if not already open).
    2. Navigate to the directory where you saved hello.ts.
    3. Run the TypeScript compiler:
    tsc hello.ts
    1. This will create a new file named hello.js in the same directory.
  • Run the JavaScript file:
    1. In the terminal, run the hello.js file using Node.js:
    node hello.js
    1. You should see “Hello, World!” printed to the console.

5. Tasks:

  • Short Exercise:
    1. Create a new TypeScript file named greeting.ts.
    2. In greeting.ts, declare a variable to store your name and print a personalized greeting (e.g., “Hello, [Your Name]!”).
    3. Compile greeting.ts to greeting.js.
    4. Run greeting.js using Node.js and verify the output.