Changes in Except from v3.7.0 generates a huge declaration output truncated by TypeScript v4.9.5

[dfernandez79]

I encountered an issue with the Except type in type-fest versions 3.7.0 and higher (including v3.8.0), but this problem is not present in type-fest version 3.6.1.

Specifically, when I tried to create a declaration file using thetsc --emitDeclarationOnly command, the compiler expanded certain expressions using Except. However, this expansion did not occur in version 3.6.1. Additionally, in some cases, TypeScript version 4.9.5 would truncate the declaration file due to a bug handling the expansion of Except. (this issue has been resolved in TypeScript 5.0, but I cannot find any related bug report in their repo).

Example

// Note: BoxProps contains many properties to implement a "styled system"
export interface TextProps extends Except<BoxProps, 'textStyle'> {
  variant?: keyof TextStyles;
}

type TextVariantProps = Except<TextProps, 'variant'>;

export const Heading1 = forwardRef((props: TextVariantProps, ref: Ref<HTMLElement>) => (
  <Text variant="heading1" ref={ref} {...props} />
));

Declaration emitted when using type-fest 3.6.1:

export declare const Heading1: import("react").ForwardRefExoticComponent<Except<TextProps, "variant"> & import("react").RefAttributes<HTMLElement>>;

Declaration emitted when using type-fest 3.8.0 (or any version higher than 3.6.1):

