In javascript, accessing object value via obj.field can be done by obj['field'] too. But produces error in typescript.
function F() {
const obj = { field: "firstname", title: "First Name", value: 10 };
let field = "field"
console.log(obj[field]); // <-- Typescript error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ field: string; title: string; value: number; }'
}
How can I cast obj to resolve typescript error?
You can explicitly annotate field as follows:
function F() {
const obj = { field: 'firstname', title: 'First Name', value: 10 };
const field: keyof typeof obj = 'field'; // field is narrowed to be a known key of obj instead of 'string'
console.log(obj[field]); // no type error here
}
Your issue is that you're storing the field variable in a mutable variable (you're using let to assign). That means the type-engine can not assume that the type of field is Literal<"field">, but rather just string, of which obj doesn't have a typing.
To remedy the issue, either write const field = "field", or add a manual typing to it, to limit the field variable's possible features:
function F() {
const obj = { field: "firstname", title: "First Name", value: 10 };
let field = "field" as "field" | "title" | "value"
console.log(obj[field]); // <-- No error
}
If you don't want to re-write all the keys, you can do as @Hoopra says, and just use the keyof typeof obj syntax:
function F() {
const obj = { field: "firstname", title: "First Name", value: 10 };
let field = "field" as keyof typeof obj
console.log(obj[field]); // <-- No error
}
TypeScript is doing it job well and protecting you from accessing a property that may not exist anymore by the time of execution.
let field = "field"
TS is inferring the type to be string, and therefore you may be accessing something on obj that doesn't exist. The reason is because let declares a value, and someone could come and add a line to change the value of field. And so, the compiler has no assurance that the value remains "field".
One way to fix this, and understand why TS does that, is to change let field to be const field. A constant doesn't change and so TS takes this into account and will allow you do to this.
If you need field to be dynamic, you could also do something like the following;
let field: 'field' | 'title' = "field"
This way the compiler knows that obj[field] has the type string, since both keys refer to a string value.
let and I can't write any literals.
console.log(obj[field as keyof typeof obj] )