Vueのスタイルバインディングの型警告を無くす

備忘録としてメモ📝

Vue.jsではスタイルの動的バインディングを行うことが出来るが、TypeScriptを使用している場合は公式ドキュメントで案内されている方法を用いると型警告が出る。

// オブジェクト リテラルは既知のプロパティのみ指定できます。'active' は型 'CSSProperties | StyleValue[]' に存在しません。ts(2353)
<MyComponent :class="{ active: isActive }" />

このようなケースについて、与えてやる要素をStyleValueとして型を明示すると良い

<MyComponent :class="{ active: isActive } as StyleValue" />