Tapuscrit - signature d'index

Les signatures d'index sont une fonctionnalité puissante de TypeScript qui nous permet d'utiliser des noms de propriétés dynamiques dans les objets et les classes. Habituellement, nous définissons des propriétés fixes dans des objets ou des classes, mais nous devons parfois traiter des cas avec des noms de propriétés dynamiques. À l’heure actuelle, les signatures d’index sont utiles.

Dans cet article de blog technique, nous présenterons l'utilisation et les cas d'utilisation des signatures d'index, montrerons comment définir des interfaces et des classes avec des signatures d'index, et démontrerons comment utiliser les signatures d'index pour accéder aux propriétés d'objet et gérer les données avec des noms de propriété dynamiques. Nous abordons également certaines considérations sur les signatures d'index, telles que l'ordre des signatures d'index et l'utilisation du modificateur readonly.

J'espère que cet article de blog vous a aidé à comprendre et à appliquer la fonctionnalité de signature d'index dans TypeScript. Si vous êtes intéressé par les fonctionnalités avancées et le système de types de TypeScript, les signatures d'index sont un sujet important à étudier et à explorer en profondeur. Bonne écriture !

1 Aperçu des signatures d'index

Dans TypeScript, les signatures d'index sont un moyen de définir des types d'objets qui nous permettent d'accéder aux propriétés des objets en utilisant des chaînes ou des nombres comme index.

1.1 Définition et fonction de la signature d'index

Les signatures d'index sont définies avec la syntaxe suivante :

{
    
    
    [index: string]: type;
}

{
    
    
    [index: number]: type;
}

Parmi eux, indexse trouve le nom de l'index spécifié, qui peut être stringou numbertype ; typeil indique le type de la valeur correspondant à l'index.

Le rôle de la signature d'index est de nous permettre d'ajouter et d'accéder dynamiquement aux propriétés de l'objet. En utilisant des signatures d'index, nous pouvons manipuler en toute sécurité les propriétés des objets même lorsque les noms de propriétés spécifiques ne peuvent pas être déterminés au moment de la compilation.

1.2 Différence entre l'index de chaîne et l'index numérique

Indexation de chaîne : utilisez une chaîne comme index pour accéder aux propriétés d'un objet. Ce type d'indexation est généralement utilisé lorsque des attributs doivent être ajoutés dynamiquement, comme le traitement de données obtenues à partir d'une source de données externe. L'exemple de code est le suivant :

interface MyObject {
    
    
    [key: string]: string;
}

const obj: MyObject = {
    
    };
obj["name"] = "John";
obj["age"] = "30";

console.log(obj["name"]); // 输出: John

Indexation numérique : utilisez des nombres comme index pour accéder aux propriétés des objets. Ce type d'indexation est souvent utilisé pour traiter des collections de type tableau, telles que des données stockées dans l'ordre. L'exemple de code est le suivant :

interface MyArray {
    
    
    [index: number]: string;
}

const arr: MyArray = [];
arr[0] = "apple";
arr[1] = "banana";

console.log(arr[0]); // 输出: apple

Il convient de noter que lors de l'utilisation de signatures d'index, les index de chaîne et les index numériques ne peuvent pas être définis en même temps. Nous devons choisir un type d'index pour définir comment accéder aux propriétés de l'objet ou du tableau.

Pour résumer, les signatures d'index dans TypeScript nous permettent d'ajouter et d'accéder dynamiquement aux propriétés des objets via des index de chaîne ou de nombres. Selon les besoins spécifiques, nous pouvons choisir le type d'index approprié pour définir la méthode d'accès aux propriétés de l'objet ou du tableau.

Signature d'index à 2 chaînes

2.1 Syntaxe et annotations de type pour les signatures d'index de chaîne

Les signatures d'index de chaîne sont un moyen de définir la manière dont les propriétés dynamiques sont accessibles dans les types d'objet. Il permet d'accéder aux propriétés des objets en utilisant des chaînes comme index.

Dans TypeScript, nous pouvons définir des signatures d'index de chaîne en utilisant la syntaxe suivante :

interface SomeObject {
    
    
  [key: string]: valueType;
}

Parmi eux, keyse trouve un nom de variable, indiquant le nom de l'attribut ; valueTypeindiquant le type de valeur correspondant à l'attribut.

Par exemple, nous pouvons créer un type d'objet avec une signature d'index de chaîne :

interface Person {
    
    
  name: string;
  age: number;
  [key: string]: string | number;
}

