Nuxt•2d ago

Describing type for overriden config

Hi All, In a Nuxt app that I work on we rely on config overriding and it works well with Typescript. Unfortunately I encountered problem with describing type for array configs that'll get get overriden. This is the type for the config:

export interface InputConfig {
  inputLengths: number[]
}

export interface InputConfig {
  inputLengths: number[]
}

This is the initial value for it:

export default {
  inputLengths: [8]
} satisfies InputConfig

export default {
  inputLengths: [8]
} satisfies InputConfig

And this is the override:

export default {
  inputLengths: () => [8, 13]
} satisfies RecursivePartial<InputConfig>

export default {
  inputLengths: () => [8, 13]
} satisfies RecursivePartial<InputConfig>

On the override file, I get error from TS saying:

Vue: Type () => number[] is not assignable to type (number | undefined)[]

Vue: Type () => number[] is not assignable to type (number | undefined)[]

I looked into Defu type util, but I have trouble applying it. One othe approach that was suggested is:

export interface InputConfig {
  inputLengths: number[] | (() => number[])
}

export interface InputConfig {
  inputLengths: number[] | (() => number[])
}

but it changes the type of the actual config and forces additional code around that 😦 Any help would be appreciated.

2 Replies

kapa.ai•2d ago

Hi @grouchymachine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your question about describing types for overridden configs in Nuxt, particularly for array configurations. The knowledge sources don't contain information about the specific typing issue you're encountering with array overrides. However, I can provide some general information about Nuxt configuration and TypeScript support that might be helpful: 1. Nuxt supports TypeScript out of the box and provides auto-generated types for better IDE support. This is mentioned in the Nuxt TypeScript documentation (https://nuxt.com/docs/guide/concepts/typescript). 2. Nuxt uses a custom merging strategy for the AppConfig within layers of your application. This strategy is implemented using a Function Merger, which allows defining a custom merging strategy for every key in app.config that has an array as a value. This is described in the App Config documentation (https://nuxt.com/docs/guide/directory-structure/app-config#merging-strategy). 3. For typing app config, Nuxt tries to automatically generate a TypeScript interface from the provided app config. You can also manually type it by extending the AppConfigInput or AppConfig interfaces. This is explained in the App Config documentation (https://nuxt.com/docs/guide/directory-structure/app-config#typing-app-config). Unfortunately, these sources don't provide a direct solution to your specific issue with array config overrides. You might need to explore Nuxt's type utilities further or consider reaching out to the Nuxt community forums for more specific guidance on this particular use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@545221283663577089> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Describing type for overriden config