This implementation demonstrates how to create a Queue data structure using only two Stacks. A queue follows a First-In, First-Out (FIFO) principle, while stacks follow a Last-In, First-Out (LIFO) principle. This is a cl...

The QueueUsingStacks class uses two stacks: `stack1` for enqueuing and `stack2` for dequeuing. When an element is enqueued, it's simply pushed onto `stack1`. When an element needs to be dequeued, the algorithm first checks if `stack2` is empty. If it is, all elements from `stack1` are popped and pushed onto `stack2`. This reversal process ensures that the elements in `stack2` are now in the correct FIFO order for dequeueing. The `dequeue` operation then pops from `stack2`. The `peek` operation works similarly to `dequeue` but does not remove the element. The `isEmpty` operation checks if both stacks are empty. The time complexity for `enqueue` is O(1). The `dequeue` and `peek` operations have an amortized time complexity of O(1), as each element is pushed and popped from each stack at most once over the lifetime of the queue. The space complexity is O(n), where n is the number of elements in the queue, due to the storage required by the two stacks.

class QueueUsingStacks: stack1 = empty stack stack2 = empty stack method enqueue(x): push x onto stack1 method dequeue(): if stack2 is empty: while stack1 is not empty: pop element from stack1 push element onto stack2 if...

This code implements a type-safe theme provider using React Context API. It defines a `Theme` interface for theme properties (like background color, text color, font size) and a `ThemeContextType` interface for the conte...

The `ThemeProvider` component utilizes React's `createContext` to establish a `ThemeContext`. The `ThemeContextType` interface ensures that the values provided to the context (`theme` and `setTheme`) are strictly typed. The `ThemeProvider` itself manages the `theme` state using `useState`, initialized with either `initialTheme` or a `defaultTheme`. The `setTheme` function updates this state. The `ThemeContext.Provider` makes the `theme` and `setTheme` available to all descendant components. The `useTheme` hook simplifies context consumption by calling `useContext(ThemeContext)`. It includes a crucial runtime check: if `context` is `undefined` (meaning `useTheme` was called outside of a `ThemeProvider`), it throws an error, preventing potential runtime issues. Time complexity for context provision and consumption is O(1) per render. Space complexity is O(1) for the context value itself.

Define Theme interface with backgroundColor, textColor, fontSize. Define ThemeContextType interface with theme (Theme) and setTheme (function). Define defaultTheme object. Create ThemeContext using createContext, initial...

This code defines a simple state machine for tracking order statuses. The `OrderStatus` type is a union of possible states ('pending', 'processing', 'shipped', 'delivered', 'cancelled'). The `OrderState` interface holds...

The order status tracker is implemented as a finite state machine. The `OrderStatus` type defines the discrete states an order can be in. The `transitionOrderStatus` function acts as the state transition logic. It uses a `switch` statement on the `currentState.status` and checks the `action` to determine the next state. Invalid transitions or actions from terminal states (like 'delivered' or 'cancelled') result in the current state being returned. This ensures that the order progresses logically through its lifecycle. The use of a union type for `OrderStatus` and explicit actions provides strong type safety. Time complexity is O(1) for state transitions as it's a simple switch statement. Space complexity is O(1) for storing the state.

Define OrderStatus as a union of 'pending', 'processing', 'shipped', 'delivered', 'cancelled'. Define OrderState interface with status (OrderStatus) and message (string). Define initialOrderState with status 'pending'. C...

This React component implements a user registration form with robust client-side validation using Zod. It defines a schema for the form data, infers the TypeScript type from this schema, and uses this type for state mana...

The `UserForm` component uses Zod to define a schema (`userSchema`) that dictates the structure and validation rules for form data. `z.infer<typeof userSchema>` creates a TypeScript type (`UserFormData`) that perfectly matches the schema, ensuring type safety for the `formData` state. The `handleChange` function updates the `formData` state, performing basic type coercion for numbers and checkboxes. The `handleSubmit` function calls `userSchema.parse(formData)`. If the data conforms to the schema, it proceeds; otherwise, Zod throws a `ZodError`. This error is caught, and its `errors` array is iterated to extract field names and messages, which are then stored in the `errors` state and displayed to the user. The `renderError` helper conditionally shows error messages. Time complexity for validation is proportional to the number of fields and rules in the schema, typically O(N) where N is the number of fields. Space complexity is O(M) where M is the number of fields for storing form data and errors.

