TypeScript Tutorial: Creating a Simple Web-Based Number Guessing Game

Written by

learnmodernjavascript

in

Ever found yourself staring blankly at a screen, wishing you could build something cool? Maybe you’ve tinkered with JavaScript and want to level up. This tutorial is your starting point! We’re diving into TypeScript by building a simple, yet engaging, number guessing game right in your web browser. This project isn’t just fun; it’s a practical way to grasp the core concepts of TypeScript, from types and variables to functions and event handling. Get ready to transform from a code dabbler into a confident TypeScript coder, one guess at a time!

Why TypeScript?

Before we jump into the code, let’s talk about why TypeScript is a game-changer. JavaScript, while versatile, can be tricky to manage in larger projects. Bugs can be hard to track down, and refactoring can be a nightmare. TypeScript addresses these pain points by adding static typing to JavaScript. This means you define the types of your variables (e.g., numbers, strings, booleans) during development. The TypeScript compiler then checks your code for type errors *before* you even run it, catching potential problems early on. This leads to more reliable code, easier debugging, and better maintainability. Think of it as having a helpful assistant who proofreads your code as you write, preventing silly mistakes before they happen.

Setting Up Your Project

Let’s get our environment ready. We’ll need Node.js and npm (Node Package Manager) installed. Most modern development environments come with these pre-installed, but if not, head over to nodejs.org and download the latest version. Once you’ve got those, create a new project directory and navigate into it using your terminal or command prompt. Then, initialize a new npm project:

npm init -y

This command creates a `package.json` file, which manages your project’s dependencies. Next, we’ll install TypeScript as a development dependency:

npm install --save-dev typescript

This installs the TypeScript compiler (`tsc`). Now, let’s create a `tsconfig.json` file. This file tells the TypeScript compiler how to compile your code. Run the following command:

npx tsc --init

This generates a `tsconfig.json` file with many configuration options. We’ll keep it simple for now, but here are a few key settings you might want to adjust:

  • target: Specifies the JavaScript version to compile to (e.g., “ES5”, “ES6”, “ESNext”). “ES5” is widely compatible, while “ESNext” uses the latest features.
  • module: Specifies the module system to use (e.g., “commonjs”, “esnext”).
  • outDir: The directory where compiled JavaScript files will be placed.
  • sourceMap: Whether to generate source map files for debugging.

For this project, the default settings will work fine. Your project structure should now look something like this:

my-guessing-game/
├── node_modules/
├── package.json
├── tsconfig.json
└──

Writing the TypeScript Code

Let’s create an `index.ts` file in your project directory. This is where we’ll write our game logic. Open `index.ts` in your code editor (VS Code is highly recommended) and let’s start coding. We will build the game step by step:

1. Generating a Random Number

First, we need a random number that the user will try to guess. Let’s create a function to generate a random integer between 1 and 100:

function generateRandomNumber(): number {
  return Math.floor(Math.random() * 100) + 1;
}

const secretNumber: number = generateRandomNumber();

Explanation:

  • We define a function `generateRandomNumber()` that returns a number. The `number` after the parenthesis is the return type annotation.
  • Inside the function, `Math.random()` generates a random number between 0 (inclusive) and 1 (exclusive).
  • We multiply that random number by 100 to get a number between 0 and 99.999…
  • `Math.floor()` rounds the number down to the nearest integer.
  • We add 1 to get a number between 1 and 100.
  • We declare a constant `secretNumber` and assign it the result of `generateRandomNumber()`. We use type annotation `: number` to indicate that `secretNumber` is a number.

2. Getting User Input

Next, we need a way for the user to input their guess. We’ll use the `prompt()` function for simplicity. However, `prompt()` returns a string, so we’ll need to convert it to a number. Add this code to your `index.ts` file:

function getUserGuess(): number | null {
  const guessString = prompt("Guess the number (1-100):");
  if (guessString === null) {
    return null; // User cancelled the prompt
  }
  const guess = parseInt(guessString, 10);
  if (isNaN(guess) || guess  100) {
    alert("Invalid input. Please enter a number between 1 and 100.");
    return getUserGuess(); // Recursive call to get valid input
  }
  return guess;
}

Explanation:

  • We define a function `getUserGuess()` that returns either a `number` or `null`. This is indicated by the union type `number | null`.
  • `prompt()` displays a dialog box asking the user for input.
  • We check if the user cancels the prompt using `if (guessString === null)`.
  • `parseInt(guessString, 10)` attempts to convert the user’s input to an integer (base 10).
  • `isNaN(guess)` checks if the conversion resulted in a non-numeric value.
  • We validate the guess to ensure it’s within the range of 1-100.
  • If the input is invalid, we display an alert and recursively call `getUserGuess()` to prompt the user again. This is a common pattern to ensure valid user input.

3. Comparing the Guess

Now, let’s compare the user’s guess to the secret number. Add this function:

function checkGuess(guess: number): string {
  if (guess === secretNumber) {
    return "Congratulations! You guessed the number!";
  } else if (guess < secretNumber) {
    return "Too low! Try again.";
  } else {
    return "Too high! Try again.";
  }
}

Explanation:

  • The `checkGuess()` function takes a `number` (the user’s guess) as input and returns a `string` indicating the result.
  • We use `if/else if/else` statements to compare the guess to the `secretNumber`.
  • The function returns different messages based on whether the guess is correct, too low, or too high.

4. The Game Loop and Main Function

Let’s create the main game logic. We’ll use a `while` loop to repeatedly ask the user for guesses until they get it right. Add this code to your `index.ts` file:

