Remix TypeScript集成 #

{
  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "noEmit": true,
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

/// <reference types="@remix-run/dev/vite" />
/// <reference types="@remix-run/node" />

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      DATABASE_URL: string;
      SESSION_SECRET: string;
      NODE_ENV: "development" | "production" | "test";
    }
  }
  
  interface Window {
    ENV: {
      PUBLIC_API_URL: string;
    };
  }
}

export {};

import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";

export async function loader({ params, request }: LoaderFunctionArgs) {
  const post = await getPost(params.id);
  return json({ post });
}

import { useLoaderData } from "@remix-run/react";

export default function Post() {
  // 自动推断类型
  const { post } = useLoaderData<typeof loader>();
  
  return <div>{post.title}</div>;
}

interface LoaderData {
  post: Post;
  comments: Comment[];
}

export async function loader({ params }: LoaderFunctionArgs) {
  const [post, comments] = await Promise.all([
    getPost(params.id),
    getComments(params.id),
  ]);
  
  return json<LoaderData>({ post, comments });
}

import type { ActionFunctionArgs } from "@remix-run/node";

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  // ...
}

import { z } from "zod";

const postSchema = z.object({
  title: z.string().min(3),
  content: z.string().min(10),
});

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const result = postSchema.safeParse(Object.fromEntries(formData));
  
  if (!result.success) {
    return json({ errors: result.error.flatten() }, { status: 400 });
  }
  
  const post = await createPost(result.data);
  return redirect(`/posts/${post.id}`);
}

import type { MetaFunction, LinksFunction } from "@remix-run/node";
import { useLoaderData, useActionData } from "@remix-run/react";

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  return [
    { title: data?.post.title },
    { name: "description", content: data?.post.excerpt },
  ];
};

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesUrl },
];

export default function Post() {
  const { post } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

interface ButtonProps {
  variant?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export function Button({
  variant = "primary",
  size = "md",
  disabled,
  onClick,
  children,
}: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: string;
}

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await getPost(params.id);
  
  return json<ApiResponse<Post>>({
    success: true,
    data: post,
  });
}

import { useFetcher } from "@remix-run/react";

export function useApiFetcher<T>(action: string) {
  const fetcher = useFetcher<ApiResponse<T>>();
  
  return {
    submit: (data: Record<string, any>) => {
      fetcher.submit(data, { method: "post", action });
    },
    data: fetcher.data?.data,
    error: fetcher.data?.error,
    isLoading: fetcher.state !== "idle",
  };
}

import type { RouteMatch } from "@remix-run/react";

export function useRouteData<T>(routeId: string): T | undefined {
  const matches = useMatches();
  const match = matches.find((m) => m.id === routeId);
  return match?.data as T | undefined;
}

type RouteParams<T extends string> = T extends `${string}$${infer Param}`
  ? { [K in Param]: string }
  : {};

export async function loader<Params extends string>({
  params,
}: LoaderFunctionArgs & { params: RouteParams<Params> }) {
  // params 有类型推断
}

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  }
}

export type { User, CreateUserInput };
export { getUser, createUser };

export type { LoaderData as PostLoaderData } from "./routes/posts.$id";
export type { LoaderData as UserLoaderData } from "./routes/users.$id";