Guided: Creating TypeScript Generic Interfaces and Functions

Table of Contents

1. Challenge

   Introduction to TypeScript Generics and Interfaces

   Welcome to this Code Lab on TypeScript generics and interfaces! Generics are a common feature in many programming languages, allowing you to write flexible, reusable, and type-safe code. Instead of being tied to a single data type, you can write functions, classes, and interfaces that work with a variety of types.

   In this lab, you'll define interfaces to model various data types and modify an in-memory repository data structure to be generic so that it can function across those interfaces.

   ---

   There is a solution directory for each step in the lab. You can compare your results if you wish at any time, though you do not need to have the exact same solution to proceed.

   This lab experience was developed by the Pluralsight team using Forge, an internally developed AI tool utilizing Gemini technology. All sections were verified by human experts for accuracy prior to publication. For issue reporting, please contact us.

2. Challenge

   Creating a Generic Function

   You will begin with the fundamental building block: a generic function. A generic function uses a type parameter, typically written as <T>, to capture the type of its arguments. This allows the function to operate on the data while preserving type information.

   For example, a function that takes an argument of type T and returns it will have its type signature inferred correctly, whether you pass it a string, number, or a complex object.

3. Challenge

   Defining Generic Interfaces

   Just like functions, interfaces can also be generic. This is incredibly useful for defining the 'shape' of data structures that can hold different types of content. You will also introduce generic constraints, which allow you to require that your generic type T has a certain structure. By using the extends keyword, you can ensure that any type used with your generic interface has the properties you need, adding another layer of type safety.

4. Challenge

   Implementing a Generic Class

   With your generic interface defined, it's time to create a concrete implementation. You will build a generic class that implements your Repository interface. This class will use a Map to store data in memory, providing a simple "backend" for your application. You'll see how the generic type T flows from the class definition down into its properties and methods.

5. Challenge

   Working with Utility Types

   TypeScript comes with a set of powerful utility types that work wonderfully with generics. In this step, you'll enhance your repository by using Partial<T> and Readonly<T>.

   • Partial<T> constructs a type with all properties of T set to optional. This is perfect for update methods, as it allows users to provide only the fields they want to change.
   • Readonly<T> makes all properties of T readonly. We'll use this to prevent consumers of our findAll method from modifying the data they receive, which is a good practice for protecting your data store's integrity.
6. Challenge

   Using the Generic Repository

   The final step is to see your generic repository in action. You will define a couple of different data models (User and Product) and create separate repository instances for each.

   This will demonstrate the ultimate goal of generics: writing code once and reusing it across many different types, all while maintaining full type safety and developer tooling support like autocompletion and error checking. After completing all the tasks, you can test this repository you implemented by running the command npm run start or npm start within the Terminal. You should see the following output:

   --- Repository Test ---
   
   --- Managing Users ---
   Created User: { id: 'user-1', name: 'Alice', email: '[email protected]' }
   Updated User: { id: 'user-1', name: 'Alice Smith', email: '[email protected]' }
   
   --- Managing Products ---
   Created Product: { id: 101, name: 'Laptop', price: 1200 }
   Updated Product: { id: 101, name: 'Laptop', price: 1150 }
   
   All products: [ { id: 101, name: 'Laptop', price: 1150 } ]
   

   If you do, then great job on completing this lab!