TypeScript Code Generator (Free AI Tool)

Plain English:
"Create a generic function that safely accesses nested object properties,
returns undefined if path does not exist, and maintains type safety
throughout the chain."

/**
 * Safely access nested object properties with type safety.
 * 
 * @template T - Type of the source object
 * @template K - Type of the property keys
 * @param obj - Source object to access
 * @param path - Array of property keys to traverse
 * @returns Value at path or undefined if not found
 * 
 * @example
 * const user = { profile: { name: "John" } };
 * const name = getNestedProperty(user, ["profile", "name"]); // "John"
 * const missing = getNestedProperty(user, ["profile", "age"]); // undefined
 */
function getNestedProperty<T extends Record<string, any>, K extends keyof any>(
  obj: T | null | undefined,
  path: K[]
): any | undefined {
  // Handle null/undefined input
  if (obj == null || !Array.isArray(path) || path.length === 0) {
    return undefined;
  }
  
  // Type guard to check if value is an object
  const isObject = (value: unknown): value is Record<string, any> => {
    return typeof value === "object" && value !== null;
  };
  
  // Traverse the path
  let current: any = obj;
  
  for (const key of path) {
    if (!isObject(current) || !(key in current)) {
      return undefined;
    }
    current = current[key];
  }
  
  return current;
}

// Type-safe usage examples
interface User {
  id: number;
  profile: {
    name: string;
    email: string;
    settings?: {
      theme: string;
    };
  };
}

const user: User = {
  id: 1,
  profile: {
    name: "Alice",
    email: "[email protected]",
    settings: { theme: "dark" }
  }
};

// All type-safe accesses
const name = getNestedProperty(user, ["profile", "name"]); // string | undefined
const theme = getNestedProperty(user, ["profile", "settings", "theme"]); // any | undefined
const missing = getNestedProperty(user, ["profile", "age"]); // undefined

Plain English:
"Create a React component for a user profile card that accepts
user data as props, displays avatar and info, handles loading
and error states, and includes proper TypeScript types."

import React, { useState, useEffect } from "react";

/**
 * User data interface.
 */
interface User {
  id: number;
  name: string;
  email: string;
  avatar?: string;
  bio?: string;
}

/**
 * Props for UserProfileCard component.
 */
interface UserProfileCardProps {
  userId: number;
  onError?: (error: Error) => void;
  className?: string;
}

/**
 * State for component data fetching.
 */
type LoadingState = 
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: User }
  | { status: "error"; error: Error };

/**
 * User profile card component with loading and error states.
 * 
 * @component
 * @param props - Component props
 * @returns React component displaying user profile
 * 
 * @example
 * <UserProfileCard 
 *   userId={123} 
 *   onError={(err) => console.error(err)}
 * />
 */
const UserProfileCard: React.FC<UserProfileCardProps> = ({
  userId,
  onError,
  className = ""
}) => {
  const [state, setState] = useState<LoadingState>({ status: "idle" });
  
  useEffect(() => {
    let cancelled = false;
    
    const fetchUser = async (): Promise<void> => {
      setState({ status: "loading" });
      
      try {
        const response = await fetch(`/api/users/${userId}`);
        
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data: User = await response.json();
        
        if (!cancelled) {
          setState({ status: "success", data });
        }
      } catch (error) {
        const err = error instanceof Error 
          ? error 
          : new Error("Unknown error occurred");
        
        if (!cancelled) {
          setState({ status: "error", error: err });
          onError?.(err);
        }
      }
    };
    
    fetchUser();
    
    // Cleanup function to prevent state updates after unmount
    return () => {
      cancelled = true;
    };
  }, [userId, onError]);
  
  // Render based on state
  if (state.status === "loading") {
    return <div className={className}>Loading user profile...</div>;
  }
  
  if (state.status === "error") {
    return (
      <div className={`error ${className}`}>
        Error: {state.error.message}
      </div>
    );
  }
  
  if (state.status === "success") {
    const { data: user } = state;
    
    return (
      <div className={`user-card ${className}`}>
        {user.avatar && (
          <img 
            src={user.avatar} 
            alt={`${user.name} avatar`}
            className="avatar"
          />
        )}
        <h2>{user.name}</h2>
        <p className="email">{user.email}</p>
        {user.bio && <p className="bio">{user.bio}</p>}
      </div>
    );
  }
  
  return null;
};

export default UserProfileCard;