try-error Documentation

React Types

TypeScript types and interfaces for React integration with try-error

Hook Return Types

UseTryAsyncResult

UseTryAsyncResult Interfacetypescript

interface UseTryAsyncResult<T> {
  data: T | null;
  error: TryError | null;
  loading: boolean;
  refetch: () => void;
}

Return type for the useTryAsync hook, providing data, error state, loading indicator, and refetch function.

UseTrySyncResult

UseTrySyncResult Interfacetypescript

interface UseTrySyncResult<T> {
  data: T | null;
  error: TryError | null;
  execute: () => void;
}

Return type for the useTrySync hook, providing data, error state, and execute function.

UseTryMutationResult

UseTryMutationResult Interfacetypescript

interface UseTryMutationResult<T, TVariables = void> {
  mutate: (variables: TVariables) => Promise<void>;
  data: T | null;
  error: TryError | null;
  loading: boolean;
  reset: () => void;
}

Return type for the useTryMutation hook, providing mutation function, data, error state, loading indicator, and reset function.

Component Props Types

TryErrorBoundaryProps

TryErrorBoundary Props Interfacestypescript

interface TryErrorBoundaryProps {
  fallback: React.ComponentType<TryErrorFallbackProps>;
  onError?: (error: TryError, errorInfo: React.ErrorInfo) => void;
  children: React.ReactNode;
}

interface TryErrorFallbackProps {
  error: TryError;
  resetError: () => void;
  retry: () => void;
}

AsyncComponentProps

AsyncComponent Props Interfacestypescript

interface AsyncComponentProps<T> {
  asyncFn: () => Promise<T>;
  deps?: React.DependencyList;
  loadingComponent?: React.ComponentType;
  errorComponent?: React.ComponentType<AsyncErrorProps>;
  children: (data: T) => React.ReactNode;
}

interface AsyncErrorProps {
  error: TryError;
  retry: () => void;
}

TryFormProps

TryForm Props Interfacestypescript

interface TryFormProps<T> {
  onSubmit: (data: FormData) => Promise<T>;
  onSuccess?: (result: T) => void;
  onError?: (error: TryError) => void;
  children: (state: TryFormState) => React.ReactNode;
}

interface TryFormState {
  loading: boolean;
  error: TryError | null;
  submit: (e: React.FormEvent) => void;
}

ErrorDisplayProps

ErrorDisplay Props Interfacetypescript

interface ErrorDisplayProps {
  error: TryError;
  showStack?: boolean;
  showContext?: boolean;
  showTimestamp?: boolean;
  onDismiss?: () => void;
  className?: string;
}

Utility Types

ReactTryResult

ReactTryResult Utility Typetypescript

type ReactTryResult<T> = {
  data: T | null;
  error: TryError | null;
  loading: boolean;
};

A utility type representing the common pattern of data, error, and loading state in React components.

AsyncFunction

AsyncFunction Typetypescript

type AsyncFunction<T> = () => Promise<T>;

SyncFunction

SyncFunction Typetypescript

type SyncFunction<T> = () => T;

MutationFunction

MutationFunction Typetypescript

type MutationFunction<T, TVariables = void> = (variables: TVariables) => Promise<T>;

Generic Constraints

Understanding the generic constraints used in try-error React types:

Generic Constraints Examplestypescript

1// T represents the success data type
2function useTryAsync<T>(
3  asyncFn: () => Promise<T>,
4  deps?: React.DependencyList
5): UseTryAsyncResult<T>
6
7// T is the return type, TVariables is the input type
8function useTryMutation<T, TVariables = void>(
9  mutationFn: (variables: TVariables) => Promise<T>
10): UseTryMutationResult<T, TVariables>
11
12// T extends function type for callback wrapping
13function useTryCallback<T extends (...args: any[]) => any>(
14  callback: T,
15  deps: React.DependencyList
16): T & { error: TryError | null; clearError: () => void }

Type Guards for React

Additional type guards specifically for React patterns:

React Type Guardstypescript

1// Check if a React component result has data
2function hasData<T>(result: ReactTryResult<T>): result is ReactTryResult<T> & { data: T } {
3  return result.data !== null && !result.error;
4}
5
6// Check if a React component result has an error
7function hasError<T>(result: ReactTryResult<T>): result is ReactTryResult<T> & { error: TryError } {
8  return result.error !== null;
9}
10
11// Check if a React component result is loading
12function isLoading<T>(result: ReactTryResult<T>): boolean {
13  return result.loading;
14}
15
16// Usage example
17function UserProfile({ userId }: { userId: string }) {
18  const result = useTryAsync(() => fetchUser(userId), [userId]);
19  
20  if (isLoading(result)) {
21    return <LoadingSpinner />;
22  }
23  
24  if (hasError(result)) {
25    // TypeScript knows result.error is TryError
26    return <ErrorDisplay error={result.error} />;
27  }
28  
29  if (hasData(result)) {
30    // TypeScript knows result.data is User (not null)
31    return <UserDetails user={result.data} />;
32  }
33  
34  return null;
35}

Advanced Type Patterns

Conditional Types for Hooks

Conditional Types Exampletypescript

1// Conditional return type based on whether deps are provided
2type UseTryAsyncReturn<T, HasDeps extends boolean> = HasDeps extends true
3  ? UseTryAsyncResult<T>
4  : UseTryAsyncResult<T> & { execute: () => void };
5
6// Hook that changes behavior based on deps
7function useTryAsync<T, HasDeps extends boolean = true>(
8  asyncFn: () => Promise<T>,
9  deps?: HasDeps extends true ? React.DependencyList : never
10): UseTryAsyncReturn<T, HasDeps>

Discriminated Unions for State

Discriminated Union Statetypescript

1// More precise state representation
2type AsyncState<T> =
3  | { status: 'idle'; data: null; error: null; loading: false }
4  | { status: 'loading'; data: null; error: null; loading: true }
5  | { status: 'success'; data: T; error: null; loading: false }
6  | { status: 'error'; data: null; error: TryError; loading: false };
7
8// Usage in components
9function useTypedTryAsync<T>(asyncFn: () => Promise<T>): AsyncState<T> {
10  // Implementation would return the discriminated union
11}

TypeScript Best Practices

✅ Do

• Use specific types for your data instead of `any`
• Leverage type guards for better type narrowing
• Use generic constraints to ensure type safety
• Define interfaces for complex prop types
• Use discriminated unions for complex state

❌ Don't

• Use `any` type unless absolutely necessary
• Ignore TypeScript errors in React components
• Forget to type your async functions properly
• Use overly complex generic constraints
• Skip type annotations for public APIs

Core Types

Learn about the core try-error types

View Core Types →

React Hooks

See these types in action with hooks

View Hooks →

try-error