TypeScript Tutorial: Building a Simple Interactive Rock, Paper, Scissors Game

Written by

learnmodernjavascript

in

Ever find yourself staring at a blank screen, yearning to build something cool, but unsure where to start? Let’s face it, we’ve all been there. Learning a new programming language can be daunting, and the sheer volume of information can feel overwhelming. Today, we’re diving into TypeScript, a powerful superset of JavaScript, and building a classic game: Rock, Paper, Scissors. This tutorial is designed for beginners and intermediate developers, providing a clear, step-by-step guide to create an interactive game that you can play in your browser. Why Rock, Paper, Scissors? It’s simple enough to grasp quickly, yet complex enough to illustrate key TypeScript concepts. Plus, who doesn’t love a good game?

Why TypeScript?

Before we get our hands dirty with code, let’s talk about why TypeScript is a fantastic choice for this project and, more broadly, for web development. TypeScript adds static typing to JavaScript. What does that mean? Basically, it allows you to define the types of variables, function parameters, and return values. This might seem like extra work at first, but it pays off handsomely in the long run. Here’s why:

  • Catch Errors Early: TypeScript catches type-related errors during development, before you even run your code. This saves you time and frustration by preventing bugs from slipping into production.
  • Improved Code Readability: Types act as self-documenting code. They make your code easier to understand and maintain, especially in larger projects.
  • Enhanced Code Completion and Refactoring: TypeScript-aware IDEs provide better code completion, making you more productive. Refactoring becomes safer and more efficient because the compiler helps you identify and fix potential issues.
  • Better Developer Experience: Overall, TypeScript leads to a more robust and enjoyable development experience.

For our Rock, Paper, Scissors game, TypeScript will help us ensure that our game logic is sound, that we’re using the correct data types, and that our code is easy to understand and modify.

Setting Up Your Environment

To get started, you’ll need a few things:

  • Node.js and npm (or yarn): These are essential for managing packages and running your TypeScript code. You can download Node.js from nodejs.org. npm (Node Package Manager) comes bundled with Node.js.
  • A Code Editor: I recommend Visual Studio Code (VS Code), which has excellent TypeScript support. You can download it from code.visualstudio.com.

Once you have these installed, let’s set up our project.

Project Initialization

  1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your project. For example: mkdir rock-paper-scissors-ts
  2. Navigate into the Directory: cd rock-paper-scissors-ts
  3. Initialize npm: Run npm init -y. This creates a package.json file, which will manage your project’s dependencies.
  4. Install TypeScript: Run npm install typescript --save-dev. The --save-dev flag indicates that this is a development dependency.
  5. Create a TypeScript Configuration File: Run npx tsc --init. This creates a tsconfig.json file, which configures the TypeScript compiler. We’ll modify this file later.

Your project structure should now look something like this:

rock-paper-scissors-ts/
├── node_modules/
├── package.json
├── tsconfig.json
└──

Configuring TypeScript (tsconfig.json)

The tsconfig.json file is where you tell the TypeScript compiler how to behave. Let’s make some important changes:

Open tsconfig.json in your code editor. You’ll see a lot of options, but we’ll focus on a few key ones:

