typescript - Egenskap saknas i typen men krävs i en annan typ?

Försöker fortfarande förstå TypeScript.

Jag försöker skriva ett destrukturerat objekt så här:

const { authError }: {authError: string}  = useRouterQuery()

authError måste vara en sträng för att fungera bra med andra komponenter, men useRouterQuery() använder en annan typ: ParsedUrlQuery.

Så jag får följande TypeScript-fel: Property 'authError' saknas i typen 'ParsedUrlQuery' men krävs i typen '{ authError: string; }'.

Hoppas att någon kan förklara den renaste lösningen på detta.

REDIGERA: ParsedUrlQuery-typen returnerar:

type ParsedUrlQuery = {
    [x: string]: string | string[] | undefined;
}

Svar #1

Från exemplet ovan ser det ut som att ParsedUrlQuery är ett objekt som har nycklar av typen string ([x: string]) och värden som kan vara string, string[] eller undefined.

Som felet nämner, inkluderar den typen inte uttryckligen en authError-nyckel.

Det du kan göra är const { authError }: ParsedUrlQuery=useRouterQuery()

På detta sätt, om objektet som useRouterQuery returnerar har en authError-nyckel, kommer det att destruktureras och ha typen string | string[] | undefined.

Svar #2

Det finns en sak du kan göra - det är typeguard:

type ParsedUrlQuery = {
    [x: string]: string | string[] | undefined;
}

/**
 * Just a mock
 */
const useRouterQuery = () => ({}) as ParsedUrlQuery

const isAuthorError = (arg: any): arg is { authError: NonNullable<ParsedUrlQuery[string]> } => typeof arg?.authError === 'string'

const result = useRouterQuery()

if (isAuthorError(result)) {
    /**
     * Now you can be sure that authError is either string or string[]
     */
    const { authError } = result
}


const { authError }: ParsedUrlQuery = useRouterQuery()

Det finns inget annat sätt som TS-kompilatorn kommer att ta reda på om authError existerar eller inte.

Här kan du hitta mer om typvakter