أفضل ممارسات TypeScript في مشاريع React

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true
  }
}

type ProjectCardProps = {
  title: string;
  description: string;
  stack: readonly string[];
  href: string;
  featured?: boolean;
};

export function ProjectCard({
  title,
  description,
  stack,
  href,
  featured = false,
}: ProjectCardProps) {
  return (
    <article data-featured={featured}>
      <h3>{title}</h3>
      <p>{description}</p>
      <ul>
        {stack.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <a href={href}>View project</a>
    </article>
  );
}

type ButtonProps = React.ComponentProps<"button"> & {
  variant?: "primary" | "secondary";
};

export function Button({ variant = "primary", ...props }: ButtonProps) {
  return <button data-variant={variant} {...props} />;
}

function isProject(value: unknown): value is Project {
  return (
    typeof value === "object" &&
    value !== null &&
    "slug" in value &&
    typeof (value as { slug: unknown }).slug === "string"
  );
}

type State<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; message: string };

function render(state: State<Project[]>) {
  switch (state.status) {
    case "idle":
      return null;
    case "loading":
      return <Spinner />;
    case "success":
      return <ProjectList projects={state.data} />;
    case "error":
      return <ErrorMessage message={state.message} />;
  }
}

async function getJson<T>(url: string): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("Request failed: " + response.status);
  }
  return (await response.json()) as T;
}

const projects = await getJson<Project[]>("/api/projects");

type ApiProject = {
  slug: string;
  name: string;
  stack: string[];
};

function parseProject(value: unknown): ApiProject | null {
  if (typeof value !== "object" || value === null) return null;
  const candidate = value as Record<string, unknown>;
  if (typeof candidate.slug !== "string") return null;
  if (typeof candidate.name !== "string") return null;
  if (!Array.isArray(candidate.stack)) return null;
  if (!candidate.stack.every((item) => typeof item === "string")) return null;
  return {
    slug: candidate.slug,
    name: candidate.name,
    stack: candidate.stack,
  };
}

const nav = [
  { label: "Work", href: "/projects" },
  { label: "About", href: "/about" },
] as const satisfies ReadonlyArray<{ label: string; href: string }>;

type NavHref = (typeof nav)[number]["href"];

type ContactValues = {
  name: string;
  email: string;
  message: string;
};

type ContactErrors = Partial<Record<keyof ContactValues, string>>;

function validate(values: ContactValues): ContactErrors {
  const errors: ContactErrors = {};
  if (!values.name.trim()) errors.name = "Name is required";
  if (!values.email.includes("@")) errors.email = "Enter a valid email";
  if (values.message.trim().length < 10) {
    errors.message = "Tell me a little more";
  }
  return errors;
}