Typescript: Incompatible types error appears to be wrong in 2.4

[arackaf]

TypeScript Version: 2.4.0 / nightly (2.5.0-dev.201xxxxx)

2.4

Code

let stickyHeaderStyle = {position: "sticky", top: 50 + navBarHeight, backgroundColor: 'white' };

and then using it in JSX like so

<th style={{...stickyHeaderStyle}}>

Expected behavior:

Should be fine

Actual behavior:

Error is

file: 'file:///c%3A/GIT/booklist/react-redux/modules/books/components/bookViewList-grid.tsx'
severity: 'Error'
message: 'Type '{ style: { position: string; top: number; backgroundColor: string; }; children: Element; }' is not assignable to type 'HTMLProps'.
Types of property 'style' are incompatible.
Type '{ position: string; top: number; backgroundColor: string; }' is not assignable to type 'CSSProperties'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"initial" | "inherit" | "unset" | "sticky" | "static" | "relative" | "absolute" | "fixed"'.'
at: '134,37'
source: 'ts'

position is explicitly set to "sticky" - so it would seem that error should not be showing up?

Apologies if I'm just missing something.

[DanielRosenwasser]

The problem is that the language starts out with a general type and doesn't try to figure things out from usages down the line. At the declaration of stickyHeaderStyle, it's not clear whether position should just be inferred as string or if it should stick to being a string literal type - and since position is mutable, the language takes the more general type.

One solution is writing something like

let stickyHeaderStyle: CSSProperties = /*...*/;

though this is clearly less than ideal.

[greenSnot]

+1

[basarat]

I do position: "sticky" as "sticky". Seen this quite commonly with TypeStyle users as well e.g. https://github.com/typestyle/typestyle/issues/145#issuecomment-298818875 :rose:

[mhegazy]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.