function playGame() {
  let attempts = 0;
  while (true) {
    const guess = getUserGuess();
    if (guess === null) {
      alert("Game cancelled.");
      return;
    }
    attempts++;
    const result = checkGuess(guess);
    alert(result);
    if (guess === secretNumber) {
      alert(`You guessed it in ${attempts} attempts!`);
      break; // Exit the loop
    }
  }
}

playGame(); // Start the game

Explanation:

  • We define a function `playGame()` to encapsulate the game logic.
  • We initialize an `attempts` variable to keep track of the number of guesses.
  • The `while (true)` loop runs indefinitely until the user guesses correctly or cancels the game.
  • Inside the loop, we call `getUserGuess()` to get the user’s input.
  • If the user cancels the prompt (`guess === null`), we alert the user and `return` to end the game.
  • We increment the `attempts` counter.
  • We call `checkGuess()` to get the result of the guess.
  • We display the result using `alert()`.
  • If the guess is correct, we congratulate the user and `break` out of the loop.
  • Finally, we call `playGame()` to start the game when the script runs.

5. Compiling and Running

Now it’s time to compile your TypeScript code into JavaScript. Open your terminal and run:

tsc

This will compile your `index.ts` file into `index.js` in the same directory (or the `outDir` you specified in `tsconfig.json`). To run the game, you’ll need an HTML file to load the JavaScript. Create an `index.html` file in your project directory with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Number Guessing Game</title>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

Explanation:

  • This is a basic HTML structure.
  • The `<script src=”index.js”></script>` tag loads the compiled JavaScript file.

Open `index.html` in your web browser. You should see a prompt asking you to guess the number. Try it out! You’ve successfully built a number guessing game in TypeScript.

Common Mistakes and How to Fix Them

Even experienced developers make mistakes. Here are some common pitfalls when starting with TypeScript and how to avoid them:

  • Type Errors: The most common issue is type errors. TypeScript will tell you exactly where the problem is. Carefully read the error messages. They usually pinpoint the line of code and the expected type. For example, if you try to assign a string to a variable declared as a number, TypeScript will flag it. The fix is to ensure your variable assignments and function return values match the declared types.
  • Incorrect Type Annotations: Make sure your type annotations are accurate. If you’re unsure about a type, you can use `typeof` to infer it from a variable or expression, or use `any` temporarily (but try to avoid `any` as much as possible, as it defeats the purpose of TypeScript). For instance, if a function returns either a number or `null`, you need to use the union type `number | null`.
  • Not Compiling: Make sure you are compiling your TypeScript code to JavaScript using the `tsc` command before running your HTML file. If you make changes to your `.ts` files but haven’t recompiled, your browser will be running the old JavaScript version.
  • Ignoring Error Messages: Don’t ignore the TypeScript compiler’s error messages. They are there to help you! Read them carefully, understand the problem, and make the necessary corrections.
  • Over-Complicating Types: Start simple. Don’t try to define incredibly complex types right away. Use basic types (number, string, boolean) and gradually introduce more advanced types (arrays, objects, interfaces, enums) as you become more comfortable.

Key Takeaways and Next Steps

Congratulations! You’ve built a functional number guessing game using TypeScript. You’ve also learned the core concepts of TypeScript, including:

  • Type Annotations: Defining the types of variables, function parameters, and return values.
  • Functions: Creating reusable blocks of code.
  • Control Flow: Using `if/else` statements and loops to control the program’s execution.
  • Basic Input/Output: Using `prompt()` and `alert()` for user interaction.

Now that you’ve got a grasp of the fundamentals, here are some ideas to level up your game and your TypeScript skills:

  • Add Difficulty Levels: Let the user choose the range of numbers (e.g., 1-100, 1-1000).
  • Limit Attempts: Give the user a limited number of guesses.
  • Provide Hints: Give the user hints (e.g., “Higher” or “Lower”) after each guess.
  • Use a UI Framework: Instead of `prompt()` and `alert()`, build a more visually appealing game using a framework like React, Angular, or Vue.js. This will expose you to how TypeScript works within more complex web applications.
  • Explore Advanced Types: Learn about interfaces, enums, and generics to write more robust and maintainable code.
  • Refactor the code into classes: This will help you understand object-oriented programming concepts.

FAQ

Here are some frequently asked questions about this tutorial and TypeScript in general:

  1. Why use TypeScript instead of JavaScript? TypeScript adds static typing to JavaScript, which helps catch errors early, improves code readability, and makes it easier to maintain larger projects. It also provides better tooling support (e.g., autocompletion, refactoring).
  2. Is TypeScript hard to learn? The basics of TypeScript are relatively easy to learn, especially if you already know JavaScript. The concepts of types and interfaces might take a bit of getting used to, but the benefits are well worth the effort.
  3. Does TypeScript replace JavaScript? No, TypeScript compiles to JavaScript. You still write JavaScript code, but TypeScript adds a layer of type checking and other features on top of it. Your browser only runs JavaScript.
  4. Can I use TypeScript with any JavaScript framework? Yes, TypeScript integrates well with popular JavaScript frameworks like React, Angular, and Vue.js. In fact, Angular is written in TypeScript.
  5. Where can I learn more about TypeScript? The official TypeScript documentation (typescriptlang.org/docs/) is an excellent resource. You can also find many tutorials and courses online on platforms like Udemy, Coursera, and freeCodeCamp.

By following this tutorial, you’ve taken your first steps into the world of TypeScript and web development. You’ve learned how to build a functional game, which is a great starting point. As you continue your journey, remember that practice is key. Keep coding, experimenting, and exploring new concepts. Embrace the power of static typing, and you’ll find yourself writing more reliable, maintainable, and enjoyable code. The more you code, the more comfortable you’ll become, and the more you’ll appreciate the benefits of TypeScript. Happy coding, and enjoy the journey!

More posts