Angular – strict: Type unions

June 4, 2024

I have defined the following types

export interface LanguageEditInfoDto {
    canEdit: boolean;
    label: string;
    useDudenLang: boolean;
}
export type UILanguageEditInfoDto = LanguageEditInfoDto & {
    isFormValid: boolean;
};

and I have defined the following function:

function setLanguages(languages: Record<string, LanguageEditInfoDto>) {
    const langState: Record<string, UILanguageEditInfoDto> = {};
    for (const langCode in languages) {
        langState[langCode] = {
            isFormValid: true,
            ...languages[langCode],
        };
    }
}

Why do I get the following error for langState[langCode]? AND how to resolve it?

TS2322: Type
{   canEdit?: boolean | undefined;   label?: string | undefined;   useDudenLang?: boolean | undefined;   isFormValid: true; }
is not assignable to type UILanguageEditInfoDto
Type
{   canEdit?: boolean | undefined;   label?: string | undefined;   useDudenLang?: boolean | undefined;   isFormValid: true; }
is not assignable to type LanguageEditInfoDto

According to the definition none of the attributes are optional. Therefore the assertion is IMHO wrong.

>Solution :

You have noUncheckedIndexedAccess enabled in your project.
You can fix your issue by asserting non null :

    langState[langCode] = {
                    isFormValid: true,
                    ...languages[langCode]!, // here
                };
            }

Or you could keep typesafty by using Object.entries

for (const [langCode, language] of Object.entries(languages)) {
    langState[langCode] = {
                    isFormValid: true,
                    ...language,
                };
            }