Web Animation API `Keyframe` requires all `CSSStyleDeclaration` Keys

There appears to be some unexpected behaviour with the way in which animation Keyframes 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; }'.

Playground Link: https://www.typescriptlang.org/play/#src=type Rec<K extends keyof any%2C T> %3D { [P in K]%3A T%3B }%3B interface Declarations { x%3A string | null%3B y%3A string | null%3B z%3A string | null%3B } interface X extends Rec<keyof Declarations%2C string> {} const test%3A X %3D { x%3A ‘string’ }%3B

Related Issues: Couldn’t find any.

[birtles]

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!

[jonchardy]

Would love to see the above PR merged, we’re currently unable to update to TS3.