typescript - How to generate generic type that allows to set partial defaults to given type? - Stack Overflow

admin管理员组

文章数量:1122832

I need to generate correct types for genStruct function, I understand how to make the function work but struggling to create correct types.

Here is my function

type Breakpoint = "sm" | "md" | "lg"
export const genStruct = <T extends object>(
    defaultValue: T,
    breakpoints: Breakpoint[],
): Partial<Responsive<T>> => { // Partial to allow omission of some keys
    return breakpoints.reduce((acc, breakpoint) => {
        acc[breakpoint] = Object.keys(defaultValue).length === 0
            ? ('' as any)
            : { ...defaultValue }
        return acc
    }, {} as Partial<Responsive<T>>)
}
type NestedProps = {
    rows: string
    cols: string
}
type Responsive<T> = {
    [key in Breakpoint]: T
}
type Default = Responsive<NestedProps>
const some_value: Default = {
    sm: {
        rows: '',
        cols: '',
    },
    ...genStruct({
        rows: '',
        cols: '',
    }, ['md', 'lg'])
}

This is error generated by typescript

Type '{ sm: { rows: string; cols: string; }; md?: { rows: string; cols: string; } | undefined; lg?: { rows: string; cols: string; } | undefined; }' is not assignable to type 'Default'. Types of property 'md' are incompatible. Type '{ rows: string; cols: string; } | undefined' is not assignable to type 'NestedProps'. Type 'undefined' is not assignable to type 'NestedProps'.

I need to generate correct types for genStruct function, I understand how to make the function work but struggling to create correct types.

Here is my function

type Breakpoint = "sm" | "md" | "lg"
export const genStruct = <T extends object>(
    defaultValue: T,
    breakpoints: Breakpoint[],
): Partial<Responsive<T>> => { // Partial to allow omission of some keys
    return breakpoints.reduce((acc, breakpoint) => {
        acc[breakpoint] = Object.keys(defaultValue).length === 0
            ? ('' as any)
            : { ...defaultValue }
        return acc
    }, {} as Partial<Responsive<T>>)
}
type NestedProps = {
    rows: string
    cols: string
}
type Responsive<T> = {
    [key in Breakpoint]: T
}
type Default = Responsive<NestedProps>
const some_value: Default = {
    sm: {
        rows: '',
        cols: '',
    },
    ...genStruct({
        rows: '',
        cols: '',
    }, ['md', 'lg'])
}

This is error generated by typescript

Type '{ sm: { rows: string; cols: string; }; md?: { rows: string; cols: string; } | undefined; lg?: { rows: string; cols: string; } | undefined; }' is not assignable to type 'Default'. Types of property 'md' are incompatible. Type '{ rows: string; cols: string; } | undefined' is not assignable to type 'NestedProps'. Type 'undefined' is not assignable to type 'NestedProps'.

• typescript
• types

Share Improve this question Follow edited Nov 21, 2024 at 18:56 Andrius Solopovas asked Nov 21, 2024 at 17:15 Andrius SolopovasAndrius Solopovas 1,0571717 silver badges4747 bronze badges 2

• There seem to be multiple errors here unrelated to what you're asking about; could you please edit your code to be a minimal reproducible example without typos, undeclared types, etc (like, is defaultSetting really a Setting? Where's it's prop prop?). Also it seems you're asking two separate questions (two different errors happening in two different places). Please edit this to ask a single primary question, or it risks being closed with "Needs more focus: This question currently includes multiple questions in one. It should focus on one problem only." – jcalz Commented Nov 21, 2024 at 17:34
• I am sorry for my sloppiness this year I am coding on average 10 to 12 hours a day, my brain goes crazy – Andrius Solopovas Commented Nov 21, 2024 at 18:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Ok I have the solution

export const genStruct = <T extends object, K extends Breakpoint>(
    defaultValue: T,
    breakpoints: K[],
): { [P in K]: T } => {
    return breakpoints.reduce((acc, breakpoint) => {
        acc[breakpoint] = { ...defaultValue };
        return acc;
    }, {} as { [P in K]: T });
};

本文标签： typescriptHow to generate generic type that allows to set partial defaults to given typeStack Overflow