Custom TypeScript type definitions file is ignored

Question

I'm working on an Angular 9 project. I'd like to use a ResizeObserver, but since this type is currently missing from TypeScript's lib.dom.d.ts (issue), I tried to add Jason Strothmann's ResizeObserver.d.ts file to my project.

I followed the advice given by this page:

1. I created a types directory under src.
2. I copied ResizeObserver.d.ts into src/types.
3. I added "./src/types" to the "typeRoots" array in tsconfig.json (it's in the app folder, just like src).
4. I declared an object of type ResizeObserver in src/components/foo/foo.component.ts, but TypeScript did not recognize the type, not even after stopping and restarting ng serve, or restarting VS Code.

My tsconfig.json looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./out-tsc",
    "sourceMap": true,
    "declaration": false,
    "importHelpers": true,
    "experimentalDecorators": true,
    "moduleResolution": "Node",
    "module": "ES2015",
    "target": "ES2015",
    "typeRoots": ["./src/types", "./node_modules/@types"],
    "lib": ["ES2015", "DOM", "DOM.Iterable"]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
  "files": ["./src/main.ts"]
}

All other (JavaScript, DOM- or Angular-related) types are recognized by TypeScript, only the types defined in ResizeObserver.d.ts are ignored. What am I doing wrong?

Answer 1

I've found the problem. I had to add this line to tsconfig.json:

"include": ["./src/types/*.d.ts"]