skills.rest
djankies
djankiesCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

avoiding-angle-bracket-assertions

Convert angle-bracket type assertions to 'as Type' syntax in TypeScript and TSX files.

Updated Nov 21, 2025
Search Tags:#typescript#tsx#angle-bracket#as#type-assertion
One-click install
npx skills add https://github.com/djankies/claude-configs --skill avoiding-angle-bracket-assertions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: avoiding-angle-bracket-assertions
Source: https://github.com/djankies/claude-configs/tree/main/typescript/skills/avoiding-angle-bracket-assertions
Command: npx skills add https://github.com/djankies/claude-configs --skill avoiding-angle-bracket-assertions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Angle-bracket type assertions (<Type>) conflict with TSX and are deprecated in favor of the "as" syntax. This Skill guides migration to safer, JSX-friendly syntax.

Core Features & Use Cases

  • Replace <Type>value with value as Type.
  • Use type guards and validation to avoid unsafe assertions.
  • Consider TSX compatibility and readability improvements.

Quick Start

Replace angle-bracket assertions with 'as' syntax in TS/TSX code and validate with tests.

Frequently Asked Questions about avoiding-angle-bracket-assertions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why should I replace angle-bracket type assertions with 'as' syntax in TypeScript?▼

Angle-bracket assertions (<Type>) conflict with TSX syntax and are deprecated. The 'as' syntax (value as Type) is JSX-compatible, more readable, and aligns with modern TypeScript standards and ESLint best practices for consistent type assertions.

How do I convert angle-bracket assertions to 'as' syntax in my TypeScript code?▼

Replace <Type>value with value as Type throughout your TS and TSX files. Apply this conversion to plain TypeScript, React/Preact components, DOM element casts, and complex types, then validate changes with tests to ensure type safety.

Can I use angle-bracket assertions in TSX files with React or Preact?▼

No. Angle-bracket syntax conflicts with JSX in TSX files. Use the 'as' syntax instead for all type assertions in React and Preact components to maintain valid JSX syntax and avoid compilation errors.

What alternatives exist to unsafe type assertions in TypeScript?▼

Beyond 'as' syntax, use type guards to narrow types safely, validation libraries to check runtime values, and runtime validation alternatives. These approaches prevent unsafe assertions while maintaining type correctness without losing safety guarantees.

How do I configure ESLint to enforce 'as' syntax over angle-bracket assertions?▼

'consistent-type-assertions' ESLint rule enforces consistent type assertion syntax. Configure it to require 'as' syntax across your codebase, ensuring all developers follow the same pattern and preventing angle-bracket usage in new code.

Related Skills

Explore More Software Engineering Skills→
harnessharness
80

migrate-pipeline

Migrate Harness pipelines from v0 to v1 via MCP tooling.

Official
Advanced
mahmoud20138mahmoud20138
10

run-pre-commit-checks

Run ESLint, TypeScript checks, and Mocha unit tests before commits.

Community
Intermediate
jsamuelsen11jsamuelsen11

ts-conventions

Enforce strict TypeScript conventions across TypeScript projects.

Community
Advanced
flext-shflext-sh

python-type-narrowing

Guide Python type narrowing with isinstance, TypeIs, TypeGuard, and assert_type.

Official
Intermediate