From 011fdfa94f41e658b96912386f06eb9ef132d642 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Fri, 15 May 2020 10:35:45 +0200 Subject: [PATCH] build: improve types of `animateProp` (#37129) Some properties in the DOM lib interface `CSSStyleDeclaration` are not assignable such as `getPropertyPriority` and `getPropertyValue`. With this change we filter out properties which type is not `string` to fix the below error; ```ts ERROR in src/app/layout/doc-viewer/doc-viewer.component.ts:202:43 - error TS2322: Type 'string' is not assignable to type 'string & ((property: string) => string) & ((property: string) => string) & ((index: number) => string) & ((property: string) => string) & ((property: string, value: string | null, priority?: string | undefined) => void)'. Type 'string' is not assignable to type '(property: string) => string'. 202 ? this.void$.pipe(tap(() => elem.style[prop] = to)) ~~~~~~~~~~~~~~~~ ``` PR Close #37129 --- .../app/layout/doc-viewer/doc-viewer.component.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts index 1f7395b110..2661dfc533 100644 --- a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts +++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts @@ -189,14 +189,16 @@ export class DocViewerComponent implements OnDestroy { const seconds = Number(cssValue.replace(/s$/, '')); return 1000 * seconds; }; + + // Some properties are not assignable and thus cannot be animated. + // Example methods, readonly and CSS properties: + // "length", "parentRule", "getPropertyPriority", "getPropertyValue", "item", "removeProperty", "setProperty" + type StringValueCSSStyleDeclaration + = Exclude<{ [K in keyof CSSStyleDeclaration]: CSSStyleDeclaration[K] extends string ? K : never }[keyof CSSStyleDeclaration], number>; const animateProp = - (elem: HTMLElement, prop: keyof CSSStyleDeclaration, from: string, to: string, duration = 200) => { + (elem: HTMLElement, prop: StringValueCSSStyleDeclaration, from: string, to: string, duration = 200) => { const animationsDisabled = !DocViewerComponent.animationsEnabled || this.hostElement.classList.contains(NO_ANIMATIONS); - if (prop === 'length' || prop === 'parentRule') { - // We cannot animate length or parentRule properties because they are readonly - return this.void$; - } elem.style.transition = ''; return animationsDisabled ? this.void$.pipe(tap(() => elem.style[prop] = to))