Dans le code ci-dessus, Personl'interface définit namedes agepropriétés, et définit également une signature d'index de chaîne, permettant d'ajouter dynamiquement d'autres propriétés. Les noms de clé de ces propriétés doivent être des chaînes et les valeurs peuvent être des chaînes ou des nombres.

2.2 Utilisation des signatures d'index de chaîne pour accéder aux propriétés des objets

En utilisant la signature d'index de chaîne, nous pouvons accéder aux propriétés de l'objet via la chaîne. Par exemple:

const person: Person = {
    
    
  name: 'John',
  age: 25,
};

console.log(person.name); // 输出：'John'
console.log(person['age']); // 输出：25

person.gender = 'male'; // 添加新属性
console.log(person.gender); // 输出：'male'

Dans l'exemple ci-dessus, nous avons d'abord créé un Personobjet de type personet défini nameles propriétés et age. Ensuite, on accède aux propriétés de l’objet via des points et des crochets. Enfin, nous avons ajouté une nouvelle propriété avec une signature d'index de chaîne gender.

2.3 Créer la structure de données de l'objet dictionnaire et du nom de clé dynamique

Les signatures d'index de chaîne sont souvent utilisées pour créer des objets de dictionnaire ou des structures de données avec des noms de clés dynamiques. Par exemple:

interface Dictionary {
    
    
  [key: string]: number;
}

const dict: Dictionary = {
    
    
  'apple': 1,
  'banana': 2,
};

console.log(dict['apple']); // 输出：1
console.log(dict['banana']); // 输出：2

Dans le code ci-dessus, nous définissons une Dictionaryinterface dont les clés sont des chaînes et les valeurs sont des nombres. Ensuite, nous créons un objet dictionnaire dictet définissons 'apple'et 'banana'comme clés, correspondant respectivement aux valeurs 1 et 2. Avec la signature d'index de chaîne, nous pouvons facilement accéder et manipuler les propriétés des objets du dictionnaire.

Les signatures d'index de chaîne offrent un moyen flexible d'accéder aux propriétés d'un objet, en particulier dans les situations où les propriétés doivent être ajoutées dynamiquement, telles que la création d'objets de dictionnaire ou de structures de données avec des noms de clé dynamiques.

3 signatures d'index numériques

Les signatures d'index numériques sont une méthode d'accès aux propriétés des objets en utilisant des nombres comme index dans la programmation. Cela nous permet d'ajouter dynamiquement des attributs, rendant le traitement des données plus flexible et plus pratique.

3.1 Syntaxe et annotations de type pour les signatures d'index numérique

La syntaxe des signatures d'index numériques est similaire à celle des signatures d'index de chaîne, mais utilise des nombres comme noms de clé. Dans TypeScript, les signatures d'index numérique peuvent être définies à l'aide de la syntaxe suivante :

interface MyObject {
    
    
  [index: number]: string;
}

Le code ci-dessus indique que MyObjectl'interface possède une signature d'index numérique avec des noms de clés de nombres et de valeurs de chaînes.

Si vous devez annoter la signature d'index numérique, vous pouvez utiliser la méthode suivante :

interface MyObject {
    
    
  [index: number]: string | number;
}

Le code ci-dessus indique que MyObjectla valeur de la signature d'index numérique de l'interface peut être une chaîne ou un nombre.

3.2 Utilisation des signatures d'index numérique pour accéder aux propriétés des objets

L'accès aux propriétés d'objet à l'aide de signatures d'index numérique est similaire à l'accès normal aux propriétés. Par exemple, supposons que nous ayons un objet myObjcontenant des signatures indexées numériquement :

const myObj: MyObject = {
    
    
  0: "zero",
  1: "one",
  2: "two"
};

On peut accéder aux propriétés d'un objet par index numérique :

console.log(myObj[0]); // 输出：zero
console.log(myObj[1]); // 输出：one
console.log(myObj[2]); // 输出：two

3.3 Structures de données pour la gestion des noms de propriétés dynamiques

Les signatures d'index numérique sont utiles lorsque vous travaillez avec des structures de données comportant des noms de propriétés dynamiques. Par exemple, nous pouvons utiliser la signature d'index numérique pour créer un objet dictionnaire où les clés sont des chaînes et les valeurs sont de n'importe quel type :

interface Dictionary {
    
    
  [key: string]: any;
}

const myDict: Dictionary = {
    
    
  name: "John",
  age: 25,
  gender: "male"
};

