# TypeScript

Add easeful/types to your tsconfig so data-motion is checked against the preset vocabulary instead of accepting any string.

The types are the reason a wrong preset name is cheap. Without them `data-motion` is just a
string attribute and a typo ships silently. With them it is a union of
4 values and `tsc` rejects anything else.

## Activate

```json
{
  "compilerOptions": {
    "types": ["easeful/types"]
  }
}
```

## What you get

The preset union, plus space-separated composition typed as a pair so `"fade slide-up"` checks
and `"fade nonsense"` does not. Both attributes come from the manifest's own attribute list,
which the [reference](/docs/reference) prints in full.

```ts
type MotionPreset = "fade" | "scale-fade" | "slide-up" | "collapse";

type MotionValue = MotionPreset | `${MotionPreset} ${MotionPreset}`;
```

## Why this matters more for agents than for you

You would notice a dialog that did not animate. A coding agent often would not, and will
confidently invent a preset name that sounds right. A typecheck failure on a hallucinated name is
the tightest correction loop available, which is why the types are generated from the same
manifest as the CSS rather than written by hand beside it.