Web Animation API `Keyframe` requires all `CSSStyleDeclaration` Keys
See original GitHub issueThere appears to be some unexpected behaviour with the way in which animation Keyframe
s are now declared in the latest version in lib.dom.d.ts
:
interface Keyframe extends Record<keyof CSSStyleDeclaration, string> {
composite?: CompositeOperation | null;
easing?: string;
offset?: number | null;
}
Record<keyof CSSStyleDeclaration, string>
is causing TypeScript to expect every possible key in CSSStyleDeclaration
to be declared when writing animation keyframes:
el.animate([
{ transform: 'translateX(100px)' },
{ transform: 'translateX(0)' }
]);
Argument of type '{ transform: string; }[]' is not assignable to parameter of type 'Keyframe[] | PropertyIndexedKeyframes'.
Type '{ transform: string; }[]' is not assignable to type 'Keyframe[]'.
Type '{ transform: string; }' is not assignable to type 'Keyframe'.
Property 'left' is missing in type '{ transform: string; }'.
This appears to be fixed if I change [P in K]
in type Record
to be optional:
type Record<K extends keyof any, T> = {
[P in K]?: T;
};
See reduced test case and playground link below.
TypeScript Version: 3.1.0-dev.20180728
Search Terms: keyof optional, keyof, Record, CSSStyleDeclaration, animation
Code
type Rec<K extends keyof any, T> = {
[P in K]: T;
};
interface Declarations {
x: string | null;
y: string | null;
z: string | null;
}
interface X extends Rec<keyof Declarations, string> {}
const test: X = { x: 'string' };
Expected behavior:
Should not require declaration of y
and z
properties.
Actual behavior:
Type '{ x: string; }' is not assignable to type 'X'.
Property 'y' is missing in type '{ x: string; }'.
Related Issues: Couldn’t find any.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:9
- Comments:13 (1 by maintainers)
Top Results From Across the Web
Keyframe Formats - Web APIs | MDN
An array of objects (keyframes) consisting of properties and values to iterate over. This is the canonical format returned by the getKeyframes() ...
Read more >it seems you are interpolating a keyframe declaration
Not able to style nested animations with keyframes with styled-components ... Animation API `Keyframe` requires all `CSSStyleDeclaration` Keys#26073.
Read more >Web Animations - W3C
The programming interface in this specification allows such applications to wait for all currently running animation to complete, regardless of ...
Read more >How to describe an object with alternative structures / entries ...
We'll intersect all the possible keys, with our own easing and transform values ... type KeyFrame = Partial<CSSStyleDeclaration> & { easing: ...
Read more >Safari Technology Preview Release Notes - Apple Developer
Changed animation-* declarations in @keyframes to be a parse error ... for the Web Lock API (r286284); Fixed Cross-Origin-Embedder-Policy: require-corp to ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks to @DanielRosenwasser https://github.com/Microsoft/TSJS-lib-generator/pull/567 has now been merged! I suppose that means this will be fixed in the next release of TS. Thanks Daniel!
Would love to see the above PR merged, we’re currently unable to update to TS3.