TypeScript

Enforce TypeScript best practices for dependency injection and DOM element management.

Updated Dec 29, 2025
One-click install
npx skills add https://github.com/yumayo/MasterDataEditor --skill typescript-yumayo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: TypeScript
Source: https://github.com/yumayo/MasterDataEditor/tree/main/.claude/skills/typescript
Command: npx skills add https://github.com/yumayo/MasterDataEditor --skill typescript-yumayo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides guidance and best practices for writing clean, maintainable, and testable TypeScript code, particularly within a web development context.

Core Features & Use Cases

  • Dependency Injection: Learn how to explicitly pass dependencies through constructors for better testability and clarity.
  • DOM Element Ownership: Understand how to manage the lifecycle and parentage of DOM elements to prevent conflicts.
  • Early Return Pitfalls: Avoid silent failures by understanding the implications of early returns when elements are not found.
  • Safe DOM Manipulation: Strategies for interacting with the DOM to prevent index-based errors and ensure robustness.
  • Use Case: When refactoring a complex JavaScript application to TypeScript, use this Skill to ensure new modules adhere to best practices for dependency management and DOM interaction.

Quick Start

Follow the guidelines in this skill to refactor the constructor of your Selection class to accept editorElement as a parameter.

Frequently Asked Questions about TypeScript

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

FAQPage Schema
How do I use dependency injection in TypeScript to improve testability?

Dependency injection in TypeScript involves explicitly passing dependencies through constructors rather than creating them implicitly. This practice makes your classes more modular, testable, and clarifies their exact requirements.

What is the best way to manage DOM element ownership in TypeScript web development?

Managing DOM element ownership requires explicitly tracking the lifecycle and parentage of elements. This prevents conflicts and silent failures caused by early returns when an expected element is missing.

Why does my TypeScript code fail silently with early returns during DOM manipulation?

Early returns in DOM manipulation cause silent failures when elements are not found. You should avoid early returns and implement safe interaction strategies to prevent index-based errors.

How do I refactor a JavaScript application to TypeScript following best practices?

Refactoring JavaScript to TypeScript requires enforcing clean code practices, focusing on dependency injection and explicit DOM element management. This ensures new modules are robust, testable, and maintainable.

Does TypeScript dependency injection require passing editor elements as constructor parameters?

Yes, passing elements like editorElement as constructor parameters is a recommended TypeScript practice. This explicitly defines dependencies, avoiding implicit global lookups and resolving ownership conflicts.