console.log(myDict.name); // 输出：John
console.log(myDict.age); // 输出：25
console.log(myDict.gender); // 输出：male

Dans le code ci-dessus, Dictionaryl'interface définit une signature d'index numérique, afin que myDictl'objet puisse accéder à la propriété correspondante en fonction du nom de clé de chaîne.

Les signatures d'index numériques offrent un moyen flexible de gérer les structures de données avec des noms de propriétés dynamiques, ce qui est très utile en programmation.

4 Considérations pour les signatures d'index

Les signatures d'index doivent être prises en compte lors de la programmation. Voici quelques considérations courantes :

4.1 L'ordre des signatures d'index

Lors de l'utilisation de signatures d'index numérique, l'ordre des attributs est important. Les propriétés sont accessibles dans l'ordre dans lequel elles ont été ajoutées, donc si la même propriété est attribuée plusieurs fois, la dernière affectation écrasera la valeur précédente.

Par exemple, considérons l'extrait de code suivant :

interface MyObject {
    
    
  [index: number]: string;
}

let obj: MyObject = {
    
    };
obj[0] = "A";
obj[1] = "B";
obj[0] = "C";

console.log(obj); // 输出 { 0: "C", 1: "B" }

Dans l'exemple ci-dessus, nous attribuons d'abord la valeur "A" à l'attribut d'index 0, puis attribuons la valeur "B" à l'attribut d'index 1, et enfin attribuons la valeur "C" à l'attribut d'index 0. Puisque la dernière affectation écrase la valeur précédente, le résultat est { 0 : "C", 1 : "B" }.

4.2 Utilisation du modificateur readonly

Des modificateurs peuvent être utilisés readonlypour limiter l'écriture des signatures d'index. Les modifications des propriétés indexées peuvent être évitées en marquant la signature d'index en lecture seule.

interface MyObject {
    
    
  readonly [index: number]: string;
}

let obj: MyObject = {
    
     0: "A", 1: "B" };

// 下面的代码将会报错
obj[0] = "C";

Dans l'exemple ci-dessus, nous avons utilisé readonlyun modificateur pour marquer la signature d'index en lecture seule. Par conséquent, les opérations qui tentent de modifier les propriétés indexées entraîneront des erreurs de compilation.

4.3 Éviter les erreurs de type et les problèmes potentiels

Il faut veiller à éviter les erreurs de frappe et les problèmes potentiels lors de l'utilisation de signatures d'index numériques. Étant donné que les signatures d'index numériques peuvent accepter des nombres arbitraires comme index, des situations inattendues peuvent survenir.

Par exemple, considérons l'extrait de code suivant :

interface MyObject {
    
    
  [index: number]: string;
}

let obj: MyObject = {
    
     0: "A", 1: "B" };

console.log(obj["2"]); // 输出 undefined

Dans l'exemple ci-dessus, nous essayons d'accéder à la propriété à l'index "2", mais comme la propriété n'existe pas, le résultat est undefined. En effet, la signature d'index numérique ne peut accepter que des nombres comme index et sera renvoyée si un index non numérique est transmis dans undefined.

Pour éviter de telles erreurs de type et problèmes potentiels, il est recommandé de taper check lors de l'utilisation de signatures d'index numérique et de s'assurer que le cas où l'index n'existe pas est traité correctement.

5 avantages et scénarios applicables de la signature d'index

5.1 Améliorer la flexibilité et l'évolutivité du code

Un avantage majeur des signatures d’index en programmation est qu’elles augmentent la flexibilité et l’évolutivité du code. Voici quelques instructions :

Noms de propriétés dynamiques : à l'aide de signatures d'index, les propriétés d'un objet sont accessibles par numéro sous forme d'index. Cela signifie que vous n'avez pas besoin de définir tous les noms de propriétés possibles à l'avance, mais que vous pouvez ajouter et accéder dynamiquement aux propriétés selon vos besoins. Cela rend le traitement des données plus flexible et capable de s’adapter aux différents besoins et changements.
Extensibilité : lorsque de nouveaux attributs doivent être ajoutés, l'utilisation de signatures d'index peut éviter de modifier le code existant. Au lieu de cela, ajoutez simplement de nouvelles propriétés. Cela réduit les coûts de maintenance du code et facilite son extension et sa réutilisation.
Intégration avec des sources de données externes : les signatures d'index peuvent également aider à intégrer des ensembles de résultats provenant de sources de données externes, telles que des bases de données ou des API, dans votre code. Si les données renvoyées par une source de données externe comportent des noms de clé dynamiques, les signatures d'index facilitent l'accès et la manipulation des données.

Les signatures d'index offrent un moyen flexible et extensible de gérer le cas des noms de propriétés dynamiques. Il augmente la flexibilité de votre code pour s'adapter aux besoins changeants et permet une intégration facile avec des sources de données externes.

5.2 Cas d'utilisation pratiques traitant de dictionnaires, de cartes et de structures de données dynamiques

Les signatures d'index présentent de nombreux avantages et scénarios applicables lorsqu'il s'agit de dictionnaires, de cartes et de structures de données dynamiques. Voici quelques cas d’utilisation pratiques :

Noms de propriétés dynamiques : utilisez des signatures d'index pour ajouter dynamiquement des propriétés aux objets au moment de l'exécution et utilisez des nombres comme noms de propriétés. Ceci est utile pour créer des propriétés basées sur différentes conditions ou entrées.

Exemple:

interface DynamicObject {
    
    
  [key: number]: string;
}

const obj: DynamicObject = {
    
    };
obj[0] = 'value 1';
obj[1] = 'value 2';

console.log(obj[0]); // 输出: "value 1"

Gestion des données avec des clés inconnues : lorsque vous devez travailler avec des données avec des clés inconnues, les signatures d'index offrent un moyen flexible d'accéder aux données et de les manipuler. Il permet d'accéder aux valeurs directement par index numérique sans connaissance préalable de tous les noms de clés possibles.

Exemple:

interface Dictionary {
    
    
  [key: string]: any;
}

function processDictionary(dict: Dictionary) {
    
    
  for (const key in dict) {
    
    
    console.log(key, dict[key]);
  }
}

const data = {
    
     name: 'John', age: 25 };
processDictionary(data);
// 输出:
// name John
// age 25

Extension des types existants : les signatures d'index peuvent également être utilisées pour étendre les types existants afin de gérer des propriétés supplémentaires. Ceci est utile pour ajouter de nouvelles propriétés sans modifier la définition de type d'origine.

Exemple:

interface ExistingType {
    
    
  [key: string]: any;
}

interface ExtendedType extends ExistingType {
    
    
  additionalProp: number;
}

const obj: ExtendedType = {
    
     additionalProp: 42 };
obj.someProperty = 'value';

console.log(obj.additionalProp); // 输出: 42
console.log(obj.someProperty); // 输出: "value"

Il convient de noter qu'il existe également des problèmes potentiels liés à l'utilisation des signatures d'index, tels que l'incertitude de l'ordre des index, les erreurs de type et d'éventuels conflits de noms. Par conséquent, vous devez être prudent lorsque vous utilisez la signature d’index et vous assurer de suivre les meilleures pratiques pour éviter les problèmes.

6 Résumé

Dans cet article de blog, nous avons approfondi la fonctionnalité de signature d'index dans TypeScript. Les signatures d'index nous fournissent des outils puissants pour gérer les noms de propriétés dynamiques, rendant notre code plus flexible et extensible.

Les signatures d'index de chaîne nous permettent d'utiliser des clés de type chaîne pour accéder aux propriétés des objets, tandis que les signatures d'index numérique utilisent des clés de type numérique. Nous pouvons choisir le type de signature d'index approprié en fonction de nos besoins.

Nous montrons, à travers un exemple de code, comment définir des interfaces et des classes avec des signatures d'index, et montrons des cas d'utilisation pratiques d'utilisation de signatures d'index pour accéder aux propriétés d'objet et gérer des structures de données avec des noms de clés dynamiques.

Enfin, nous résumons les avantages et les scénarios applicables des signatures d'index. Les signatures d'index offrent un moyen flexible de gérer les noms de propriétés dynamiques et sont utiles pour travailler avec des dictionnaires, des cartes et d'autres structures de données dynamiques.

J'espère que grâce à cet article de blog, vous aurez une compréhension plus approfondie des signatures d'index dans TypeScript et pourrez les appliquer à vos projets réels. Si vous êtes intéressé par les fonctionnalités avancées et le système de types de TypeScript, les signatures d'index sont un sujet très précieux qui mérite une étude et une exploration plus approfondies.

Je vous souhaite un bon codage tout en utilisant les signatures d'index, et j'attends avec impatience vos futurs projets tirant pleinement parti des signatures d'index !