Typescript type inference on dynamically accessed object properties

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?

Titian Cernicova-Dragomir · Accepted Answer · 2019-06-13 10:18:53Z

2

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.

answered Jun 13, 2019 at 10:18

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tamil Over a year ago

Wow this worked.. May I get some doc reference/article on this const type inference?

Titian Cernicova-Dragomir Over a year ago

@Tamil typescriptlang.org/docs/handbook/release-notes/…

Tamil Over a year ago

another one blog.logrocket.com/…

Collectives™ on Stack Overflow

Typescript type inference on dynamically accessed object properties

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related