Conquering TypeScript's First Challenge

Welcome, brave coders, to Level 3 of our TypeScript journey! You've made it this far, and now it's time to face your first boss challenge. Strap in, because we're about to dive into some exciting code!

Prerequisites

Before we begin, make sure you're comfortable with basic JavaScript. If you need to set up your development environment, check out my first blog in the series for the tools you'll need to install.

Setting the Stage

Let's start by creating our battlefield. Open up your terminal and navigate to your project directory you set up from the previous blog. We're going to make a few changes:

1. Create a new src directory:

mkdir src

2. We no longer need the level.ts file from the previous blog, so let's remove it:

rm level.ts

3. Now, let's create our main file:

touch src/index.ts

This index.ts file will be our entry point, as specified in the package.json file.

The Dice Game Challenge

Our first boss challenge is to create a simple dice game. We'll write a function to throw a 6-sided die and compare the result with a guess.

Open up src/index.ts and let's start coding!

Step 1: The Dice Throw Function

First, let's create our throwDice function:

function throwDice() {
 const sides = 6;
 const randomDiceResult = Math.floor(Math.random() * sides) + 1;
 return randomDiceResult;
}

This function uses Math.random() to generate a random number between 1 and 6, simulating a dice throw.

Step 2: Setting Up the Game

Now, let's set up our game logic inside src/index.ts outside our newly created function:

const yourGuess = 3; // Hardcoded guess for now
const result = throwDice();
console.log(`You guessed: ${yourGuess}. The result is: ${result}`);
if (yourGuess === result) {
  console.log("Congratulations! Your guess was correct.");
} else {
  console.log("Sorry, your guess was incorrect.");
}

Here, we're hardcoding the guess for simplicity. In a real game, you'd want to get this input from the user.

Running Our Game

Now that we've written our code, let's compile and run it:

1. Compile the TypeScript:

npx tsc

This should create an index.js file in your src folder.

2. Run the compiled JavaScript:

node src/index.js

You should see output in your terminal similar to the output below:

You guessed: 3. The result is: 5

Sorry, your guess was incorrect.

Congratulations!

You've just created, compiled, and run your first TypeScript project. You've also defeated the first boss of this course!

But Wait, There's More!

Think you're up for an extra challenge? Here's a bonus phase for our brave coders:

Update the code to:

Allow the user to input their guess dynamically
Display the user's guess and the actual dice result
Implement a loop for multiple guesses and keep track of the score

Here's a template to get you started:

const readline = require('readline');

function throwDice() {
  // Your existing throwDice function
}

function playGame() {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });

  rl.question('Enter your guess (1-6): ', (guess) => {
    // Game logic here
  });

  rl.question('Do you want to play again? (yes/no): ', (playAgain) => {
    // Re-play logic here
  });
}

playGame();

Wrapping Up

You've taken a huge step in your TypeScript journey today. We've covered creating a project structure, writing TypeScript code, compiling it, and running the result.

Remember, all JavaScript is valid TypeScript, so we're easing into the TypeScript-specific features.

As we progress, we'll dive deeper into TypeScript's powerful type system.

Keep practicing, keep coding, and get ready for the next level! The TypeScript adventure continues!

Happy Coding!

Severless Mage