When should I use typescript-basics?

typescript-basics is useful in the following scenarios: • Defining robust data models and API response types to prevent runtime errors in React applications. • Implementing type-safe React hooks (useState) and event handlers to improve IDE intellisense and developer productivity. • Utilizing TypeScript utility types like Partial, Pick, and Omit to create flexible and reusable component props and data structures. • Enforcing frontend coding standards and best practices by replacing 'any' with explicit type annotations and null-handling patterns.

When & Why to Use This Skill

This Claude skill provides a comprehensive set of TypeScript patterns specifically tailored for React development. It enables developers to implement type-safe code using interfaces, generics, and utility types, ensuring maintainable and error-free frontend applications by standardizing data models, state management, and event handling.

Use Cases

Defining robust data models and API response types to prevent runtime errors in React applications.
Implementing type-safe React hooks (useState) and event handlers to improve IDE intellisense and developer productivity.
Utilizing TypeScript utility types like Partial, Pick, and Omit to create flexible and reusable component props and data structures.
Enforcing frontend coding standards and best practices by replacing 'any' with explicit type annotations and null-handling patterns.

name	typescript-basics
description	TypeScript patterns for React including interfaces, type annotations, generics, null handling, and utility types. Use when writing type-safe React code.

name

typescript-basics

description

TypeScript patterns for React including interfaces, type annotations, generics, null handling, and utility types. Use when writing type-safe React code.

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';