TypeScript: Lỗi index signature là gì “No index signature with a parameter of type ‘string’ was found on type”

Trong TS, khi chúng ta cố gắng truy cập một object như sau

const myObject = {
 foo: 1,
 bar: 2,
}

Dùng hàm Object.keys để iterate qua tất cả các keys của myObject, chúng ta có thể làm như sau:

Object.keys(myObject).forEach((key) => {
  console.log(myObject[key]);
});

TS quăng cho chúng ta một lỗi như sau:

error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ foo: number; bar: number; }'. No index signature with a parameter of type 'string' was found on type '{ foo: number; bar: number; }'.

Và tôi cũng gặp lỗi này thường xuyên, một lỗi dài dòng khi mà ko bao giờ gặp với Javascript. Đặc biệt trong TS, khi mà các type được quản lý rất chặt chẽ thì khi gặp một số lỗi như này chúng ta nên tìm hiểu lý do và fix nó triệt để. Lý do chính ở đây là do chúng ta nên cố truy cập một key trong object mà TS nghĩ là ko đúng type. TS đang cố gắng bảo vệ chúng ta haha 😀

Lỗi trên xảy ra là do khi chúng ta muốn truy cập một object bằng key nhưng key này có kiểu dữ liệu là string. Nhưng trong trường hợp này TS chỉ cho phép key ở đây là foo hoặc bar. Nên biến key ko đúng type.

Để fix lỗi này chúng ta có hai cách là:


Cách 1. Chúng ta ép kiểu key về là foo | bar.

type Key = keyof typeof myObject;

Object.keys(myObject).forEach((key) => {
  console.log(myObj[key as Key]);
});

Cách 2. Chúng ta viết một hàm getObjectKeys

function getObjectKeys<T extends object>(obj: T): Array<keyof T> {
  return Object.keys(obj) as Array<keyof T>;
}

getObjectKeys(myObject).forEach((key) => {
  console.log(myObject[key]);
});

Happy coding! TS quá thần thánh phải ko các bạn.

Leave a Reply

Your email address will not be published. Required fields are marked *