启用noImplicitAny时Vue样式绑定的TypeScript类型问题及解决

I ran into a tricky type issue when trying to create a type that supports both standard CSS properties (with proper type hints from CSSStyleDeclaration) and custom CSS variables for Vue's v-bind:style binding. Let me walk through what I tried, the problem I hit, and the fix that worked.

My Initial Approach (Using Union Type) #

I wanted a type that let me use both standard CSS properties (like backgroundColor) and custom properties (like --my-custom-css-property), so I started with a union type:

type Dictionary<T> = { [key: string]: T };
type Nullable<T> = T | null;
type CssStyleObject = Partial<CSSStyleDeclaration> | Dictionary<Nullable<string>>;

Then I used it in my Vue component like this:

<!-- Template -->
<div v-bind:style="myStyle"></div>

// Component code
@Component
export default class MyComponent extends Vue {
  public get myStyle(): CssStyleObject {
    const style: CssStyleObject = { };
    style.backgroundColor = 'red';
    style['--my-custom-css-property'] = '16px';
  }
}

The Problem: noImplicitAny Type Error #

As soon as I enabled the project's required noImplicitAny flag, I got this error:

Element implicitly has an 'any' type because type 'CssStyleObject' has no index signature

I noticed that if I initialized the style object with the custom property right away, the error went away—because TypeScript inferred it as just the Dictionary type instead of the union. But that wasn't a sustainable solution.

The Fix: Switch to Intersection Type #

Turns out I mixed up TypeScript's union (|) and intersection (&) types! A union type means the value is either one type or the other, so TypeScript can't safely assume both index access and known property access are allowed.

An intersection type combines both types, letting us use both standard CSS properties and custom variables. Here's the corrected type definition:

type Dictionary<T> = { [key: string]: T };
type Nullable<T> = T | null;
// Use & for intersection type instead of |
type CssStyleObject = Partial<CSSStyleDeclaration> & Dictionary<Nullable<string>>;

This fixes the type error completely—now I get proper autocompletion for standard CSS properties and can safely add custom CSS variables without triggering noImplicitAny issues.

内容的提问来源于stack exchange，提问作者Terry