Import Zod and React hooks. Define userSchema using Zod for firstName, lastName, email, optional age, and termsAccepted. Infer UserFormData type from userSchema. Define FormErrors interface. Initialize formData state wit...

This function demonstrates discriminated unions in TypeScript to handle different event types. Each event type has a common `type` property that acts as a discriminant. The `handleEvent` function takes an `AppEvent` (a u...

The `handleEvent` function leverages discriminated unions to achieve type-safe handling of different event types. Each event type (`ClickEvent`, `KeyPressEvent`, `MouseMoveEvent`) has a literal `type` property that uniquely identifies it. The `AppEvent` type is a union of these specific event types. The `switch` statement on `event.type` allows TypeScript to narrow down the type of `event` within each `case` block, ensuring that only the correct properties (e.g., `x`, `y` for `click`) are accessed. The `default` case with `never` is a common pattern for ensuring exhaustiveness, causing a compile-time error if a new event type is added to the union but not handled in the switch. Time complexity is O(1) as it's a simple switch. Space complexity is O(1).

Define ClickEvent type with type='click', x, y. Define KeyPressEvent type with type='keypress', key. Define MouseMoveEvent type with type='mousemove', deltaX, deltaY. Define AppEvent as a union of ClickEvent, KeyPressEve...

This component renders a user's profile information. It takes a `UserProfileProps` object as input, which includes user ID, username, optional email, optional address, and an active status. The component dynamically rend...

The `UserProfileCard` component utilizes TypeScript's interface-based typing for its props, ensuring that all expected data fields are present and correctly typed. Optional fields (`email`, `address`) are handled using the `?` modifier, allowing them to be undefined. The component uses conditional rendering (`if (!address)` and `if (!email)`) to display these optional sections only when data is available, preventing rendering of empty sections. The `isActive` boolean prop influences the CSS class for styling. The time complexity is O(1) as it performs a fixed number of operations regardless of input size. Space complexity is also O(1) for the same reason.

Define UserAddress interface with street, city, zipCode. Define UserProfileProps interface with userId, username, optional email, optional address, isActive. Create UserProfileCard function accepting UserProfileProps. De...

The `ListRenderer` is a generic React component designed to abstract the common task of rendering lists. It accepts an array of items (`items`), a function to render each item (`renderItem`), a function to extract a uniq...

This `ListRenderer` component employs TypeScript generics (`<T>`) to create a flexible and type-safe way to render lists. The `ListRendererProps<T>` interface defines the component's props, where `T` represents the type of elements within the `items` array. The `renderItem` prop is a function that takes an item of type `T` and its index, returning the JSX to render for that item. The `keyExtractor` prop is crucial for React's reconciliation process and also receives an item of type `T`. The component handles the edge case of an empty or null `items` array by rendering a "No items to display." message. It then maps over the `items` array, using the provided `keyExtractor` to generate unique keys and `renderItem` to render each element within a list item (`<li>`). Time complexity is O(N) where N is the number of items, due to the mapping operation. Space complexity is O(N) for rendering the list elements.

Define ListRendererProps generic interface with items (T[]), renderItem (function), keyExtractor (function), optional listClassName, optional itemClassName. RenderItem function accepts item (T) and index (number), return...

This `DataFetcher` component is a generic React component designed to fetch data from a given URL and render it using a provided children function. It manages loading and error states internally. By using generics (`<T>`...

The `DataFetcher` component uses TypeScript generics (`<T>`) to create a reusable data fetching mechanism. The `DataFetcherProps<T>` interface defines the component's props, where `T` is a type parameter representing the expected type of the fetched data. The `children` prop is a render prop function that receives the fetched `data` (typed as `T | null`), a `isLoading` boolean, and an `error` object. The `useEffect` hook performs the asynchronous data fetching using the `fetch` API. It updates the `data`, `isLoading`, and `error` states accordingly. Error handling includes checking `response.ok` and catching network or parsing errors. The `finally` block ensures `isLoading` is set to `false` regardless of success or failure. Time complexity is O(1) for the component's rendering logic, but the data fetching itself depends on network latency and server response time. Space complexity is O(1) for state management, plus the space for the fetched data.

Define DataFetcherProps generic interface with url (string) and children (function). Children function accepts data (T | null), isLoading (boolean), error (Error | null) and returns ReactNode. Create DataFetcher generic...