ReddRadar
Agent skill
typescript-basics
TypeScript patterns for React including interfaces, type annotations, generics, null handling, and utility types. Use when writing type-safe React code.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/typescript-basics
SKILL.md
TypeScript Basics
Overview
These TypeScript patterns ensure type-safe, maintainable React code. Follow these guidelines for all frontend development.
Interface Definitions
Data Model Interfaces
interface Task {
id: string;
title: string;
description: string | null;
isCompleted: boolean;
createdAt: string;
}
type TaskStatus = 'pending' | 'completed' | 'archived';
Request/Response Types
interface CreateTaskRequest {
title: string;
description?: string;
}
interface PagedResponse<T> {
items: T[];
page: number;
totalCount: number;
}
Type Annotations
Function Parameters
function handleClick(id: string): void {
console.log(id);
}
async function fetchTasks(): Promise<Task[]> {
const response = await fetch('/api/tasks');
return response.json();
}
State Types
const [tasks, setTasks] = useState<Task[]>([]);
const [error, setError] = useState<string | null>(null);
Event Handlers
function handleSubmit(e: React.FormEvent<HTMLFormElement>): void {
e.preventDefault();
}
function handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
setValue(e.target.value);
}
Null and Undefined
Nullable Types
interface Task {
description: string | null; // Explicitly null
}
interface UpdateRequest {
title?: string; // Optional (undefined)
}
Null Checks
const title = task?.title ?? 'Untitled';
Utility Types
type TaskUpdate = Partial<Task>; // All optional
type TaskSummary = Pick<Task, 'id' | 'title'>; // Select props
type CreateTask = Omit<Task, 'id' | 'createdAt'>; // Exclude props
Best Practices
Avoid any
// Bad
function processData(data: any) { ... }
// Good
function processData(data: Task[]) { ... }
Export Types
export interface Task { ... }
import type { Task } from '../types/task';
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?