Website-Suche

javascript - TypeScript-Typinferenz bei dynamisch zugegriffenen Objekteigenschaften

interface CustomResponse {
    data: string;
    status: number;
    [key: string]: string | number;
}

const RESPONSE_PROPS = {
  DATA: "data",
  STATUS: "status",
};

const response: CustomResponse = {
    data: "test",
    status: 200,
};

let dataWrong: string = response[RESPONSE_PROPS.DATA];
let dataRight: string = response.data;

dataWrong erhält den Fehler

Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'

In Fällen wie oben, wie kann man dataWrong den richtigen Typ in TypeScript ableiten lassen? Ist Type Assertion (bessere Type Guards) der einzige Weg?

Antwort #1

RESPONSE_PROPS.DATA ist als string typisiert. Wenn Sie eine as const-Assertion verwenden (die den Compiler dazu bringt, den String-Literaltyp "data" für RESPONSE_PROPS.DATA beizubehalten), funktioniert es wie erwartet:

interface CustomResponse {
    data: string;
    status: number;
    // [key: string]: string | number; not necessary for the code to work
}

const RESPONSE_PROPS = {
    DATA: "data",
    STATUS: "status",
} as const;

const response: CustomResponse = {
    data: "test",
    status: 200,
};

let dataWrong: string = response[RESPONSE_PROPS.DATA];
let dataRight: string = response.data;

Hinweis: Wenn der Zeichenfolgen-Literaltyp zum Indizieren verwendet wird, benötigen Sie die Index-Signatur eigentlich nicht.

Verwandte Artikel