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

[amcasey]

Baseline: TS 4.3.2 Test: e0648173719f8f2a01d775e326d8590556bb16cd

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

[markjm]

Thank you @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 https://github.com/microsoft/fluentui/pull/13841

[amcasey]

This feels vaguely similar to https://github.com/microsoft/TypeScript/issues/43437.

[ecraig12345]

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.

[Dudeonyx]

I get this error on a project I'm working on.

However it seems to be dependent on available RAM? works fine when I have enough ram, gives the error when i don't.

I'm trying to create a minimal reproduction of the issue but once I strip out unnecessary code the bug disappears?

[Validark]

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

[drewjosh]

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.

[versa-dev]

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.

[mosesgameli]

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.

[pc-erin]

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)