Skip to content

Commit 011fdfa

Browse files
alan-agius4kara
alan-agius4
authored and
kara
committed
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
1 parent 6466fb2 commit 011fdfa

1 file changed

Lines changed: 7 additions & 5 deletions

File tree

‎aio/src/app/layout/doc-viewer/doc-viewer.component.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -189,14 +189,16 @@ export class DocViewerComponent implements OnDestroy {
189189
const seconds = Number(cssValue.replace(/s$/, ''));
190190
return 1000 * seconds;
191191
};
192+
193+
// Some properties are not assignable and thus cannot be animated.
194+
// Example methods, readonly and CSS properties:
195+
// "length", "parentRule", "getPropertyPriority", "getPropertyValue", "item", "removeProperty", "setProperty"
196+
type StringValueCSSStyleDeclaration
197+
= Exclude<{ [K in keyof CSSStyleDeclaration]: CSSStyleDeclaration[K] extends string ? K : never }[keyof CSSStyleDeclaration], number>;
192198
const animateProp =
193-
(elem: HTMLElement, prop: keyof CSSStyleDeclaration, from: string, to: string, duration = 200) => {
199+
(elem: HTMLElement, prop: StringValueCSSStyleDeclaration, from: string, to: string, duration = 200) => {
194200
const animationsDisabled = !DocViewerComponent.animationsEnabled
195201
|| this.hostElement.classList.contains(NO_ANIMATIONS);
196-
if (prop === 'length' || prop === 'parentRule') {
197-
// We cannot animate length or parentRule properties because they are readonly
198-
return this.void$;
199-
}
200202
elem.style.transition = '';
201203
return animationsDisabled
202204
? this.void$.pipe(tap(() => elem.style[prop] = to))

0 commit comments

Comments
 (0)