Skip to content
Home » Introduction to TypeScript: Enhancing JavaScript Development » Deep Dive into Module 1: Introduction to TypeScript » 1.4 Hands-on Activities with TypeScript:

1.4 Hands-on Activities with TypeScript:

Learning by doing is an effective way to solidify your understanding of TypeScript. Here are some engaging activities to get you started:

Activity 1: Building a Simple Calculator:

  1. Create a TypeScript file: Name it calculator.ts.
  2. Define functions for basic operations: Create functions like add, subtract, multiply, and divide.
    • Use type annotations to specify the data types of arguments and return values (e.g., function add(num1: number, num2: number): number).
  3. Prompt user for input: Use the prompt function to ask the user for numbers and the desired operation.
    • Use type casting (e.g., Number(prompt("Enter first number: "))) to convert user input (strings) to desired data types (numbers).
  4. Perform calculations and display results: Call the appropriate function based on user input and display the result using console.log.

Activity 2: Building a Contact List:

  1. Create an interface: Define an interface named Contact that specifies properties like name, email, and phone (each with appropriate data types like string).
  2. Create an array of contacts: Declare an array of type Contact[] to store contact information.
  3. Add contacts to the list: Implement functionality to add new contacts to the array, prompting the user for details and creating new objects of type Contact.
  4. Display the list: Write a function to iterate through the contact list and print each contact’s information in a well-formatted way using string manipulation techniques.

Activity 3: Exploring Online Resources:

  1. Find online tutorials and challenges specifically focused on TypeScript.
    • Platforms like Codecademy, freeCodeCamp, and HackerRank offer interactive exercises and tutorials.
  2. Participate in online communities and forums dedicated to TypeScript.
    • Engaging in discussions and seeking help from experienced developers can enhance your learning and problem-solving skills.

By completing these activities and exploring additional resources, you’ll gain practical experience with TypeScript’s syntax, data types, functions, and other features, solidifying your understanding of the language and empowering you to tackle more complex projects.