Array of object unions not working as expected

[ivodolenc]

🔎 Search Terms

"array of object unions", "array union narrowing", "union narrowing", "object union operator in"

🕗 Version & Regression Information

• This changed between versions 5.2.2 and the latest 5.6.2

⏯ Playground Link

Playground

💻 Code

interface EntryBase {
    /**
     * Type info...
     */
    type?: 'default' | 'declaration' 
    /**
     * Output base info...
     */
    output?: string
    /**
     * Format base info...
     */
    format?: string
    /**
     * Name base info...
     */
    name?: string
}

interface PluginsDefault {
    /**
     * Esbuild plugin info...
     * 
     * @default undefined
     */
    esbuild?: Record<string, unknown>
}

interface EntryDefault extends EntryBase {
    /**
     * Input default info...
     */
    input: string
    /**
     * Name default info...
     */
    name?: string
    /**
     * Plugins default info...
     * 
     * @default undefined
     */
    plugins?: PluginsDefault
}

interface PluginsDeclaration {
    /**
     * Dts plugin info...
     * 
     * @default undefined
     */
    dts?: Record<string, unknown>
}

interface EntryDeclaration extends EntryBase {
    /**
     * Declaration info...
     */
    declaration: string
    /**
     * Plugins declaration info...
     * 
     * @default undefined
     */
    plugins?: PluginsDeclaration
}

type EntriesOptions = EntryDefault | EntryDeclaration


const options: EntriesOptions[] = [
    /**
     * Honestly here I would expect TypeScript to be smart enough
     * to automatically inffer types based on only one required property (`input`)
     * and picks correct interfaces and all descriptions but I can assume
     * that this is more complex than it sound 
     */
    {
        input: './src/index.ts', 
        output: './dist/index.mjs', 
        // no description or autocomplete 
        plugins: { esbuild: {} },
        // no description or autocomplete 
        name: 'default name',
        type: 'default'
    },

    /**
     * Also again only one required property `declaration' so it would be nice if 
     * TypeScript could automatically infer the whole interface correctly
     */ 
    {
        declaration: './src/types.ts',
        output: './dist/types/index.d.ts',
        format: 'esm',
        // no description or autocomplete 
        plugins: { dts: {} },
        // no description or autocomplete 
        name: 'declaration name',
        type: 'declaration'
    }
]

/**
 * I searched a lot on the net and came across this example https://stackoverflow.com/questions/73155261/how-to-narrow-down-a-generic-type-based-on-object-property-type
 * where `jcalz`describes and gives an example how to narrow the types based on object keys, 
 * but I guess this is the current working solution and doesn't work in all cases, 
 * I also wonder how to do it when the key property is optional and not specified in object?
 */

type ExtractOnProp<T, K extends keyof T, V> =
    T extends unknown ? V extends T[K] ?
    { [P in keyof T]: P extends K ? T[P] & V : T[P] }
    : never : never

type EntriesOptionsPerProp = ExtractOnProp<EntryDefault, 'type', 'default'> |  ExtractOnProp<EntryDeclaration, 'type', 'declaration'> 

function defineConfig(options: EntriesOptionsPerProp[]): EntriesOptionsPerProp[] {
    return options
} 

defineConfig([
    {
        input: './src/index.ts', 
        output: './dist/index.mjs',
        plugins: { esbuild: {} },
        name: 'default name',
        type: 'default'
    },
    {
        declaration: './src/types.ts',
        output: './dist/types/index.d.ts',
        format: 'esm',
        plugins: { dts: {} },
        name: 'declaration name',
        type: 'declaration'
    },
    // does not work if `type` is not defined
    {
        input: './src/index.ts', 
        output: './dist/index.mjs',
        plugins: { esbuild: {} },
        name: 'default name',
    },
])

🙁 Actual behavior

Hi, as discussed in previous issue #56082 and the merged PR, it seems like this area could use some internal improvements.

When we have multiple interfaces that extend the base interface, then the types are not picked up correctly when defining a new array of object unions.

Also, properties from the object do not get description information or offer correct auto-completion which can be confusing.

🙂 Expected behavior

I expect it to offer the correct auto-completion for each object and give the right information when I hover over a property to see the type or description of what that option does.

Additional information about the issue

I mentioned some examples and expectations of behavior in the playground.

[RyanCavanaugh]

Please reduce the repro down to something that can at least fit in one screen; the whole setup here doesn't seem necessary to describe the issue

[ivodolenc]

I intentionally left comments and separate interfaces (because they extends the base one), so that one can see which description is displayed and which is not in the quickinfo after hovering over the property inside object.

The example is actually very simple which can be seen in the playground.

Here are new example:

Playground

// code from playground

interface EntryBase {
  /**
   * base
   */
  type: 'default' | 'declaration'
  output?: string
  format?: string
  name?: string
}

interface PluginsDefault {
  esbuild?: Record<string, unknown>
}

interface PluginsDeclaration {
  dts?: Record<string, unknown>
}

interface EntryDefault extends EntryBase {
  /**
   * default
   */
  input: string
  /**
   * default
   */
  name?: string
  /**
   * default
   */
  plugins?: PluginsDefault
}

interface EntryDeclaration extends EntryBase {
  /**
   * declaration
   */
  input: string
  /**
   * declaration
   */
  plugins?: PluginsDeclaration
}

type EntriesOptions = EntryDefault | EntryDeclaration

const options: EntriesOptions[] = [
  {
    type: 'default', // =>
    input: './src/index.ts', // => no quickinfo when hover
    plugins: { dts: {} }, // => should be an error here, also no quickinfo when hover
    name: 'default name', // => no quickinfo when hover
  },
  {
    type: 'declaration',
    input: './src/types/index.ts', // => no quickinfo when hover
    plugins: { esbuild: {} }, // => should be an error here, also no quickinfo when hover
  },
]

Screen.Recording.2024-09-17.at.10.43.25.mov