Typescript, CSSStyleDeclaration and StyleValue

[FragsterAt]

It takes too many words to describe the problem, but I have poor english.

The playground shows the problem: https://play.vuejs.org/#eNqlVE1v2zAM/SuELnGAzMGynQInwNb2sB3WYil2qXpQbSZVKkuGJGcJDP/3UXLjuEPRD/Rki3x8fBRJNexbVaW7GtmcZS63svLg0NcVKKE3C86842zJtSwrYz00YHE9gdyUVe2xmMDKHxT+EapGaGFtTQkjIhtxzbU/VAiXd9tr+n6GBTRcA2hR4pyirNSbSTC4QDCHK2G9FCo7W60i5TnmSljhpdGUvf2fb/Ya30lXjM6Ndh7WUnm0T0NHpLUHFMKLIJWKzI7Kb26Xyc3teAgJ2QeQWQ/hOjKku5A4rWp3nwxTmbvtaCiyyY0ylhwbi6hHJKPtSWbvJrFYnCiGBWNxHlQt+rYlyRgWy67axzQdMpHBLtOQKpU6V3WBLul80Tge9xcx5J49y30s4T3cXGfTbgyp7XTwWFZKeKRTB51DJjVlgt2n0hSoaEQHHDSr2TT6u/BC7gi4NpZgkrgmIEHqp/fCGcwf8BAQ4Tde6yM8jQcibRqI55AD2jabEvGbM8w+lCHcyOAW2IRWkjqwlpt064ymvY3TwVnogFRoL6uwNbS2NBvBE3xCKfP3Z7R5W2Ocnxhzj/nDM/at2wcbZ1cWHdodKex9XtgN+s59sfqFe/rvndSTOtTzgvM3OqPqoLGDfa91QbIHuKj2R3xxaK2v3cXeo3bHooLQgGwjnjN6b85eKP0k90v6NcbRjrD2H5xdsuQ=

filteredData2 has error Type instantiation is excessively deep and possibly
filteredData1 has error in template Argument of type '{ style: { [x: number]: string; accentColor?: string; alignContent?: string; alignItems?: string; alignSelf?: string; alignmentBaseline?: string; all?: string; animation?: string; animationComposition?: string; ... 506 more ...; [Symbol.iterator]?: () => ArrayIterator<string>; }; key: number; }' is not assignable to parameter of type 'HTMLAttributes & ReservedProps & Record<string, unknown>'.

Also data2 items haven't intellisense, but it isnt the main problem.

How can I use style values without having typescript errors?

[trtajim]

CSSStyleDeclaration is probably the wrong type here.

It represents the DOM API (element.style / getComputedStyle()), so it contains hundreds of CSS properties, methods like setProperty(), numeric indexes, iterators, etc. It's much more complex than the object Vue expects for :style.

Because of that, when TypeScript tries to infer the types through operations like filter(), map(), or object spreads, it can hit the compiler's complexity limit, resulting in:

Type instantiation is excessively deep and possibly infinite.

For Vue components, it's usually better to use CSSProperties (for object styles) or StyleValue (if you also want to support arrays/strings):

import type { CSSProperties, StyleValue } from "vue";

interface Item {
  style: CSSProperties;
// or
// style: StyleValue;
}

CSSProperties is generally the better choice if you're storing inline style objects, since it provides proper IntelliSense and matches what Vue expects for :style.

So the root cause isn't filter() itself—it's using CSSStyleDeclaration to model a Vue style object. Switching to CSSProperties or StyleValue should eliminate both the deep type instantiation error and the template type mismatch.