Maison / Technologie / Héritage dactylographié plongée profonde

Héritage dactylographié plongée profonde

Comment l’héritage dans Typescript fonctionne-t-il réellement derrière le rideau?

Les scripts dactylographique et JavaScript sont deux langages impressionnants. Pour beaucoup de développeurs, Typescript semble plus familier, car il propose des concepts que nous rencontrons normalement dans les langages de programmation traditionnels. L’héritage en est un.

En raison de la compatibilité ascendante, nous transpilons généralement notre code en Javascript. ES5 lui-même ne contient ni classes ni mot-clé extend.

Alors, comment cela fonctionne-t-il? Typescript utilise le sucre syntaxique pour «imiter» le comportement de classe et d’héritage. Cela crée une sorte d’illusion de ces concepts. Voyons ce que je veux dire par là.

Dans cet article de blog, nous allons plonger profondément. Sur notre chemin nous rencontrerons beaucoup de concepts. Il est important de bien comprendre ces concepts. Prenez votre temps et faites des pauses si nécessaire. Il n’est pas nécessaire de tout comprendre en une lecture.

Laissons l’installation d’un nouveau projet TypeScript illustrer ce qui se passe réellement derrière le rideau. Pour créer un nouveau projet Typescript vide, exécutez la commande suivante:

 tsc --init

Ceci crée un fichier tsconfig.json que le compilateur TypeScript utilisera pour compiler notre code. Actuellement, il ne fait rien car nous n’avons encore écrit aucun code. Continuons en ajoutant un index.ts:

La classe Foo agit comme une classe de base dont dérive Bar. Bar accepte un nom et un aliment préféré en tant que paramètre de constructeur. Il passe le nom via un super appel à Foo et attribue le paramètre favouriteFood à une propriété privée.

Nous instancions ensuite bar1 et bar2 et appelons saluer et parler. Bar est seulement capable de saluer car il étend Foo. Rien d’extraordinaire ici.

Le code ci-dessus montre le sucre syntaxique dont je parlais au début. Cela nous permet d’écrire l’héritage de manière classique, à partir des langages comme Java ou C #.

Mais comment cela fonctionne-t-il alors? Exécutons la commande “tsc” pour examiner la version “unsugared”.

Ne perdez pas trop de temps à étudier ce code – nous en parlerons plus tard.

Wow! C’est beaucoup de code supplémentaire. À première vue, nous constatons que tout le sucre a disparu – plus aucune classe. Mais au moins, nous reconnaissons certaines des choses que nous avions écrites auparavant.

Nous pouvons encore voir Foo and Bar, qui est maintenant devenu «iffe’s». IFFE signifie «l’expression de fonction immédiatement invoquée» . Comme son nom l’indique, il représente une fonction qui est immédiatement exécutée

Mais de nombreux éléments supplémentaires ont été ajoutés. Quel est l’objet de cette méthode __extends?

Pour bien comprendre ce code, prenons d’abord un peu de recul et écrivez la même fonctionnalité dans un vieil ancien code JavaScript. Retour aux sources! ❤️

Héritage en JavaScript vanillé

Ce code fait exactement la même chose que la version dactylographiée. Même si le code semble simple, il y a beaucoup de choses à comprendre. Il est important que nous concevions le concept mental qui se cache derrière.

Pour visualiser ces concepts, nous utiliserons la même représentation graphique utilisée par Kyle Simpson ( Kyle ) dans sa série «Vous ne connaissez pas JS». Au fait. Si vous ne les avez pas encore lues, je vous le recommande vivement. Ils sont géniaux!

Dans son livre sur «ceci et les prototypes d’objet», Kyle représente des fonctions avec des cercles et des objets avec des carrés. Voyons maintenant comment le code JS d’en haut serait représenté dans une représentation graphique de ce type.

Suivez-moi sur Twitter ou sur un support pour être informé des nouveaux messages de blog et de nouveaux outils intéressants! Lorsque la ligne 1 s’exécute, elle crée une fonction Foo. Notez qu’il crée également un objet qui est le prototype de la fonction Foo.

 function  Foo (nom) {
     this  .name = name; 
}

La fonction Foo contient un lien .prototype avec un objet. Comme le lien l’indique, l’objet fait office de prototype de Foo. Mais qu’en est-il de la propriété .constructor?

Ne vous trompez pas avec son nom. Cela n’a rien à voir avec la construction. Il s’agit simplement d’un lien interne entre le prototype et la fonction.

2. Passons à la ligne 5. Dans cette ligne, nous ajoutons la fonction saluer au prototype.

 Foo.prototype.greet =  function  () {
 console.log (`Salut, je suis $ {  this  .name} `); 
};

3. La ligne 9 crée alors la fonction Bar:

  function  Bar (nom, favouriteFood) {
     this  .favouriteFood = favouriteFood; 
 Foo.call ( cette

Source
Partenariat Newstrotteur

A propos lenewstrotteur

Découvrez également

crossy-road.png

La vérité sur les jeux hypercasuels

Les jeux hypercasuels ont connu une croissance sans précédent au cours de la dernière année. …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *