# Typescript Style

> TypeScript coding style enforcement (ESLint, type safety, React patterns). Auto-loads when writing or reviewing TypeScript/JavaScript code. Use when this capability is needed.

- Skill: `tomevault-io/typescript-style` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/typescript-style`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/typescript-style/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/typescript-style

---


# TypeScript/JavaScript Style Best Practices Skill

This skill enforces TypeScript strict mode, ESLint standards, and modern patterns for frontend development.

## Core Standards

- **Strict TypeScript**: All strict flags enabled
- **ESLint**: Type-checked rules enabled
- **No `any`**: Use `unknown` or proper types
- **Explicit returns**: All functions typed

## Naming Conventions

```typescript
// Types/Interfaces: PascalCase
interface UserProfile { }

// Functions/variables: camelCase
function calculateTotal() { }
const userName = "john";

// Booleans: is/has/can/should prefix
const isLoading = true;
const hasPermission = false;
```

## Type Definitions

```typescript
// Prefer union types over enums
type Status = "pending" | "active" | "completed";

// Use as const for constant objects
const HttpStatus = {
  Ok: 200,
  NotFound: 404,
} as const;

// Discriminated unions
type Result<T> =
  | { success: true; data: T }
  | { success: false; error: Error };
```

## React Patterns

```typescript
// Typed props
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

// Typed hooks
const [isOpen, setIsOpen] = useState(false);

// Typed event handlers
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {};
```

## Function Length Guidelines

- **< 30 lines**: Ideal
- **30-50 lines**: Review for refactoring
- **> 50 lines**: Must be broken down

## Anti-Patterns to Avoid

- Using `any` type
- Missing return types
- Using `==` instead of `===`
- Unhandled promises
- Magic numbers/strings
- Vague variable/function names

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/jpoutrin) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->