Poor type alias emitted in composite project declaration files

[JasonGore]

TypeScript Versions: 3.7.4, 3.8.0-dev.20200131

Search Terms:

composite project declaration type alias emitted

Code

Steps to repro:

• git clone https://github.com/JasonGore/office-ui-fabric-react.git
• cd office-ui-fabric-react
• git checkout jg/ts-composite-emit
• yarn
• yarn buildto styling

A build error will result due to an API error. This API error is caused by the emit described below.

Expected behavior:

The code in getFocusStyle.ts:

export const getInputFocusStyle = (
  ...
  borderRadius: string | number,

emits in packages/styling/lib/styles/getFocusStyle.d.ts as:

export declare const getInputFocusStyle: (
...
borderRadius: string | number,

Actual behavior:

getFocusStyle.ts emits as:

export declare const getInputFocusStyle: (
...
borderRadius: import("@uifabric/merge-styles/lib/IRawStyleBase").ICSSPixelUnitRule,

ICSSPixelUnitRule is a type that's used nowhere inside of packages/styling. The correct output can be obtained by commenting out composite in packages/styling/tsconfig.json and tsBuildInfoFile in ts.js (to prevent a TS error on having it specified without composite.)

[JasonGore]

I've done a little more characterization. It seems this behavior is affected by the absence of tsconfig.tsbuildinfo files. If the tsconfig.buildinfo files are not there (clean build state), the issue occurs. If the files are present when a build is triggered, and TS is forced to update output (based on some changes to tsbuildinfo triggering new output, such as "module" output type changing), then the d.ts output appears to be correct.

[sheetalkamat]

@JasonGore build using typescript@next is giving me error . Can you please share the repro that builds without having to use some script so we can easily investigate this. Thanks

c:\temp\office-ui-fabric-react\packages\styling>node c:\TypeScript\built\local\tsc.js -b -v
[10:37:29 AM] Projects in this build:
    * ../set-version/tsconfig.json
    * ../merge-styles/tsconfig.json
    * ../jest-serializer-merge-styles/tsconfig.json
    * ../test-utilities/tsconfig.json
    * ../utilities/tsconfig.json
    * tsconfig.json

[10:37:29 AM] Project '../set-version/tsconfig.json' is out of date because output file '../set-version/lib/index.js' does not exist

[10:37:29 AM] Building project 'c:/temp/office-ui-fabric-react/packages/set-version/tsconfig.json'...

[10:37:31 AM] Project '../merge-styles/tsconfig.json' is out of date because output file '../merge-styles/lib/IRawStyleBase.js' does not exist

[10:37:31 AM] Building project 'c:/temp/office-ui-fabric-react/packages/merge-styles/tsconfig.json'...

[10:37:33 AM] Project '../jest-serializer-merge-styles/tsconfig.json' is out of date because output file '../jest-serializer-merge-styles/lib/index.test.js' does not exist

[10:37:33 AM] Building project 'c:/temp/office-ui-fabric-react/packages/jest-serializer-merge-styles/tsconfig.json'...

[10:37:34 AM] Project '../test-utilities/tsconfig.json' is out of date because output file '../test-utilities/lib/index.js' does not exist

[10:37:34 AM] Building project 'c:/temp/office-ui-fabric-react/packages/test-utilities/tsconfig.json'...

[10:37:37 AM] Project '../utilities/tsconfig.json' is out of date because output file '../utilities/lib/Async.js' does not exist

[10:37:37 AM] Building project 'c:/temp/office-ui-fabric-react/packages/utilities/tsconfig.json'...

../utilities/src/styled.test.tsx:277:36 - error TS2345: Argument of type '(props: ITestProps) => null' is not assignable to parameter of type 'ComponentClass<IPropsWithStyles<unknown, { backgroundColor: string; }>, any> | StatelessComponent<IPropsWithStyles<unknown, { backgroundColor: string; }>>'.
  Type '(props: ITestProps) => null' is not assignable to type 'StatelessComponent<IPropsWithStyles<unknown, { backgroundColor: string; }>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'PropsWithChildren<IPropsWithStyles<unknown, { backgroundColor: string; }>>' is not assignable to type 'ITestProps'.
        Types of property 'styles' are incompatible.
          Type 'IStyleFunction<unknown, { backgroundColor: string; }> | Partial<{ backgroundColor: string; }> | undefined' is not assignable to type 'IStyleFunction<{}, ITestStyles> | Partial<ITestStyles> | undefined'.
            Type 'IStyleFunction<unknown, { backgroundColor: string; }>' is not assignable to type 'IStyleFunction<{}, ITestStyles> | Partial<ITestStyles> | undefined'.
              Type 'IStyleFunction<unknown, { backgroundColor: string; }>' is not assignable to type 'IStyleFunction<{}, ITestStyles>'.
                Type 'Partial<{ backgroundColor: string; }>' has no properties in common with type 'Partial<ITestStyles>'.

277     const StyledComponent = styled(Component, defaultStyles);
                                       ~~~~~~~~~

[10:37:39 AM] Project 'tsconfig.json' can't be built because its dependency '../utilities/tsconfig.json' has errors

[10:37:39 AM] Skipping build of project 'c:/temp/office-ui-fabric-react/packages/styling/tsconfig.json' because its dependency 'c:/temp/office-ui-fabric-react/packages/utilities/tsconfig.json' has errors


Found 1 error.

[JasonGore]

Did you follow the steps I listed in the description? Is there a reason they don't apply?

[sheetalkamat]

we don't want to use custom script to build. We should be able to build using tsc.. I did follow steps till installing dependencies (and instead of last step yarn buildto styling I used tsc)

[JasonGore]

I've pushed an update. The previous steps still apply, but I've also tried:

• cd packages/styling
• yarn clean (cleans lib output.. may also want to remove tsconfig.tsbuildinfo to ensure TS generates output)
• tsc -b -v
• open packages/lib/styles/getFocusStyle.d.ts
• note same emit output:

export declare const getInputFocusStyle: (borderColor: string, borderRadius: import("@uifabric/merge-styles/lib/IRawStyleBase").ICSSPixelUnitRule, borderType?: "border" | "borderBottom", borderPosition?: number) => IRawStyle;

[JasonGore]

Also, since we're not using project references (due to this issue) you will still have to do yarn buildto styling to build the deps of packages/styling.

[sheetalkamat]

Will be fixed by #37444