MSH

How I use Zod with Wordle Unlimited

Published on

When dealing with data that goes over the network or stored in localStorage or any other place where we don't have full control over it, type safety becomes crucial.

Let's say we built a strictly typed way to store data in localStorage:

1type Colors = 'red' | 'green' | 'blue'; 2 3const key = 'colors'; const data: Colors[] = ['green', 'red']; 4 5localStorage.setItem(key, JSON.stringify(data));

Since we have no control over what happens to the data, it is outside of our type system. A user might go into their developer tools and alter the data. At this point, our data went outside of the type system and now there is no guarantee that the data still satisfies the Colors type.

What we have done now, is having types and it is not the same as having type safety!

A quick intro into Zod

Zod is used for data validation in TypeScript applications. The primary goal is to enforce precise data structures, ensuring that incoming data conforms to expected types and shapes. For more information refer to How to validate data using Zod

A quick intro to Wordle Unlimited

Wordle Unlimited is a guessing game consisting of 6 tries after each guess the color of the tiles will change to how close your guess was to the word. Each guess must be a valid word with the same number of letters as the number of squares horizontally.

Example:

f
i
r
s
t

We aim to save the game progress in the browser localStorage while ensuring type checks on stored values. This will play a role in safeguards against potential game-breaking issues if values are altered.

Validation with Zod

The schema represents the structure and validation rules for the Wordle data type:

1export const GameSchema = z.object({ 2 currentGuess: z.string(), 3 isWon: z.boolean(), 4 isLost: z.boolean(), 5 invalidGuess: z.boolean(), 6 guesses: z.array(z.array(z.string())), 7 solution: z.string(), 8});

To avoid code duplication we can extract the TypeScript type of GameSchema using z.infer:

1type GameState = z.infer<typeof GameSchema>;

Now to get the data back we can use safeParse. This method returns an object containing either the successfully parsed data or a ZodError instance containing detailed information about the validation:

1const data = localStorage.getItem(WORDLE_LOCAL_STORAGE_KEY); 2const results = GameSchema.safeParse(data); 3 4if (!results.success) { // initialize the game with the default state } else { // initialize the game with successfully parsed data "results.data" }

This way enables us to utilize Zod for validating external data that falls outside our type system.

Key Takeaways

  1. Type Safety Beyond TypeScript

    • TypeScript types only exist at compile time
    • Runtime validation is crucial for external data
    • Zod bridges the gap between compile-time and runtime type safety

  2. Data Validation Best Practices

    • Always validate external data sources
    • Use safeParse for graceful error handling
    • Leverage z.infer for type inference
    • Create reusable schemas for common patterns

  3. Real-World Applications

    • Form validation
    • API response validation
    • Local storage data validation
    • Configuration validation

References

GET IN TOUCH

Let's work together

I build exceptional and accessible digital experiences for the web

WRITE AN EMAIL

or reach out directly at hello@mohammadshehadeh.com