Type Safety (React/JavaScript)

Name: type-safety
Rating: 92
Author: imankha

Avoid magic strings. Use constant objects with as const for type safety and autocomplete.

When to Apply

•Defining modes (crop, pan, zoom)
•Defining status values (pending, complete, error)
•Defining types (video, image, audio)
•Any string compared with ===

The Pattern

code

BEST:    Constant objects with `as const`
BAD:     Magic strings

Examples

Bad: Magic Strings

javascript

// BAD: Typos cause silent bugs, no autocomplete
if (editorMode === 'frmaing') {  // Typo! Silent bug
  showFramingUI();
}

if (status === 'complte') {  // Typo! Never matches
  showSuccess();
}

Good: Constant Objects

javascript

// constants/editorModes.js
export const EDITOR_MODES = {
  ANNOTATE: 'annotate',
  FRAMING: 'framing',
  OVERLAY: 'overlay',
  PROJECT_MANAGER: 'project-manager',
} as const;

// Usage - typos caught, autocomplete works
if (editorMode === EDITOR_MODES.FRAMING) {
  showFramingUI();
}

Good: Status Constants

javascript

// constants/status.js
export const SEGMENT_STATUS = {
  DONE: 'done',
  EXPORTING: 'exporting',
  IN_PROGRESS: 'in_progress',
  READY: 'ready',
  EXTRACTING: 'extracting',
  PENDING_EXTRACTION: 'pending_extraction',
} as const;

// Usage
if (segment.status === SEGMENT_STATUS.DONE) {
  showComplete();
}

Good: Keyframe Origins

javascript

// constants/keyframes.js
export const KEYFRAME_ORIGINS = {
  PERMANENT: 'permanent',
  USER: 'user',
  TRIM: 'trim',
} as const;

// Usage
if (keyframe.origin === KEYFRAME_ORIGINS.PERMANENT) {
  // Can't delete permanent keyframes
}

File Organization

code

src/frontend/src/
└── constants/
    ├── index.js           # Re-exports all constants
    ├── editorModes.js
    ├── status.js
    ├── keyframes.js
    └── sourceTypes.js

TypeScript Types (if using TS)

typescript

export const EDITOR_MODES = {
  ANNOTATE: 'annotate',
  FRAMING: 'framing',
  OVERLAY: 'overlay',
} as const;

// Derive type from constant
type EditorMode = typeof EDITOR_MODES[keyof typeof EDITOR_MODES];
// Result: 'annotate' | 'framing' | 'overlay'

Migration Checklist

When refactoring magic strings:

• Create constant file in src/constants/
• Define all values as as const object
• Find all usages: grep -rn "=== 'value'" src/
• Replace with constant reference
• Import constant where needed
• Verify no string literals remain

Complete Rules

See individual rule files in rules/ directory.