Extending Window: types vs interfaces

I wanted to add a property to the Window object and use it in my React app, but TypeScript kept complaining it wasn't defined—even though I had it in global.d.ts.

Because of the @typescript-eslint/consistent-type-definitions rule, I was using:

type Window = {
  dataLayer: Record<string, unknown>;
}

Turns out, type doesn't support augmentation. It’s only useful when you want to explicitly declare all properties. But interface does support augmentation, which is exactly what we need here:

interface Window {
  dataLayer: Record<string, unknown>;
}

In general, I prefer type for app code since it avoids hidden extensions. But if you're extending built-in or third-party types, interface is the way to go.

For documentations, you can check our declaration merging on TS lang website.

Continue Reading