AI Skill Report Card
Generating TypeScript PATCH Controllers
Quick Start15 / 15
TypeScriptexport const updateUserController = async ( id: User['id'], params: UpdateUserParams, ): Promise<AxiosResponse<User, any>> => { const url = `/api/users/${id}/`; const instance = genRequestInstance(); try { const response = await instance.patch(url, params); return response; } catch (error) { return Promise.reject(error); } };
Recommendation▾
Remove redundant explanations like 'Define function signature with proper typing' - Claude knows TypeScript basics
Workflow12 / 15
Progress:
- Analyze existing patterns and identify parameters
- Define function signature with proper typing
- Construct URL path with parameters
- Implement request with error handling
- Validate types match API expectations
Steps:
- Extract URL parameters - Identify all dynamic segments in the endpoint
- Define function name - Follow
update{Entity}Controllerpattern - Type parameters - Use namespace-qualified types for IDs and update params
- Build URL - Interpolate parameters into API path
- Execute request - Use patch method with genRequestInstance()
- Handle errors - Let axios handle HTTP errors, reject on catch
Recommendation▾
Combine or streamline the 'Type Definitions Needed' and 'Best Practices' sections to reduce verbosity
Pattern Definition
TypeScriptexport const update{EntityName}Controller = async ( // URL parameters (0 or more) param1: Namespace.Type['id'], param2?: Namespace.Type['id'], // Body parameters (always last) params: Namespace.Update{EntityName}Params, ): Promise<AxiosResponse<Namespace.{EntityName}, any>> => { const url = `/api/path/with/${param1}/interpolated/${param2}/`; const instance = genRequestInstance(); try { const response = await instance.patch(url, params); return response; } catch (error) { return Promise.reject(error); } };
Examples20 / 20
Example 1: Input: "Create update controller for user profile with user ID" Output:
TypeScriptexport const updateUserProfileController = async ( id: User['id'], params: UpdateUserProfileParams, ): Promise<AxiosResponse<UserProfile, any>> => { const url = `/api/users/${id}/profile/`; const instance = genRequestInstance(); try { const response = await instance.patch(url, params); return response; } catch (error) { return Promise.reject(error); } };
Example 2: Input: "Create update controller for project task with project ID and task ID" Output:
TypeScriptexport const updateProjectTaskController = async ( projectId: Project['id'], taskId: Task['id'], params: UpdateProjectTaskParams, ): Promise<AxiosResponse<ProjectTask, any>> => { const url = `/api/projects/${projectId}/tasks/${taskId}/`; const instance = genRequestInstance(); try { const response = await instance.patch(url, params); return response; } catch (error) { return Promise.reject(error); } };
Recommendation▾
The workflow checklist could be more actionable - some steps like 'Validate types match API expectations' are vague
Type Definitions Needed
When creating a new controller, ensure these types exist:
TypeScript// Update parameters interface interface Update{EntityName}Params { // Define the request body structure field1?: string; field2?: number; // ... other updatable fields } // Return type (if not already defined) interface {EntityName} { id: string | number; // ... entity fields }
Best Practices
- Consistent naming: Always use
update{EntityName}Controller - Type safety: Reference existing namespace types for IDs
- URL patterns: End URLs with trailing slash
/ - Parameter order: URL params first, body params last
- Async/await: Always use async functions with proper error handling
- Export: Always export const for tree-shaking
Common Pitfalls
- Missing types: Don't create controllers without proper TypeScript interfaces
- Inconsistent URLs: Follow the established API path conventions
- Parameter order: Don't put body params before URL params
- Error swallowing: Don't catch and ignore errors - always reject
- Missing await: Don't forget await on the axios call
- Type mismatches: Ensure ID types match the entity's actual ID type