动态访问的对象属性的Typescript类型推断

Question

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 gets the error

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

In cases like above, how to get dataWrong infer right type in typescript? Is type assertion (better type guards) the only way?

Answer 1

RESPONSE_PROPS.DATA is typed as string if you use an as const assertion (which will make the compiler keep the string literal type "data" for RESPONSE_PROPS.DATA ) it works as expected:

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;

Note: If the string literal type is used to index you don't really need the index signature.