{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/26073","repository_url":"https://api.github.com/repos/Microsoft/TypeScript","labels_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/26073/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/26073/comments","events_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/26073/events","html_url":"https://github.com/Microsoft/TypeScript/issues/26073","id":345991924,"node_id":"MDU6SXNzdWUzNDU5OTE5MjQ=","number":26073,"title":"Web Animation API `Keyframe` requires all `CSSStyleDeclaration` Keys","user":{"login":"qkevinto","id":5260010,"node_id":"MDQ6VXNlcjUyNjAwMTA=","avatar_url":"https://avatars3.githubusercontent.com/u/5260010?v=4","gravatar_id":"","url":"https://api.github.com/users/qkevinto","html_url":"https://github.com/qkevinto","followers_url":"https://api.github.com/users/qkevinto/followers","following_url":"https://api.github.com/users/qkevinto/following{/other_user}","gists_url":"https://api.github.com/users/qkevinto/gists{/gist_id}","starred_url":"https://api.github.com/users/qkevinto/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/qkevinto/subscriptions","organizations_url":"https://api.github.com/users/qkevinto/orgs","repos_url":"https://api.github.com/users/qkevinto/repos","events_url":"https://api.github.com/users/qkevinto/events{/privacy}","received_events_url":"https://api.github.com/users/qkevinto/received_events","type":"User","site_admin":false},"labels":[{"id":113970366,"node_id":"MDU6TGFiZWwxMTM5NzAzNjY=","url":"https://api.github.com/repos/Microsoft/TypeScript/labels/Bug","name":"Bug","color":"e11d21","default":false},{"id":151698898,"node_id":"MDU6TGFiZWwxNTE2OTg4OTg=","url":"https://api.github.com/repos/Microsoft/TypeScript/labels/Domain:%20lib.d.ts","name":"Domain: lib.d.ts","color":"c7def8","default":false},{"id":117630704,"node_id":"MDU6TGFiZWwxMTc2MzA3MDQ=","url":"https://api.github.com/repos/Microsoft/TypeScript/labels/help%20wanted","name":"help wanted","color":"009800","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/Microsoft/TypeScript/milestones/2","html_url":"https://github.com/Microsoft/TypeScript/milestone/2","labels_url":"https://api.github.com/repos/Microsoft/TypeScript/milestones/2/labels","id":721044,"node_id":"MDk6TWlsZXN0b25lNzIxMDQ0","number":2,"title":"Community","description":"Issues in the 'Community' milestone are ones which we are accepting pull requests for","creator":{"login":"RyanCavanaugh","id":6685088,"node_id":"MDQ6VXNlcjY2ODUwODg=","avatar_url":"https://avatars3.githubusercontent.com/u/6685088?v=4","gravatar_id":"","url":"https://api.github.com/users/RyanCavanaugh","html_url":"https://github.com/RyanCavanaugh","followers_url":"https://api.github.com/users/RyanCavanaugh/followers","following_url":"https://api.github.com/users/RyanCavanaugh/following{/other_user}","gists_url":"https://api.github.com/users/RyanCavanaugh/gists{/gist_id}","starred_url":"https://api.github.com/users/RyanCavanaugh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RyanCavanaugh/subscriptions","organizations_url":"https://api.github.com/users/RyanCavanaugh/orgs","repos_url":"https://api.github.com/users/RyanCavanaugh/repos","events_url":"https://api.github.com/users/RyanCavanaugh/events{/privacy}","received_events_url":"https://api.github.com/users/RyanCavanaugh/received_events","type":"User","site_admin":false},"open_issues":518,"closed_issues":73,"state":"open","created_at":"2014-07-14T23:24:58Z","updated_at":"2018-08-10T20:30:11Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2018-07-31T00:42:06Z","updated_at":"2018-08-11T02:01:59Z","closed_at":null,"author_association":"NONE","body":"<!-- 🚨 STOP 🚨 𝗦𝗧𝗢𝗣 🚨 𝑺𝑻𝑶𝑷 🚨\r\n\r\nHalf of all issues filed here are duplicates, answered in the FAQ, or not appropriate for the bug tracker. Even if you think you've found a *bug*, please read the FAQ first, especially the Common \"Bugs\" That Aren't Bugs section!\r\n\r\nPlease help us by doing the following steps before logging an issue:\r\n  * Search: https://github.com/Microsoft/TypeScript/search?type=Issues\r\n  * Read the FAQ: https://github.com/Microsoft/TypeScript/wiki/FAQ\r\n\r\nPlease fill in the *entire* template below.\r\n-->\r\n\r\nThere 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`:\r\n```\r\ninterface Keyframe extends Record<keyof CSSStyleDeclaration, string> {\r\n    composite?: CompositeOperation | null;\r\n    easing?: string;\r\n    offset?: number | null;\r\n}\r\n```\r\n\r\n`Record<keyof CSSStyleDeclaration, string>` is causing TypeScript to expect every possible key in `CSSStyleDeclaration` to be declared when writing animation keyframes:\r\n\r\n```\r\nel.animate([\r\n    { transform: 'translateX(100px)' },\r\n    { transform: 'translateX(0)' }\r\n]);\r\n```\r\n\r\n```\r\nArgument of type '{ transform: string; }[]' is not assignable to parameter of type 'Keyframe[] | PropertyIndexedKeyframes'.\r\n  Type '{ transform: string; }[]' is not assignable to type 'Keyframe[]'.\r\n    Type '{ transform: string; }' is not assignable to type 'Keyframe'.\r\n      Property 'left' is missing in type '{ transform: string; }'.\r\n```\r\n\r\nThis appears to be fixed if I change `[P in K]` in type `Record` to be optional:\r\n```\r\ntype Record<K extends keyof any, T> = {\r\n    [P in K]?: T;\r\n};\r\n```\r\n\r\nSee reduced test case and playground link below.\r\n<!-- Please try to reproduce the issue with `typescript@next`. It may have already been fixed. -->\r\n**TypeScript Version:**  3.1.0-dev.20180728\r\n\r\n<!-- Search terms you tried before logging this (so others can find this issue more easily) -->\r\n**Search Terms:**\r\nkeyof optional, keyof, Record, CSSStyleDeclaration, animation\r\n\r\n**Code**\r\n\r\n```ts\r\ntype Rec<K extends keyof any, T> = {\r\n    [P in K]: T;\r\n};\r\n\r\ninterface Declarations {\r\n    x: string | null;\r\n    y: string | null;\r\n    z: string | null;\r\n}\r\n\r\ninterface X extends Rec<keyof Declarations, string> {}\r\n\r\nconst test: X = { x: 'string' };\r\n```\r\n\r\n**Expected behavior:**\r\nShould not require declaration of `y` and `z` properties. \r\n\r\n**Actual behavior:**\r\n```\r\nType '{ x: string; }' is not assignable to type 'X'.\r\n  Property 'y' is missing in type '{ x: string; }'.\r\n```\r\n**Playground Link:** https://www.typescriptlang.org/play/#src=type%20Rec%3CK%20extends%20keyof%20any%2C%20T%3E%20%3D%20%7B%0D%0A%20%20%20%20%5BP%20in%20K%5D%3A%20T%3B%0D%0A%7D%3B%0D%0A%0D%0Ainterface%20Declarations%20%7B%0D%0A%20%20%20%20x%3A%20string%20%7C%20null%3B%0D%0A%20%20%20%20y%3A%20string%20%7C%20null%3B%0D%0A%20%20%20%20z%3A%20string%20%7C%20null%3B%0D%0A%7D%0D%0A%0D%0Ainterface%20X%20extends%20Rec%3Ckeyof%20Declarations%2C%20string%3E%20%7B%7D%0D%0A%0D%0Aconst%20test%3A%20X%20%3D%20%7B%20x%3A%20'string'%20%7D%3B\r\n\r\n**Related Issues:** <!-- Did you find other bugs that looked similar? -->\r\nCouldn't find any."},"comment":{"url":"https://api.github.com/repos/Microsoft/TypeScript/issues/comments/412243526","html_url":"https://github.com/Microsoft/TypeScript/issues/26073#issuecomment-412243526","issue_url":"https://api.github.com/repos/Microsoft/TypeScript/issues/26073","id":412243526,"node_id":"MDEyOklzc3VlQ29tbWVudDQxMjI0MzUyNg==","user":{"login":"birtles","id":1232595,"node_id":"MDQ6VXNlcjEyMzI1OTU=","avatar_url":"https://avatars1.githubusercontent.com/u/1232595?v=4","gravatar_id":"","url":"https://api.github.com/users/birtles","html_url":"https://github.com/birtles","followers_url":"https://api.github.com/users/birtles/followers","following_url":"https://api.github.com/users/birtles/following{/other_user}","gists_url":"https://api.github.com/users/birtles/gists{/gist_id}","starred_url":"https://api.github.com/users/birtles/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/birtles/subscriptions","organizations_url":"https://api.github.com/users/birtles/orgs","repos_url":"https://api.github.com/users/birtles/repos","events_url":"https://api.github.com/users/birtles/events{/privacy}","received_events_url":"https://api.github.com/users/birtles/received_events","type":"User","site_admin":false},"created_at":"2018-08-11T02:01:59Z","updated_at":"2018-08-11T02:01:59Z","author_association":"NONE","body":"A `PartialRecord<>`-like type seems correct but actually Web Animations does not restrict properties to those defined in `CSSStyleDeclaration` but also permits properties whose name conforms to [`<custom-property-name>`](https://drafts.csswg.org/css-variables-1/#typedef-custom-property-name) (see [process a keyframe-like object](https://drafts.csswg.org/web-animations-1/#process-a-keyframe-like-object)). This applies to both `Keyframe` and `PropertyIndexedKeyframe`.\r\n\r\nSo really it should be something like:\r\n\r\n```typescript\r\ninterface Keyframe {\r\n    composite?: CompositeOperation | null;\r\n    easing?: string;\r\n    offset?: number | null;\r\n    [property: string]: string;\r\n}\r\n```\r\n\r\nUnfortunately Typescript doesn't allow index types to conflict with other properties so that won't work. And that's about as far as my TS knowledge goes.\r\n\r\nIn any case, a `PartialRecord<>`-like approach would still be a big improvement of the current situation, especially since currently only Chrome supports animating custom properties."}}
{"actor":{"display_login":"birtles"}}