Comment appliquer le type pour les membres indexés des objets Typescript

Le langage de programmation TypeScript est basé sur JavaScript, fortement typé, orienté objet et compilé. Le langage est amélioré avec des outils tels que le typage statique, les classes et les interfaces, qui facilitent la détection précoce des erreurs et rendent JavaScript plus gérable. Une fonctionnalité de TypeScript est la possibilité d'appliquer les types de membres indexés d'un objet, et ce processus est également connu sous le nom de signature d'index.

Une signature d'index est un ensemble de paires clé-valeur qui décrivent les nombreuses propriétés qu'un objet peut avoir. Spécifiez le type du nom de la propriété et le type de la valeur de la propriété en utilisant respectivement les valeurs et les clés. Pour appliquer le type de propriétés d'un objet, les utilisateurs peuvent profiter de la fonctionnalité de signature d'index de TypeScript.

Les signatures d'index peuvent appliquer efficacement certaines propriétés d'objet, mais peuvent également rendre le code difficile à comprendre et à maintenir. Par conséquent, il est très important de n’utiliser les signatures d’index que lorsque cela est nécessaire.

Grammaire

let objectName: {
   [key: string]: string
}

Dans la syntaxe ci-dessus, 'objectName' est le nom de notre objet et nous forçons la clé à être de type chaîne et la valeur à être une chaîne.

Exemple 1

Dans cet exemple, nous avons deux interfaces, Personne et Répertoire téléphonique. L'interface Person définit la structure d'un objet personne, comprenant deux attributs : nom (chaîne) et âge (numéro). L'interface PhoneBook définit une signature d'index en utilisant le type de chaîne comme clé et l'interface Personne comme valeur. Cela signifie que tout objet qui implémente l'interface PhoneBook ne peut avoir que des propriétés dont le type de clé est String et dont le type de valeur est Person.

Ensuite, nous définissons une variable phoneBook de type PhoneBook et lui attribuons un objet vide. Ensuite, nous ajoutons quelques entrées au répertoire où les clés doivent être des noms et les valeurs doivent être des objets Personne. Enfin, nous vérifions via le journal de la console que si nous essayons de mettre un autre type de variable en plus du type ci-dessus, le compilateur signalera une erreur.

// Person interface
interface Person {
   name: string
   age: number
}

// PhoneBook interface
interface PhoneBook {
   [key: string]: Person
}

let phoneBook: PhoneBook = {}

phoneBook['Person 1'] = { name: 'ABC', age: 30 }
phoneBook['Person 2'] = { name: 'XYZ', age: 25 }
phoneBook['Person 3'] = { name: 'MNO', age: 10 }

console.log(phoneBook)

Une fois compilé, il générera le code JavaScript suivant −

var phoneBook = {};
phoneBook['Person 1'] = { name: 'ABC', age: 30 };
phoneBook['Person 2'] = { name: 'XYZ', age: 25 };
phoneBook['Person 3'] = { name: 'MNO', age: 10 };
console.log(phoneBook);

Sortie

Le code ci-dessus produira la sortie suivante -

{ 'Person 1': { name: 'ABC', age: 30 },
  'Person 2': { name: 'XYZ', age: 25 },
  'Person 3': { name: 'MNO', age: 10 } }

Exemple 2

Dans cet exemple, nous avons une interface Product, qui définit la structure d'un objet produit avec deux propriétés : nom (chaîne) et prix (numéro). Ensuite, nous avons une autre interface ShoppingCart qui représente une signature d'index en utilisant un type numérique comme clé et l'interface Product comme valeur. Tout objet qui implémente l'interface ShoppingCart ne peut avoir que des propriétés avec un type de clé Number et un type de valeur Product.

Ensuite, nous définissons un panier variable de type ShoppingCart et lui attribuons un objet vide. Ensuite, nous ajoutons quelques entrées au panier où la clé doit être l'identifiant du produit et la valeur doit être l'objet produit. Nous pouvons voir que les articles sont ajoutés correctement au panier, si la valeur n'est pas de type Produit ou si l'objet produit manque l'une des propriétés définies dans l'interface Produit, une erreur se produira.

interface Product {
   name: string
   price: number
}

// ShoppingCart interface
interface ShoppingCart {
   [key: number]: Product
}

let cart: ShoppingCart = {}

cart[1] = { name: 'Shirt', price: 20 }
cart[2] = { name: 'Pants', price: 30 }
cart[3] = { name: 'Shoes', price: 40 }

console.log(cart[1])
console.log(cart[2])
console.log(cart[3])

Une fois compilé, il générera le code JavaScript suivant −

var cart = {};
cart[1] = { name: 'Shirt', price: 20 };
cart[2] = { name: 'Pants', price: 30 };
cart[3] = { name: 'Shoes', price: 40 };
console.log(cart[1]);
console.log(cart[2]);
console.log(cart[3]);

Sortie

Le code ci-dessus produira la sortie suivante -

{ name: 'Shirt', price: 20 }
{ name: 'Pants', price: 30 }
{ name: 'Shoes', price: 40 }

Ces exemples illustrent comment utiliser les signatures d'index pour appliquer les types de propriétés d'un objet. Les signatures d'index sont une fonctionnalité puissante qui peut vous aider à écrire un code plus robuste et plus maintenable, mais il est important de les utiliser judicieusement et uniquement lorsque cela est nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!