Menu
Type declaration files (types.d.ts) for HTML/Vue/React type support. Invoke when creating or updating component type declarations.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
| name | type-declaration |
| description | Type declaration files (types.d.ts) for HTML/Vue/React type support. Invoke when creating or updating component type declarations. |
为组件创建类型声明，支持 HTML/Vue/React 的类型检查。
ea-component/
├── index.ts
├── index.scss
└── types.d.ts # 类型声明文件
// types.d.ts
// ==================== HTML 全局类型 ====================
declare global {
interface HTMLElementTagNameMap {
"ea-component": EaComponentElement;
}
}
export interface EaComponentElement extends HTMLElement {
label: string;
disabled: boolean;
size: "small" | "medium" | "large";
variant: "primary" | "success" | "warning" | "danger" | "info";
}
// ==================== Vue 类型 ====================
import type { DefineComponent } from "vue";
declare module "vue" {
interface GlobalComponents {
"ea-component": DefineComponent<{
label?: string;
disabled?: boolean;
size?: "small" | "medium" | "large";
variant?: "primary" | "success" | "warning" | "danger" | "info";
}>;
}
}
// ==================== React 类型 ====================
import type { HTMLAttributes } from "react";
declare module "react" {
namespace JSX {
interface IntrinsicElements {
"ea-component": HTMLAttributes<HTMLElement> & {
label?: string;
disabled?: boolean;
size?: "small" | "medium" | "large";
variant?: "primary" | "success" | "warning" | "danger" | "info";
};
}
}
}
从 @attribute 装饰器定义中提取所有属性，包括：
必须注册组件标签名到 HTMLElementTagNameMap，以支持：
const el = document.createElement("ea-component");
el.label = "Hello"; // 类型安全
注册到 Vue 的 GlobalComponents 接口，以支持模板中的类型提示。
注册到 React 的 JSX.IntrinsicElements 接口，以支持 JSX 中的类型检查。
Boolean 属性在 HTML 中通过属性存在性判断，在类型声明中仍声明为 boolean：
export interface EaAlertElement extends HTMLElement {
closable: boolean; // HTML: closable 属性存在即为 true
showIcon: boolean; // HTML: show-icon
center: boolean; // HTML: center
}
如果组件有自定义事件类，也应在类型声明中导出：
export class EaComponentChangeEvent extends Event {
readonly detail: { value: string; label: string };
}
@attribute decorator for defining HTML attribute-mapped properties. Invoke when creating or updating component attributes that map to HTML attributes.
@property decorator for defining pure JavaScript properties that do NOT map to HTML attributes. Invoke when creating internal component state properties.
BEM SCSS mixins for component styling. Invoke when writing or updating component SCSS styles using block/element/modifier/state mixins.
Component CSS styling standards including variables, host styles, states, and responsive patterns. Invoke when creating or updating component SCSS files.
@CustomElement decorator for registering Web Components. Invoke when creating new components or modifying component registration options.
Component documentation generation. Invoke when writing or updating component documentation including API tables, examples, and usage guides.