Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ts-check Issue with inline style attributes on JSX component not assignable #18744

Closed
jcreamer898 opened this issue Sep 25, 2017 · 6 comments
Closed
Labels
Design Limitation Constraints of the existing architecture prevent this from being fixed

Comments

@jcreamer898
Copy link

TypeScript Version: 2.4.1

Code

// @ts-check
import * as React from "react";

const styles = {
  search: {
    position: "relative",
  }
}

const Foo = () => (
  <div style={styles.search}></div>
);

Expected behavior:
Everything should be 👌

Actual behavior:
Getting a type error...

[js]
Type '{ style: { [x: string]: any; position: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ style: { [x: string]: any; position: string; }; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'style' are incompatible.
      Type '{ [x: string]: any; position: string; }' is not assignable to type 'CSSProperties'.
[js]
Type '{ style: { [x: string]: any; position: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ style: { [x: string]: any; position: string; }; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property 'style' are incompatible.
      Type '{ [x: string]: any; position: string; }' is not assignable to type 'CSSProperties'.
        Types of property 'position' are incompatible.
          Type 'string' is not assignable to type '"relative" | "initial" | "inherit" | "unset" | "static" | "absolute" | "fixed" | "sticky"'.
(property) search: {
    [x: string]: any;
    position: string;
}
@jcreamer898 jcreamer898 changed the title Issue with inline style attributes on JSX component not assignable ts-check Issue with inline style attributes on JSX component not assignable Sep 25, 2017
@ghost
Copy link

ghost commented Sep 25, 2017

This is just a case of the more general problem:

const x = { value: "lit" };
const y: { value: "lit" } = x; // Error

The problem is that since x has no type annotation, a new type is synthesized for it; and by default this type will use string instead of a string literal type.

@aluanhaddad
Copy link
Contributor

aluanhaddad commented Sep 25, 2017

This issue surfaces in TypeScript code as well and is unrelated to @ts-check.

The error stems from the fact that position is a mutable property of the styles local. because it is mutable, it is inferred as having type string instead of having a literal type.

See also #11465

@mhegazy
Copy link
Contributor

mhegazy commented Sep 25, 2017

This is not specific to @ts-check as @aluanhaddad noted. you can find similar discussion in #16389.

The recommendation here is to add a type annotation on your declaration to guide the compiler to inferring the literal types, e.g.:

/** @type {{search: React.CSSProperties}} */
const styles = {
    search: {
        position: "relative",
    }
}

@mhegazy mhegazy added the Design Limitation Constraints of the existing architecture prevent this from being fixed label Sep 25, 2017
@jcreamer898
Copy link
Author

Ah, great, should I keep this open or close it then?

@mhegazy
Copy link
Contributor

mhegazy commented Sep 25, 2017

There are a few of elk of #16389 around. we have no plans on changing the design at this point. we already had multiple iterations on how literal types are inferred and the current design seems to be the best compromise we can reach.

@jcreamer898
Copy link
Author

Sounds good. Closing!

@microsoft microsoft locked and limited conversation to collaborators Jun 14, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Design Limitation Constraints of the existing architecture prevent this from being fixed
Projects
None yet
Development

No branches or pull requests

3 participants