skipLibCheck false resolving incorrect third party type alias imports

[JoshRosenstein]

TypeScript Version: 3.4.1 && 3.3.3333

Search Terms: skipLibCheck tsdoc inlineimports wrongaliastype

Currently trying to figure out why I need "skipLibCheck": true in order for compiler to resolve and emit the correct imported type alias. It does not throw any errors because its importing the wrong alias so their types are the same, but I'm losing the correct tsdoc.

BoxShadowProperty & AnimationNameProperty do have the same types- so there wont be any error thrown, however the jsdoc comments become misleading

Code

tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "target": "es5",
    "declaration": true,
    "declarationDir": "dist-debug/",
    "skipLibCheck": true, /// Needs to be true to fix wrong alias types being used

  },
"files": ["src/boxShadow.ts"],
}

@styleaux/tools/src/boxShadow.ts

import {ColorProperty,BoxShadowProperty} from '@styleaux/csstype'
import {arrayWrapper} from './arrayWrapper'
import {isDefined} from 'typed-is'
export interface BoxShadowOptions {

  inset?: boolean

  offsetX: string | 0

  offsetY: string | 0

  blurRadius?: string | 0

  spreadRadius?: string | 0

  color?: ColorProperty
}

export const boxShadow = arrayWrapper(
  function shadowInner(
    ...shadows: BoxShadowOptions[]
  ): BoxShadowProperty {
    return shadows
      .map(shadow => {
        return [
          shadow.inset && 'inset',
          shadow.offsetX,
          shadow.offsetY,
          shadow.blurRadius,
          shadow.spreadRadius,
          shadow.color,
        ]
          .filter(isDefined)
          .join(' ')
      })
      .filter(s => s !== '')
      .join(',')
  }

)

@styleaux/csstype exports example

export type Globals = "-moz-initial" | "inherit" | "initial" | "revert" | "unset";
export type StringHack = string & { zz_IGNORE_ME?: never };

/**
 * The **`animation-name`** CSS property sets one or more animations to apply to an element. Each name is an `@keyframes` at-rule that sets the property values for the animation sequence.
 *
 * @see https://developer.mozilla.org/docs/Web/CSS/animation-name
 */
export type AnimationNameProperty = Globals | "none" | StringHack;


/**
 * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
 *
 * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
 */
export type BoxShadowProperty = Globals | "none" | StringHack;

Expected behavior:

Occurs only when skipLibCheck =true

import { ColorProperty, BoxShadowProperty } from '@styleaux/csstype';

export interface BoxShadowOptions {
  inset?: boolean
  offsetX: string | 0
  offsetY: string | 0
  blurRadius?: string | 0
  spreadRadius?: string | 0
  color?: ColorProperty
}
export declare const boxShadow: {
    (...values: BoxShadowOptions[]): BoxShadowProperty;
    (values: BoxShadowOptions[]): BoxShadowProperty;
};

Actual behavior:

Occurs only when skipLibCheck =false

import { ColorProperty } from '@styleaux/csstype';

export interface BoxShadowOptions {
  inset?: boolean
  offsetX: string | 0
  offsetY: string | 0
  blurRadius?: string | 0
  spreadRadius?: string | 0
  color?: ColorProperty
}
export declare const boxShadow: {
    (...values: BoxShadowOptions[]): import("@styleaux/csstype").AnimationNameProperty;
    (values: BoxShadowOptions[]): import("@styleaux/csstype").AnimationNameProperty;
};

Related Issues:

[ajafff]

For union types the TypeChecker uses the name it first encounters during checking. This name is reused if an equal union type is encountered.
Which name is used solely depends on the order of type checking different nodes in different files.

By turning off lib checking, you are changing that order which incidentally fixes this issue. However, that's not a reliable solution as an unrelated change could cause a change in check order.

To fix the declaration emit, you can add an explicit type annotation to export const boxShadow which is then used by the declaration emitter.

[JoshRosenstein]

@ajafff - thanks for the explanation. that makes sense and thank you for letting me know that what i thought was a solution was just a coincidence 😞 . Unfortunately adding explicit type annotation may be easy for this simple sample file, but not for remaining parts of the project. At this point it looks like the best thing to do is to remove all annotations from union types to prevent confusing annotations.

btw- i also tried putting each union type in its own file and import that file directly, but that didn't seem to work.

Thanks again!