New Error: error TS2590: Expression produces a union type that is too complex to represent

Baseline: TS 4.3.2
Test: e064817

New error: error TS2590: Expression produces a union type that is too complex to represent.

Dependencies

    "@fluentui/react-northstar": "^0.56.0",
    "@types/react": "^16.9.11"

tsconfig.json

{
    "compilerOptions": {
        "strictNullChecks": true,
        "skipLibCheck": true,
        "jsx": "react",
    }
}

test.tsx

import { Alignment, ComponentSlotStylesPrepared, TeamsThemeStylesProps, ToolbarCustomItemProps, ToolbarItemProps } from "@fluentui/react-northstar";
import * as React from "react";

// No error if this is absent or at the end of the file
type Unused = ComponentSlotStylesPrepared<NonNullable<TeamsThemeStylesProps["ToolbarCustomItem"]>, any>;

type ItemProps = ToolbarItemProps | ToolbarCustomItemProps;

type ItemPropsWithTooltip = ItemProps & {
  key?: string;
  tooltip?: string;
  tooltipAlign?: Alignment;
};

declare const ToolbarItem: React.ElementType<ItemPropsWithTooltip>;
declare const props: ItemPropsWithTooltip;
const { tooltip, key, tooltipAlign, ...rest } = props;

const _ = <ToolbarItem {...rest} />; // TS2590

Andrew Casey (@amcasey)

Thank you Andrew Casey (@amcasey) for making a repro. I was trying to look around to see how to resolve such an issue.

I think this is also speaking (or maybe unrelated) to some general typing complexit with @fluentui/react-northstar (which is the main UI lib for all Microsoft web properties). I notice when profiling that typechecking these even in current version is much slower than I would expect. May be due to some complex typings.

I think this type in particular has very high cost https://github.com/microsoft/fluentui/blob/a9cb101a5bae361fc515895150a4465fe439b7fc/packages/react-compose/src/types.ts#L21

There was some work to try and simplify the type, but not sure how much it has helped
microsoft/fluentui#13841

This feels vaguely similar to #43437.

This is also going to block the Fluent UI repo from upgrading to TS 4.3 or require introducing a lot of casts to any internally. Not sure exactly when we'll get around to that upgrade, but I gave it a quick try ("maybe it will just work this time") and hit this issue.

Do any of you have an idea of when this might be addressed, or possibly things to try changing on our end while still maintaining decent type safety?

Note that the type linked above and used by @fluentui/react-northstar has moved here and similar types are used in the @fluentui/react-components library which we're trying to release in beta later this fall. So this will start impacting more teams (besides the relatively small number that use northstar) as time goes on.

I had this error for some custom type code and I figured out a workaround that might be applicable to other people's types that are too complex.

I was getting this error on code like:

X extends { name: keyof Y } ? ... : never
// `keyof Y` was massive

And I worked around it by doing:

X extends { name: infer U }
    ? U extends keyof Y
        ? ...
        : never
    : never

I get that error on a static array of 2000+ objects (list of SNOMED codes) when I add an optional property (additionalInformation) to one object in the array.

export interface AllergyInfo {
  name: string;
  url: string;
}

/**
 * Represents a code with a type, a default coding and multiple language displays.
 */
export interface AllergySystemCodeExtension extends SystemCodeExtension {
  type: AllergyIdentificationType;
  defaultCoding: Coding;
  languageDisplays: {
    en: string;
    de: string;
    fr: string;
    it: string;
    rm: string;
  };
  additionalInformation?: Array<AllergyInfo>;
}

Error from the big array:

Here in a small array I have no error:

const bla: AllergySystemCodeExtension[] = [
  {
    type: AllergyIdentificationType.SITUATION,
    defaultCoding: {
      system: 'http://snomed.info/sct',
      code: '716186003',
      display: 'No known allergy'
    },
    languageDisplays: {
      en: 'No known allergy',
      de: 'Keine bekannte Allergie',
      fr: "pas d'allergie connue",
      it: 'nessuna allergia nota',
      rm: '?'
    },
    additionalInformation: [{name: 'bla', url: 'bla'}]
  },
]