{
  "compilerOptions": {
    "target": "es5",  // Or "es6", "esnext" depending on your target environment
    "module": "commonjs", // Or "esnext", "amd", etc.
    "outDir": "./dist", // Where compiled JavaScript files will be placed
    "rootDir": "./src", // Where your TypeScript source files are located
    "strict": true,   // Enable strict type checking (highly recommended)
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Here’s what each of these options does:

  • target: Specifies the JavaScript version to compile to. es5 is widely compatible, while es6 and esnext offer newer features.
  • module: Specifies the module system to use (e.g., commonjs, esnext).
  • outDir: Defines the output directory for the compiled JavaScript files.
  • rootDir: Specifies the root directory of your TypeScript source files.
  • strict: Enables strict type checking. This is highly recommended as it catches more errors.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files (e.g., those from node_modules).
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • include: Specifies the files or patterns to include in the compilation.

Save the tsconfig.json file.

Creating the Game Logic (src/game.ts)

Now, let’s create the core game logic. Create a new directory called src in your project directory (rock-paper-scissors-ts/src). Then, create a file named game.ts inside the src directory.

Here’s the code for game.ts:

// Define the possible choices
const choices = ['rock', 'paper', 'scissors'] as const;

// Define a type for the choices (helps with type safety)
type Choice = typeof choices[number];

// Function to get the computer's choice
function getComputerChoice(): Choice {
  const randomIndex = Math.floor(Math.random() * choices.length);
  return choices[randomIndex];
}

// Function to determine the winner
function determineWinner(playerChoice: Choice, computerChoice: Choice): string {
  if (playerChoice === computerChoice) {
    return 'It's a tie!';
  }

  if (
    (playerChoice === 'rock' && computerChoice === 'scissors') ||
    (playerChoice === 'paper' && computerChoice === 'rock') ||
    (playerChoice === 'scissors' && computerChoice === 'paper')
  ) {
    return 'You win!';
  }

  return 'You lose!';
}

// Function to play a single round
function playRound(playerChoice: Choice): string {
  const computerChoice = getComputerChoice();
  const result = determineWinner(playerChoice, computerChoice);
  return `You chose ${playerChoice}, the computer chose ${computerChoice}. ${result}`;
}

// Example usage (for testing in the console)
// const playerChoice = 'rock';
// const roundResult = playRound(playerChoice);
// console.log(roundResult);

export { playRound, choices };

Let’s break down this code:

  • choices: This array holds the possible choices: ‘rock’, ‘paper’, and ‘scissors’. The as const assertion ensures that TypeScript infers literal types for the array elements, providing better type safety.
  • Choice type: This type is defined using typeof choices[number]. It means that Choice can only be one of the values in the choices array. This is a great example of how TypeScript can help you write more robust code.
  • getComputerChoice(): This function randomly selects a choice for the computer.
  • determineWinner(): This function takes the player’s and computer’s choices and determines the winner based on the game rules.
  • playRound(): This function orchestrates a single round of the game. It gets the computer’s choice, determines the winner, and returns a string describing the result.
  • export { playRound, choices }: This makes the playRound function and the choices array available to other parts of your application.

Creating the User Interface (index.html and index.ts)

Now, let’s create the user interface. We’ll use basic HTML and JavaScript (with TypeScript) to create the game’s display and handle user interactions.

index.html

Create an index.html file in the root of your project directory (rock-paper-scissors-ts/index.html). Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock, Paper, Scissors</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        .choices {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        button {
            font-size: 16px;
            padding: 10px 20px;
            margin: 10px;
            cursor: pointer;
        }
        #result {
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Rock, Paper, Scissors</h1>
    <div class="choices">
        <button data-choice="rock">Rock</button>
        <button data-choice="paper">Paper</button>
        <button data-choice="scissors">Scissors</button>
    </div>
    <div id="result"></div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure of our game:

  • A heading (<h1>) for the game title.
  • A container (<div class="choices">) with buttons for each choice (rock, paper, scissors). The data-choice attribute on each button will store the player’s choice.
  • A result area (<div id="result">) where the game’s outcome will be displayed.
  • A link to the compiled JavaScript file (<script src="dist/index.js">).
  • Basic CSS for styling.

index.ts

Create an index.ts file in the src directory (rock-paper-scissors-ts/src/index.ts). This file will handle the user interactions and update the UI.

import { playRound, choices } from './game';

// Get references to HTML elements
const choiceButtons = document.querySelectorAll('.choices button');
const resultDiv = document.getElementById('result') as HTMLDivElement;

// Add event listeners to the choice buttons
choiceButtons.forEach(button => {
  button.addEventListener('click', () => {
    const playerChoice = button.dataset.choice as string;
    if (choices.includes(playerChoice)) {
      const roundResult = playRound(playerChoice);
      resultDiv.textContent = roundResult;
    }
  });
});

Let’s break down this code:

  • import { playRound, choices } from './game';: Imports the playRound function and the choices array from the game.ts file.
  • Element References: Gets references to the choice buttons and the result div in the HTML. Note the use of type assertions (as HTMLButtonElement and as HTMLDivElement) to tell TypeScript the expected types of these elements.
  • Event Listeners: Adds a click event listener to each choice button.
  • Player Choice: When a button is clicked, the code retrieves the player’s choice from the data-choice attribute.
  • Game Logic: Calls the playRound function to play a round of the game.
  • Update UI: Updates the resultDiv with the round result.

Compiling and Running the Game

Now, let’s compile the TypeScript code and run the game.

  1. Compile the TypeScript Code: Open your terminal and navigate to your project directory (rock-paper-scissors-ts). Run the command npx tsc. This will compile the TypeScript code in src to JavaScript files in the dist directory.
  2. Open the Game in Your Browser: Open the index.html file in your web browser. You should see the game interface.
  3. Play the Game: Click on the rock, paper, or scissors buttons to play the game! The result of each round will be displayed below the buttons.

Common Mistakes and How to Fix Them

Let’s look at some common mistakes beginners make when working with TypeScript and how to avoid them:

  • Ignoring Type Errors: The whole point of TypeScript is to catch errors early. Don’t ignore the error messages that the TypeScript compiler gives you! They are there to help you. Read them carefully and understand what the compiler is telling you. Use your IDE’s features to quickly navigate to the error locations.
  • Not Using Strict Mode: As mentioned earlier, enable strict mode in your tsconfig.json file ("strict": true). This enables a set of strict type-checking options that can help you catch more errors.
  • Incorrect Type Annotations: Make sure your type annotations are accurate. For example, if a function is supposed to return a number, make sure you annotate it as : number and that it actually returns a number. Use the type inference capabilities of TypeScript to reduce the amount of code you write and make it easier to read.
  • Not Using Interfaces or Types: Define interfaces or types to represent complex data structures. This makes your code more organized and easier to understand.
  • Forgetting to Compile: Remember to recompile your TypeScript code (using npx tsc) whenever you make changes.
  • Incorrect File Paths: Double-check your file paths in import statements and in the tsconfig.json file.
  • Mixing JavaScript and TypeScript: While it’s possible to gradually introduce TypeScript into a JavaScript project, it’s generally best to write new code in TypeScript from the start, especially in a project like this.

Key Takeaways and Next Steps

Congratulations! You’ve successfully built a simple but interactive Rock, Paper, Scissors game using TypeScript. You’ve learned how to:

  • Set up a TypeScript project.
  • Define types and interfaces.
  • Write functions and handle user input.
  • Compile TypeScript code.
  • Create a basic user interface with HTML and JavaScript.

This is just the beginning. Here are some ideas for expanding your game and your TypeScript skills:

  • Add a Scoreboard: Keep track of the player’s and computer’s scores.
  • Implement a Best-of-X Game: Allow the player to choose how many rounds to play.
  • Improve the UI: Use CSS to style the game and make it more visually appealing.
  • Add Animations: Use JavaScript to add animations to the game.
  • Explore Advanced TypeScript Features: Learn about generics, decorators, and more advanced features.
  • Refactor your code: As your game grows, refactor your code to improve its structure and maintainability. Consider separating your UI logic from your game logic.

FAQ

Let’s address some common questions:

  1. Why use TypeScript for a simple game? Even for a small project, TypeScript helps catch errors early, makes your code more readable, and improves the overall development experience. It’s a good way to learn the language and develop good coding habits.
  2. What are the benefits of using as const? The as const assertion tells TypeScript to infer literal types instead of widening the types. For example, without as const, the type of choices would be string[]. With as const, the type becomes readonly ['rock', 'paper', 'scissors'], which is more specific and provides better type safety.
  3. How do I debug TypeScript code? You can debug TypeScript code by compiling it to JavaScript and then debugging the JavaScript code in your browser’s developer tools or your IDE. VS Code has excellent debugging support for TypeScript.
  4. 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.
  5. Can I use a different framework or library? Absolutely! This tutorial focuses on the core concepts of TypeScript. You can adapt the game logic to use a framework like React, Angular, or Vue.js. The TypeScript principles remain the same.

Building this game is a great starting point for your journey into TypeScript. Remember that the best way to learn is by doing. Experiment with the code, try new things, and don’t be afraid to make mistakes. Each error you encounter is a learning opportunity. Happy coding!

With each line of code you write and each concept you grasp, you’re not just building a game, you’re building a foundation for your future in software development. The skills you’ve acquired today – understanding types, working with functions, and structuring your code – are transferable and invaluable. Remember to keep practicing and exploring new projects. The world of programming is vast and exciting, full of challenges and rewards. Embrace the journey, and enjoy the process of learning and creating. The next time you’re faced with a coding challenge, remember the lessons learned here, and apply them. You’re now equipped with the knowledge to build more complex and sophisticated applications. Keep coding, keep learning, and keep creating. You’ve got this!

More posts