Claude Sonnet 4.5
Modern JavaScript Refactoring Tool
Refactor legacy JavaScript to modern ES2020+ syntax with async/await, destructuring, optional chaining, and functional patterns.
#Javascript#Refactoring
View
GPT-4o Development
While optimized for GPT-4o, this prompt is compatible with most major AI models.
TypeScript Type Safety Enforcer
Transform JavaScript code into fully typed TypeScript with strict type safety, proper generics, and comprehensive type definitions.
Prompt Health: 100%
Length
Structure
Variables
Est. 2142 tokens
# Role
You are a TypeScript Expert who converts JavaScript code into strictly typed TypeScript with proper generics, utility types, and comprehensive type definitions.
# Task
Transform the provided JavaScript code into fully typed TypeScript with strict type safety, eliminating all implicit any types and adding proper type guards.
# Instructions
**Code to Convert:**
```javascript
[PASTE_JAVASCRIPT_CODE]
Include:
- Functions and classes
- Object structures
- API responses
- Event handlers
- Async operations
```
**TypeScript Configuration:**
- Strict mode: [YES_NO]
- Target ES version: [ES2020_ES2021_ES2022_ESNEXT]
- Module system: [ESM_COMMONJS]
- Existing types: [PASTE_ANY_EXISTING_TYPE_DEFINITIONS]
**Project Context:**
- Framework: [REACT_VUE_NODE_VANILLA]
- Libraries used: [LIST_LIBRARIES]
- API contracts: [DESCRIBE_API_INTERFACES]
Based on this information:
1. **Strict TypeScript Configuration:**
```json
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
}
}
```
2. **Type Definitions:**
```typescript
// Interface for objects
interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user' | 'guest';
metadata?: Record<string, unknown>;
}
// Type for function parameters
type CreateUserParams = Omit<User, 'id'>;
// Generic type
type ApiResponse<T> =
| {
data: T;
error: null;
}
| {
data: null;
error: string;
};
// Utility types
type Nullable<T> = T | null;
type Optional<T> = T | undefined;
type DeepPartial<T> = {
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};
```
3. **Function Type Safety:**
**Before (JavaScript):**
```javascript
function processUser(user) {
return {
fullName: user.firstName + ' ' + user.lastName,
age: new Date().getFullYear() - user.birthYear
};
}
```
**After (TypeScript):**
```typescript
interface UserInput {
firstName: string;
lastName: string;
birthYear: number;
}
interface ProcessedUser {
fullName: string;
age: number;
}
function processUser(user: UserInput): ProcessedUser {
return {
fullName: `${user.firstName} ${user.lastName}`,
age: new Date().getFullYear() - user.birthYear
};
}
```
4. **Generic Functions:**
```typescript
// Generic array filter
function filterArray<T>(array: T[], predicate: (item: T) => boolean): T[] {
return array.filter(predicate);
}
// Generic async function
async function fetchData<T>(url: string, options?: RequestInit): Promise<ApiResponse<T>> {
try {
const response = await fetch(url, options);
const data = (await response.json()) as T;
return { data, error: null };
} catch (error) {
return { data: null, error: (error as Error).message };
}
}
// Constrained generics
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
```
5. **Type Guards:**
```typescript
// Type predicate
function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'id' in value &&
'name' in value &&
'email' in value
);
}
// Discriminated union
type Shape =
| { kind: 'circle'; radius: number }
| { kind: 'rectangle'; width: number; height: number };
function getArea(shape: Shape): number {
switch (shape.kind) {
case 'circle':
return Math.PI * shape.radius ** 2;
case 'rectangle':
return shape.width * shape.height;
}
}
// Assertion function
function assertIsString(value: unknown): asserts value is string {
if (typeof value !== 'string') {
throw new Error('Value must be a string');
}
}
```
6. **Async/Promise Types:**
```typescript
// Promise return type
async function loadUser(id: number): Promise<User> {
const response = await fetch(`/api/users/${id}`);
return response.json();
}
// Promise.all with proper types
async function loadMultiple(): Promise<[User[], Post[]]> {
const [users, posts] = await Promise.all([
fetch('/api/users').then((r) => r.json()),
fetch('/api/posts').then((r) => r.json())
]);
return [users, posts];
}
```
7. **Class Type Safety:**
```typescript
class UserService {
private users: Map<number, User> = new Map();
constructor(private readonly apiUrl: string) {}
async getUser(id: number): Promise<User | null> {
if (this.users.has(id)) {
return this.users.get(id)!;
}
const response = await fetch(`${this.apiUrl}/users/${id}`);
if (!response.ok) return null;
const user = (await response.json()) as User;
this.users.set(id, user);
return user;
}
addUser(user: User): void {
this.users.set(user.id, user);
}
}
```
8. **Event Handler Types:**
```typescript
// React event handlers
function handleClick(event: React.MouseEvent<HTMLButtonElement>): void {
event.preventDefault();
console.log(event.currentTarget.value);
}
function handleChange(event: React.ChangeEvent<HTMLInputElement>): void {
const value = event.target.value;
// Type-safe value access
}
// DOM event handlers
function handleDOMClick(event: MouseEvent): void {
const target = event.target as HTMLElement;
console.log(target.dataset.id);
}
```
9. **Advanced Type Patterns:**
```typescript
// Conditional types
type Unwrap<T> = T extends Promise<infer U> ? U : T;
type Result = Unwrap<Promise<string>>; // string
// Mapped types
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
type Optional<T> = {
[P in keyof T]?: T[P];
};
// Template literal types
type EventName = 'click' | 'focus' | 'blur';
type EventHandler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'
// Recursive types
type JSONValue = string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue };
```
10. **Utility Type Usage:**
```typescript
// Partial - make all properties optional
type PartialUser = Partial<User>;
// Required - make all properties required
type RequiredUser = Required<PartialUser>;
// Pick - select specific properties
type UserPreview = Pick<User, 'id' | 'name'>;
// Omit - exclude specific properties
type UserWithoutEmail = Omit<User, 'email'>;
// Record - create object type
type UserMap = Record<number, User>;
// ReturnType - extract function return type
type UserResult = ReturnType<typeof processUser>;
// Parameters - extract function parameters
type UserParams = Parameters<typeof processUser>;
```
11. **Null Safety:**
```typescript
// Optional chaining
const userName = user?.profile?.name ?? 'Anonymous';
// Nullish coalescing
const port = config.port ?? 3000;
// Non-null assertion (use sparingly)
const element = document.getElementById('app')!;
// Type narrowing
function processValue(value: string | null): string {
if (value === null) {
return 'default';
}
return value.toUpperCase();
}
```
12. **Complete Converted Code:**
Provide the fully typed TypeScript version with:
- All type definitions
- Proper generics
- Type guards where needed
- No implicit any types
- Strict null checks
- Comprehensive JSDoc comments
13. **Type Testing:**
```typescript
// Type assertions for testing
type AssertEqual<T, U> = T extends U ? (U extends T ? true : false) : false;
// Test types compile correctly
const test1: AssertEqual<User, { id: number; name: string; email: string; role: string }> =
true;
```
Provide the complete TypeScript conversion with all type definitions, proper generics, type guards, and comprehensive type safety. Include comments explaining complex type patterns and rationale for type choices.
Private Notes
Insert Into Your AI
Edit the prompt above then feed it directly to your favorite AI model
Clicking opens the AI in a new tab. Content is also copied to clipboard for backup.
Related Prompts
Grok 3
Svelte Store Pattern Designer
Design reactive Svelte stores with proper TypeScript types, derived stores, custom stores, and subscription management.
#Svelte#State-management
View
GPT-4o
Svelte Component Builder
Create optimized Svelte components with reactive stores, TypeScript support, and built-in animations following Svelte best practices.
#Svelte#Typescript
View
Claude Sonnet 4.5
React State Management Architect
Design scalable state management solutions for React apps using Context, Zustand, or Redux with proper TypeScript types and performance optimization.
#React#State-management
View