Share
Nous avons parcouru un long chemin dans l'apprentissage de TypeScript depuis le début de cette série. Le premier tutoriel vous a donné une brève introduction à TypeScript et a suggéré quelques IDE que vous pouvez utiliser pour écrire TypeScript. Le deuxième tutoriel était axé sur les types de données et le troisième portait sur les bases des interfaces dans TypeScript..
Comme vous le savez peut-être déjà, JavaScript n’a que récemment ajouté la prise en charge native des classes et de la programmation orientée objet. Cependant, TypeScript a permis aux développeurs d'utiliser des classes dans leur code depuis longtemps. Ce code est ensuite compilé en JavaScript qui fonctionnera sur tous les principaux navigateurs. Dans ce tutoriel, vous apprendrez à connaître les classes dans TypeScript. Ils sont similaires à leurs homologues ES6 mais sont plus stricts.
Commençons par les bases. Les classes sont un élément fondamental de la programmation orientée objet. Vous utilisez des classes pour représenter toute entité disposant de propriétés et de fonctions pouvant agir sur des propriétés données. TypeScript vous donne un contrôle total sur les propriétés et les fonctions accessibles à l'intérieur et à l'extérieur de leur propre classe. Voici un exemple très basique de création d’un La personne classe.
Accentsconagua
classe Person name: string; constructeur (theName: string) this.name = theName; introdSelf () console.log ("Bonjour, je suis" + this.name + "!"); let personA = new Person ("Sally"); personA.introduceSelf ();Le code ci-dessus crée une classe très simple appelée La personne. Cette classe a une propriété appelée prénom et une fonction appelée se présenter. La classe a également un constructeur, qui est aussi fondamentalement une fonction. Cependant, les constructeurs sont spéciaux car ils sont appelés chaque fois que nous créons une nouvelle instance de notre classe..
Vous pouvez également transmettre des paramètres aux constructeurs afin d’initialiser différentes propriétés. Dans notre cas, nous utilisons le constructeur pour initialiser le nom de la personne que nous créons en utilisant le La personne classe. le se présenter fonction est une méthode de la La personne classe, et nous l’utilisons ici pour imprimer le nom de la personne sur la console. Toutes ces propriétés, méthodes et le constructeur d'une classe sont collectivement appelés membres de la classe.
Vous devriez garder à l'esprit que le La personne classe ne crée pas automatiquement une personne par elle-même. Il s'agit plus d'un plan détaillé contenant toutes les informations sur les attributs qu'une personne devrait avoir créés. Dans cet esprit, nous avons créé une nouvelle personne et l'avons nommée Sally. Appeler la méthode se présenter sur cette personne va imprimer la ligne "Salut, je suis Sally!" à la console.
Dans la section précédente, nous avons créé une personne nommée Sally. À l'heure actuelle, il est possible de changer le nom de la personne de Sally à Mindy n'importe où dans notre code, comme indiqué dans l'exemple suivant.
classe Person name: string; constructeur (theName: string) this.name = theName; introdSelf () console.log ("Bonjour, je suis" + this.name + "!"); let personA = new Person ("Sally"); // Imprime "Salut, je suis Sally!" personA.introduceSelf (); personA.name = "Mindy"; // Imprime "Bonjour, je suis Mindy!" personA.introduceSelf (); Vous avez peut-être remarqué que nous avons pu utiliser les deux prénom la propriété et la se présenter méthode en dehors de la classe contenante. En effet, tous les membres d’une classe dans TypeScript sont Publique par défaut. Vous pouvez également spécifier explicitement qu'une propriété ou une méthode est publique en ajoutant le mot clé Publique avant cela.
Parfois, vous ne voulez pas qu'une propriété ou une méthode soit accessible en dehors de la classe qui la contient. Ceci peut être réalisé en rendant ces membres privés en utilisant le privé mot-clé. Dans le code ci-dessus, nous pourrions faire la propriété name privé et l'empêcher d'être changé en dehors de la classe contenante. Après cette modification, TypeScript affichera une erreur indiquant que le prénom la propriété est privé et vous ne pouvez y accéder qu'à l'intérieur du La personne classe. La capture d'écran ci-dessous montre l'erreur dans Visual Studio Code.
L'héritage vous permet de créer des classes plus complexes à partir d'une classe de base. Par exemple, nous pouvons utiliser le La personne classe de la section précédente comme base pour créer un Ami classe qui aura tous les membres du La personne et ajouter quelques membres de son propre. De même, vous pouvez également ajouter un Famille ou Prof classe.
Ils hériteront tous des méthodes et des propriétés du La personne tout en ajoutant certaines méthodes et propriétés propres pour les différencier. L'exemple suivant devrait le rendre plus clair. J'ai aussi ajouté le code pour le La personne classe ici afin que vous puissiez facilement comparer le code de la classe de base et de la classe dérivée.
classe Person nom privé: string; constructeur (theName: string) this.name = theName; introdSelf () console.log ("Bonjour, je suis" + this.name + "!"); La classe Friend étend Person yearsKnown: number; constructeur (nom: chaîne, yearsKNown: nombre) super (nom); this.yearsKnown = yearsKnown; timeKnown () console.log ("Nous sommes amis depuis" + this.yearsKnown + "years.") let friendA = nouvel ami ("Jacob", 6); // impressions: Bonjour, je suis Jacob! friendA.introduceSelf (); // Prints: Nous sommes amis depuis 6 ans. friendA.timeKnown (); Comme vous pouvez le voir, vous devez utiliser le étendre mot clé pour le Ami classe pour hériter de tous les membres du La personne classe. Il est important de se rappeler que le constructeur d'une classe dérivée doit toujours invoquer le constructeur de la classe de base avec un appel à super().
Vous avez peut-être remarqué que le constructeur de Ami n'a pas besoin d'avoir le même nombre de paramètres que la classe de base. Cependant, le paramètre du premier nom a été passé à super() afin d'appeler le constructeur du parent, qui a également accepté un paramètre. Nous n'avons pas eu à redéfinir le se présenter fonctionner à l'intérieur du Ami classe parce qu'il a été hérité de la La personne classe.
Jusqu’à présent, nous n’avons fait que les membres d’une classe soit privé ou Publique. Les rendre publiques nous permet d’y accéder depuis n’importe où, ce qui les rend privées limite leur classe à leur propre classe. Parfois, vous voudrez peut-être que les membres d'une classe de base soient accessibles dans toutes les classes dérivées.
Vous pouvez utiliser le protégé modificateur dans de tels cas pour limiter l’accès d’un membre aux classes dérivées. Vous pouvez également utiliser le protégé mot-clé avec le constructeur d'une classe de base. Cela empêchera quiconque de créer une instance de cette classe. Cependant, vous pourrez toujours étendre des classes basées sur cette classe de base.
classe Person nom privé: string; âge protégé: nombre; constructeur protégé (theName: string, theAge: number) this.name = theName; this.age = theAge; introdSelf () console.log ("Bonjour, je suis" + this.name + "!"); La classe Friend étend Person yearsKnown: number; constructeur (nom: chaîne, âge: nombre, annéesKNown: nombre) super (nom, âge); this.yearsKnown = yearsKnown; timeKnown () console.log ("Nous sommes amis depuis" + this.yearsKnown + "years.") friendSince () let firstAge = this.age - this.yearsKnown; console.log ('Nous sommes amis depuis l'âge de $ firstAge ans.' let friendA = nouvel ami ("William", 19, 8); // Imprimés: Nous sommes amis depuis l'âge de 11 ans. friendA.friendSince ();Dans le code ci-dessus, vous pouvez voir que nous avons fait la âge propriété protégé. Cela empêche l'utilisation de âge en dehors de toute classe dérivée de La personne. Nous avons également utilisé le protégé mot clé pour le constructeur du La personne classe. Déclarer le constructeur comme protégé signifie que nous ne pourrons plus instancier directement le La personne classe. La capture d’écran suivante montre une erreur qui apparaît lorsqu’on tente d’instancier une classe avec le protégé constructeur.
Dans ce tutoriel, j'ai essayé de couvrir les bases des classes dans TypeScript. Nous avons commencé le tutoriel en créant une base La personne classe qui a imprimé le nom de la personne sur la console. Après cela, vous avez appris sur le privé mot-clé, qui peut être utilisé pour empêcher l'accès aux membres d'une classe à n'importe quel moment du programme.
Enfin, vous avez appris à étendre différentes classes de votre code en utilisant une classe de base avec héritage. Vous pouvez en apprendre beaucoup plus sur les cours dans la documentation officielle..
Si vous avez des questions concernant ce didacticiel, faites-le moi savoir dans les commentaires..
