Comment résoudre l'erreur "Type 'String' cannot be used as an index type in TypeScript"

L'erreur TypeScript "Type 'String' cannot be used as an index type" se produit lorsque nous utilisons le type String au lieu de string (s minuscules). Pour résoudre cette erreur, assurez-vous d'utiliser le type string avec des s minuscules dans votre code TypeScript.

Voici un exemple de la façon dont l'erreur se produit.

const obj = {
  name: 'James Doe',
}


// 👇️ using String (capital S)
const str: String = 'name';

// ⛔️ Error: Type 'String' cannot be
// used as an index type.ts(2538)
obj[str]

Nous avons utilisé le type d'objet String, non primitif, pour saisir la variable str, ce qui a provoqué l'erreur.

Pour résoudre ce problème, utilisez toujours le type string lorsque vous tapez des chaînes de caractères avec TypeScript.

interface Employee {
  name: string; // 👈️ use string lowercase s
}

const obj: Employee = {
  name: 'James Doe',
};

const str = 'name';

console.log(obj[str]); // 👉️ "James Doe"

Nous avons utilisé le type primitif string qui a résolu l'erreur.

L'erreur est due à la différence entre les types primitifs Nombre, Chaîne et Booléen et les types non primitifs Nombre, Chaîne, Booléen, Objet, etc.

Les types non primitifs sont des objets et ne doivent jamais être utilisés pour saisir des valeurs en TypeScript.

La documentation sur les meilleures pratiques de TypeScript recommande de ne jamais utiliser les objets non primitifs Number, String, Boolean, Symbol ou Object lorsque vous saisissez des valeurs dans votre code TypeScript.

Vous devriez plutôt utiliser les types Number, String, Boolean, Symbol et Record.

Le message d'erreur signifie que vous ne pouvez pas utiliser le type String lorsque vous essayez d'indexer un objet dans TypeScript.

interface Employee {
  key: String;
}

const obj1: Employee = {
  key: 'name',
};

const obj2 = {
  name: 'James Doe',
};

// ⛔️ Error: Type 'String' cannot be used as an index type.ts(2538)
obj2[obj1.key]

L'extrait de code ci-dessus montre que l'utilisation du type d'objet String non primitif entraîne une erreur, car il ne peut pas être utilisé pour indexer l'objet sur une propriété spécifique.

Pour contourner ce problème, il faut utiliser le type primitif String.

interface Employee {
  key: string;
}

const obj1: Employee = {
  key: 'name',
};

const obj2 = {
  name: 'James Doe',
};

// 👇️ "James Doe"
console.log(obj2[obj1.key as keyof typeof obj2]);

Conclusion

L'erreur TypeScript "Type 'String' cannot be used as an index type" se produit lorsque nous utilisons le type String au lieu de string (s minuscules). Pour résoudre cette erreur, assurez-vous d'utiliser le type string avec des s minuscules dans votre code TypeScript.