The dependencies:

"devDependencies": {
    "@rollup/plugin-commonjs": "22.0.1",
    "@rollup/plugin-node-resolve": "13.3.0",
    "@types/uuid": "8.3.4",
    "rollup": "2.76.0",
    "rollup-plugin-peer-deps-external": "2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-typescript2": "0.32.1",
    "rollup-plugin-vue": "6.0.0",
    "sass": "^1.5.1",
    "typescript": "4.5.5"
  },
  "peerDependencies": {
    "@i4mi/fhir_r4": "^1.1.1",
    "fhirpath": "^2.14.5",
    "quasar": "^2.7.4",
    "vue": "^3.2.37"
  }

Anyone had this before? Help please.

I get that error on a static array of 2000+ objects (list of SNOMED codes) when I add an optional property (additionalInformation) to one object in the array.

export interface AllergyInfo {
  name: string;
  url: string;
}

/**
 * Represents a code with a type, a default coding and multiple language displays.
 */
export interface AllergySystemCodeExtension extends SystemCodeExtension {
  type: AllergyIdentificationType;
  defaultCoding: Coding;
  languageDisplays: {
    en: string;
    de: string;
    fr: string;
    it: string;
    rm: string;
  };
  additionalInformation?: Array<AllergyInfo>;
}

Error from the big array:

Here in a small array I have no error:

const bla: AllergySystemCodeExtension[] = [
  {
    type: AllergyIdentificationType.SITUATION,
    defaultCoding: {
      system: 'http://snomed.info/sct',
      code: '716186003',
      display: 'No known allergy'
    },
    languageDisplays: {
      en: 'No known allergy',
      de: 'Keine bekannte Allergie',
      fr: "pas d'allergie connue",
      it: 'nessuna allergia nota',
      rm: '?'
    },
    additionalInformation: [{name: 'bla', url: 'bla'}]
  },
]

The dependencies:

"devDependencies": {
    "@rollup/plugin-commonjs": "22.0.1",
    "@rollup/plugin-node-resolve": "13.3.0",
    "@types/uuid": "8.3.4",
    "rollup": "2.76.0",
    "rollup-plugin-peer-deps-external": "2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-typescript2": "0.32.1",
    "rollup-plugin-vue": "6.0.0",
    "sass": "^1.5.1",
    "typescript": "4.5.5"
  },
  "peerDependencies": {
    "@i4mi/fhir_r4": "^1.1.1",
    "fhirpath": "^2.14.5",
    "quasar": "^2.7.4",
    "vue": "^3.2.37"
  }

Anyone had this before? Help please.

I am getting the same error for my ts file to export json constant in express.js project.

Expression produces a union type that is too complex to represent. ts(2590)

The error message seems to be misleading.

I had a database table of 5000+ entries exported to a JSON file. When I change the file to .ts extension, I get this error, but it is not so when I change to .js extension.

I decided to leave it as JSON as read from file using Node fs.

Weirdly, I had some code that was working when it was all in one file, but once I broke it up into separate files I started getting Expression produces a union type that is too complex to represent. ts(2590)

Navigation Menu

Repository navigation

New Error: error TS2590: Expression produces a union type that is too complex to represent #45149

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

New Error: error TS2590: Expression produces a union type that is too complex to represent #45149

Description

Activity

markjm commented on Jul 22, 2021

amcasey commented on Jul 22, 2021

ecraig12345 commented on Aug 24, 2021

3 remaining items

Validark commented on Aug 8, 2022

drewjosh commented on Aug 25, 2022

versa-dev commented on Dec 2, 2022

mosesgameli commented on Dec 11, 2022

pc-erin commented on Jul 13, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions