Design a type-safe generic localStorage wrapper in TypeScript
Preserving compile-time types across localStorage's string-only API.
Generic getItem<T> returns T|null via JSON.parse, setItem<T> stringifies, and a key-to-type map enforces safety.
What's really being asked
This question tests whether you can bridge the gap between a runtime API that only stores strings and TypeScript's compile-time type system. The interviewer wants to see that you understand generics are not just for collections, but for preserving type information across serialization boundaries. They also care if you recognize that JSON.parse returns any, so a generic wrapper without runtime validation is only half-safe.
The full answer
A strong answer proposes a generic class or set of functions where setItem accepts a type parameter T, serializes the value with JSON.stringify, and stores it under a given key. The matching getItem uses the same type parameter T, retrieves the string, calls JSON.parse, and returns T or null if the key is missing. To make the API ergonomic, the candidate should mention mapping keys to specific types via an interface, such as a StorageMap where user maps to User, so that getItem of user automatically returns User without an explicit type argument. The candidate should also note edge cases like JSON.parse throwing on malformed data, handling null returns, and optionally guarding with a runtime validator or schema check since generic type parameters disappear at runtime.
The mistakes people make
The biggest red flag is returning string or any from getItem and telling the caller to cast the result manually. Another weak pattern is using the any type for the stored value, which erases type information and defeats the purpose of the wrapper. Some candidates forget that localStorage stores only strings and try to return the raw object directly. Others omit null handling entirely, suggesting the method always returns T. A less obvious mistake is forgetting that JSON.parse can throw, leaving the wrapper without error handling.
What usually comes next
The interviewer might ask how you would handle runtime validation since a generic type parameter cannot enforce that the parsed JSON actually matches T. They could ask how to namespace keys to avoid collisions between different features or tabs. Another follow-up is handling storage events to keep multiple tabs synchronized, or implementing a fallback to memory when localStorage is unavailable or in private browsing mode. You might also be asked to add expiration logic or quota exceeded handling.
A concrete example
Imagine a StorageMap interface with one property user of type User. The wrapper class is typed with this interface. Calling setItem with key user and a User object serializes it to a string. Later, calling getItem with key user uses the mapped type to know it should return User or null. If the stored string is missing, it returns null. If the string exists but is corrupted JSON, the parse call throws, so the wrapper should wrap JSON.parse in a try-catch and return null or log an error. This gives callers type safety at compile time and graceful degradation at runtime.
Interview question
Why is a key-to-type StorageMap preferable to passing an explicit generic argument on every getItem call in a localStorage wrapper?
- a.It prevents storage quota errors by limiting which keys can be written.
- b.It embeds runtime type guards into the wrapper to validate JSON.parse output.
- c.It serializes objects automatically without needing JSON.stringify in setItem.
- d.It preserves the type association at compile time so the correct return type is inferred from the key alone.Correct
Why? this is the answer
A StorageMap is purely a compile-time convenience that lets TypeScript infer the return type from the key, eliminating the need for explicit type arguments. It does not embed runtime validation, because all TypeScript type information is erased during compilation and cannot guard JSON.parse at runtime.
Just read this? Test yourself on what you have been reading.
Read the original → github.com
- #typescript
- #generics
- #localstorage
- #web-apis
- #type-safety
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on typescript — each one lists the topics its interview covers.
See open roles