export declare const Heading1: import("react").ForwardRefExoticComponent<{
    as?: import("react").ElementType<any> | undefined;
    children?: import("react").ReactNode;
    suppressHydrationWarning?: boolean | undefined;
    id?: string | undefined;
    "data-testid"?: string | undefined;
    "data-test-name"?: string | undefined;
    order?: import("csstype").Property.Order | undefined;
    flexGrow?: import("csstype").Property.FlexGrow | undefined;
    flexShrink?: import("csstype").Property.FlexShrink | undefined;
    flexBasis?: import("csstype").Property.FlexBasis<0 | (string & {})> | undefined;
    flex?: import("csstype").Property.Flex<0 | (string & {})> | undefined;
    alignSelf?: import("csstype").Property.AlignSelf | undefined;
    gridColumnStart?: import("csstype").Property.GridColumnStart | undefined;
    gridColumnEnd?: import("csstype").Property.GridColumnEnd | undefined;
    gridRowStart?: import("csstype").Property.GridRowStart | undefined;
    gridRowEnd?: import("csstype").Property.GridRowEnd | undefined;
    gridColumn?: import("csstype").Property.GridColumn | undefined;
    gridRow?: import("csstype").Property.GridRow | undefined;
    gridArea?: import("csstype").Property.GridArea | undefined;
    justifySelf?: import("csstype").Property.JustifySelf | undefined;
    placeSelf?: import("csstype").Property.PlaceSelf | undefined;
    margin?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | [import("csstype").Globals | import("../../foundation").Space | "auto"] | [import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape"] | [import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape", import("csstype").Globals | import("../../foundation").Space | "auto"] | [import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape", import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape"]) | undefined;
    m?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | [import("csstype").Globals | import("../../foundation").Space | "auto"] | [import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape"] | [import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape", import("csstype").Globals | import("../../foundation").Space | "auto"] | [import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape", import("csstype").Globals | import("../../foundation").Space | "auto", (import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape"]) | undefined;
    marginTop?: (import("csstype").Globals | import("../../foundation").Space | "auto") | undefined;
    mt?: (import("csstype").Globals | import("../../foundation").Space | "auto") | undefined;
    marginRight?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape") | undefined;
    mr?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape") | undefined;
    marginBottom?: (import("csstype").Globals | import("../../foundation").Space | "auto") | undefined;
    mb?: (import("csstype").Globals | import("../../foundation").Space | "auto") | undefined;
    marginLeft?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape") | undefined;
    ml?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape") | undefined;
    marginY?: (import("csstype").Globals | import("../../foundation").Space | "auto") | undefined;
    my?: (import("csstype").Globals | import("../../foundation").Space | "auto") | undefined;
    marginX?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape") | undefined;
    mx?: ((import("csstype").Globals | import("../../foundation").Space | "auto") | "boundaryEscape" | "panelEscape") | undefined;
    position?: import("csstype").Property.Position | undefined;
    zIndex?: import("csstype").Property.ZIndex | undefined;
    top?: import("csstype").Property.Top<0 | (string & {})> | undefined;
    right?: import("csstype").Property.Right<0 | (string & {})> | undefined;
    bottom?: import("csstype").Property.Bottom<0 | (string & {})> | undefined;
    left?: import("csstype").Property.Left<0 | (string & {})> | undefined;
    className?: string | undefined;
    style?: import("react").CSSProperties | undefined;
    display?: import("csstype").Property.Display | undefined;
    flexDirection?: import("csstype").Property.FlexDirection | undefined;
    flexWrap?: import("csstype").Property.FlexWrap | undefined;
    flexFlow?: import("csstype").Property.FlexFlow | undefined;
    justifyContent?: import("csstype").Property.JustifyContent | undefined;
    alignItems?: import("csstype").Property.AlignItems | undefined;
    alignContent?: import("csstype").Property.AlignContent | undefined;
    gap?: "normal" | import("csstype").Globals | import("../../foundation").PositiveSpace | undefined;
    gridTemplateColumns?: import("csstype").Property.GridTemplateColumns<0 | (string & {})> | undefined;
    gridTemplateRows?: import("csstype").Property.GridTemplateRows<0 | (string & {})> | undefined;
    gridTemplateAreas?: import("csstype").Property.GridTemplateAreas | undefined;
    gridTemplate?: import("csstype").Property.GridTemplate | undefined;
    columnGap?: ("normal" | import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    rowGap?: ("normal" | import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    justifyItems?: import("csstype").Property.JustifyItems | undefined;
    placeItems?: import("csstype").Property.PlaceItems | undefined;
    placeContent?: import("csstype").Property.PlaceContent | undefined;
    gridAutoColumns?: import("csstype").Property.GridAutoColumns<0 | (string & {})> | undefined;
    gridAutoRows?: import("csstype").Property.GridAutoRows<0 | (string & {})> | undefined;
    gridAutoFlow?: import("csstype").Property.GridAutoFlow | undefined;
    grid?: import("csstype").Property.Grid | undefined;
    overflow?: import("csstype").Property.Overflow | undefined;
    overflowX?: import("csstype").Property.OverflowX | undefined;
    overflowY?: import("csstype").Property.OverflowY | undefined;
    width?: string | undefined;
    minWidth?: string | undefined;
    maxWidth?: string | undefined;
    height?: string | undefined;
    minHeight?: string | undefined;
    maxHeight?: string | undefined;
    padding?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | (readonly [import("csstype").Globals | import("../../foundation").PositiveSpace] | readonly [import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace] | readonly [import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace] | readonly [import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace]) | undefined;
    p?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | (readonly [import("csstype").Globals | import("../../foundation").PositiveSpace] | readonly [import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace] | readonly [import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace] | readonly [import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace, import("csstype").Globals | import("../../foundation").PositiveSpace]) | undefined;
    paddingTop?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    pt?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    paddingRight?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    pr?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    paddingBottom?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    pb?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    paddingLeft?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    pl?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    paddingY?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    py?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    paddingX?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    px?: (import("csstype").Globals | import("../../foundation").PositiveSpace) | undefined;
    fontFamily?: import("csstype").Property.FontFamily | undefined;
    fontSize?: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
    fontWeight?: import("csstype").Property.FontWeight | undefined;
    fontStyle?: import("csstype").Property.FontStyle | undefined;
    lineHeight?: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
    letterSpacing?: import("csstype").Property.LetterSpacing<0 | (string & {})> | undefined;
    textAlign?: import("csstype").Property.TextAlign | undefined;
    textTransform?: import("csstype").Property.TextTransform | undefined;
    backgroundColor?: import("csstype").Globals | import("../..").ColorName | "transparent" | undefined;
    bg?: import("csstype").Globals | import("../..").ColorName | "transparent" | undefined;
    color?: import("csstype").Globals | import("../..").ColorName | undefined;
    opacity?: string | number | undefined;
    border?: import("csstype").Property.Border<0 | (string & {})> | undefined;
    borderWidth?: import("csstype").Property.BorderWidth<0 | (string & {})> | undefined;
    borderStyle?: import("csstype").Property.BorderStyle | undefined;
    borderColor?: (import("csstype").Globals | import("../..").ColorName | "transparent") | undefined;
    borderTop?: import("csstype").Property.BorderTop<0 | (string & {})> | undefined;
    borderTopWidth?: import("csstype").Property.BorderTopWidth<0 | (string & {})> | undefined;
    borderTopStyle?: import("csstype").Property.BorderTopStyle | undefined;
    borderTopColor?: (import("csstype").Globals | import("../..").ColorName | "transparent") | undefined;
    borderRight?: import("csstype").Property.BorderRight<0 | (string & {})> | undefined;
    borderRightWidth?: import("csstype").Property.BorderRightWidth<0 | (string & {})> | undefined;
    borderRightStyle?: import("csstype").Property.BorderRightStyle | undefined;
    borderRightColor?: (import("csstype").Globals | import("../..").ColorName | "transparent") | undefined;
    borderBottom?: import("csstype").Property.BorderBottom<0 | (string & {})> | undefined;
    borderBottomWidth?: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
    borderBottomStyle?: import("csstype").Property.BorderBottomStyle | undefined;
    borderBottomColor?: (import("csstype").Globals | import("../..").ColorName | "transparent") | undefined;
    borderLeft?: import("csstype").Property.BorderLeft<0 | (string & {})> | undefined;
    borderLeftWidth?: import("csstype").Property.BorderLeftWidth<0 | (string & {})> | undefined;
    borderLeftStyle?: import("csstype").Property.BorderLeftStyle | undefined;
    borderLeftColor?: (import("csstype").Globals | import("../..").ColorName | "transparent") | undefined;
    borderX?: import("csstype").Property.BorderLeft<0 | (string & {})> | undefined;
    borderY?: import("csstype").Property.BorderTop<0 | (string & {})> | undefined;
    borderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
    borderTopLeftRadius?: import("csstype").Property.BorderTopLeftRadius<0 | (string & {})> | undefined;
    borderTopRightRadius?: import("csstype").Property.BorderTopRightRadius<0 | (string & {})> | undefined;
    borderBottomLeftRadius?: import("csstype").Property.BorderBottomLeftRadius<0 | (string & {})> | undefined;
    borderBottomRightRadius?: import("csstype").Property.BorderBottomRightRadius<0 | (string & {})> | undefined;
    boxShadow?: import("../..").ShadowDepth | import("csstype").Property.BoxShadow | undefined;
    outline?: import("../..").ColorName | import("csstype").Property.Outline<0 | (string & {})> | undefined;
    outlineColor?: import("../..").ColorName | undefined;
    outlineStyle?: import("csstype").Property.OutlineStyle | undefined;
    outlineWidth?: import("csstype").Property.OutlineWidth<0 | (string & {})> | undefined;
    outlineOffset?: import("csstype").Property.OutlineOffset<0 | (string & {})> | undefined;
    cursor?: import("csstype").Property.Cursor | undefined;
    userSelect?: import("csstype").Property.UserSelect | undefined;
    textOverflow?: import("csstype").Property.TextOverflow | undefined;
    whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
    hover?: import("../Box").BoxStyleSystemProps | undefined;
    focusVisible?: import("../Box").BoxStyleSystemProps | undefined;
} & import("react").RefAttributes<HTMLElement>>;

I detected the Except expansion because the compiler started to fail in another project that consumed the .d.ts. It failed because TS 4.9.5 truncated the output when the expansion was big. I was able to solve the problem by downgrading to [email protected].

While this is not only an issue with type-fest (it's also an issue intsc v4.9.5), perhaps revisiting of the changes introduced in #560 may help.

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• The funding will be given to active contributors.
• Thank you in advance for helping prioritize & fund our backlog.

[dfernandez79]

I didn't have any success on reproducing the issue with smaller cases. I think that React's forwardRef definition and the addition of & to Except may have to do with the tsc expansion.

At the moment, I pinned type-fest version to v3.6.1