2.4 errors for missing index signature with object literal spread

TypeScript Version: 2.4.0

Code

import {CSSProperties} from 'glamorous'

export const a = (): CSSProperties => ({})

export const b = ({withA = false}): CSSProperties => ({
  ...withA ? a() : undefined,
})

Expected behavior:
No errors

Actual behavior:
TypeScript displays this error:

error TS2322: Type '{} | { [propertyName: string]: string | number | CSSProperties | undefined; alignContent?: "cente...' is
not assignable to type 'CSSProperties'.
  Type '{}' is not assignable to type 'CSSProperties'.
    Index signature is missing in type '{}'

The code works fine in 2.3.4 which is what I would expect. I return an object literal, there is nothing that should prevent it to be assigned to a more open type.
Without the tenery at the spread position the code gives no errors.

Emma (@Pajn)

Emma (@Pajn) could you share your tsconfig as well just from the code I can't really repro the issue

Here it is:

{
  "compilerOptions": {
    "allowJs": false,
    "declaration": true,
    "target": "es2015",
    "module": "es2015",
    "lib": ["dom", "es5", "es2015", "es2016"],
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "rootDir": ".",
    "outDir": "lib"
  },
  "include": [
    "src/**/*",
    "typings/**/*"
  ],
  "exclude": [
    "node_modules/**/*"
  ]
}

If it works with a standard config I guess the troublemakers might be noImplicitAny or strictNullChecks. I can't test that right now however.

Still no luck in repo this .... From the error message, is there more properties in return type of b.... If so would you be able to share the info

I'm sorry. There were two big issues with the report.
I forgot to mention. The CSSProperties type is from glamorous, not from react. I updated the code in the bug to include the import.
The error message was from my actual code and not the minimal repro. I also updated the bug with the correct error message.

For completeness, here is the actual code where I experienced the bug and its error message:

error TS2322: Type '{ display: string; flexDirection: "column" | "column-reverse"; alignItems: "center" | "flex-start...' is
not assignable to type 'CSSProperties'.
  Type '{ display: string; flexDirection: "column" | "column-reverse"; alignItems: "center" | "flex-start...' is not assignable to type 'CSSPropert
ies'.
    Index signature is missing in type '{ display: string; flexDirection: "column" | "column-reverse"; alignItems: "center" | "flex-start...'.

import {CSSProperties} from 'glamorous'

export const flex = (
  flex: number | boolean | {grow?: number; shrink?: number},
): CSSProperties => ({
  flexGrow: flex === true
    ? 1
    : flex === false
      ? undefined
      : flex === undefined
        ? undefined
        : typeof flex === 'number' ? flex : flex.grow,
  flexShrink: flex === true
    ? undefined
    : flex === false
      ? undefined
      : flex === undefined
        ? undefined
        : typeof flex === 'number' ? flex : flex.grow,
})

export const column = ({
  horizontal,
  vertical,
  self,
  reverse,
  flex: flex_,
}: {
  horizontal?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline'
  vertical?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
  self?: 'center' | 'flex-start' | 'flex-end' | 'stretch'
  reverse?: boolean
  flex?: number | boolean | {grow?: number; shrink?: number}
}): CSSProperties => ({
  display: 'flex',
  flexDirection: reverse ? 'column' : 'column-reverse',
  alignItems: horizontal,
  justifyContent: vertical,
  self,
  ...flex_ === undefined ? undefined : flex(flex_),
})

We found the reason for this issue that we will fix in the nightly. But in the meantime, the workaround is
to use { }

The problem is that object types are supposed to have a symbol set, which checkObjectLiteral normally does for spreads. But it forgets to when the result of getSpreadType is a union, as it is for { ...(CSSProperties | undefined) }. The result of the spread, CSSProperties | {}, has two anonymous types that are missing symbols. The former is OK because it has a string indexer that matches the one on CSSProperties (since they are the same type). The latter fails because it doesn't have a string indexer and doesn't have a symbol, which causes it to fail the isObjectLiteralType check.

The predicate in checkObjectLiteralType needs to handle unions when checking TypeFlags.Object and also needs to use mapType to set the symbol. I'll fix this when I have time.

Awesome!

Fixed in #18965

Navigation Menu

Repository navigation

2.4 errors for missing index signature with object literal spread #16694

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

2.4 errors for missing index signature with object literal spread #16694

Description

Activity

yuit commented on Jun 22, 2017

Pajn commented on Jun 22, 2017

yuit commented on Jun 22, 2017

Pajn commented on Jun 22, 2017

yuit commented on Jun 22, 2017

sandersn commented on Jun 22, 2017

Pajn commented on Jun 23, 2017

sandersn commented on Oct 5, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions