Currently, I am working on developing an app using Angular 8 and TypeScript 3.4.5.
During local development with the Angular server running via ng server, I encountered compilation errors:
ERROR in src/app/providers.ts:152:36 - error TS2339: Property 'API' does not exist on type 'Window'.
152 { provide: API, useValue: window.API },
~~~
src/environments/environment.static.ts:18:8 - error TS2339: Property 'FooServices' does not exist on type 'Window'.
18 parent.FooServices.Component = (): { subscribe: () => void } => {
~~~~~~~~~~~~~~
src/zone-flags.ts:1:8 - error TS2339: Property '__Zone_disable_requestAnimationFrame' does not exist on type 'Window'.
1 window.__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
Upon investigation, I realized that creating custom global types extension for the standard browser's Window object could resolve these issues.
Hence, I defined custom global types as follows:
declare global {
interface Date {
format(value: string): string;
}
interface Window {
__Zone_disable_on_property: any;
__Zone_disable_requestAnimationFrame: any;
__Zone_disable_XHR: any;
...
}
}
export {};
Below is my tsconfig.json file configuration:
{
"compileOnSave": false,
...
}
Theoretically, this configuration should work as intended, given that the custom types from
user_interface/projects/shared/src/lib/types/global.d.tsHowever, despite this setup, IntelliJ IDEA Ultimate continues to highlight type errors in files referencing objects like parent.FooServices or window.FooConfig.
Referencing a post on declaring global types in TypeScript, it seems like there might be a missing piece causing these persistent issues.
It appears that encountering challenges with custom typings is not uncommon based on observations from discussions on Stack Overflow.