Javascript Girl
  1. Javascript Girl
  3. Comportement setInterval dans TypeScript
Intereting Posts
Javascript: cacher les méthodes prototypes dans la boucle? Classe JavaScript Iterator Google Maps API parfois ne retourne pas PostalCode dans AddressDetails Telerik radGrid – persiste l'état du client sur sort / paging / filter D3: ignorer certaines lignes dans .csv Est-il possible d'enregistrer un graphique Google en tant qu'image? La directive angulaire dans le plugin jQuery ne fonctionne pas $ ('A'). Trigger ('clic'); Ne fonctionne pas Passer knockout.js observablearray objet à MVC Controller Action? Javascript – prévisualisation d'image avant de télécharger Sélection multiple à l'aide de Jquery Comment fonctionne AJAX? Appelez une fonction lorsque le bouton enter est pressé via Javascript Détecter lorsque le navigateur reçoit le téléchargement de fichier Comment Postman envoie des demandes? Ajax, même politique d'origine

Comportement setInterval dans TypeScript

Je viens de commencer à jouer avec TypeScript. J'ai créé un exemple de projet avec Visual Studio 2012 Express pour Web et cet exemple a une ligne de code qui a un comportement que je ne peux pas m'expliquer.

D'abord, le code TypeScript: 

start() { this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500); }

Donc, cette ligne définit la valeur de TimerToken toutes les 500 ms et met à jour un élément HTML avec la Date / Heure actuelle.

En JavaScript, cela équivaudrait à ceci: 

 Greeter.prototype.start = function () { this.timerToken = setInterval(this.span.innerHTML = new Date().toUTCString(), 500); };

Je me suis alors posé sur l'expression lambda dans la ligne de code TypeScript et l'ai supprimé, mais la chaîne Date / Heure ne sera plus mise à jour.

Une question si facile … pourquoi?

Je suppose que span est une propriété dans la même classe que la méthode de start … Corrigez-moi si je me trompe à ce sujet.

La syntaxe de la flèche en graisse a une signification particulière dans TypeScript.

Lorsque vous utilisez () => TypeScript conserve la portée lexicale … ce qui signifie simplement que this signifie la même chose dans l'expression que dans l'expression. Vous pouvez voir dans le JavaScript compilé qu'il crée une variable nommée _this pour faire cela.

Donc, avec la syntaxe de la flèche en graisse, this.span est la propriété nommée span sur votre classe. Sans la syntaxe de la flèche en graisse, this.span est indéfini.

Vous pouvez utiliser ce test de base pour voir la différence en appelant withFatArrow ou withoutFatArrow et vous verrez ce qui se passe. 

 class Test { public example = 'Test'; private timer; withFatArrow() { this.timer = setTimeout(() => alert(this.example), 500); } withoutFatArrow() { this.timer = setTimeout(function() { alert(this.example) }, 500); } } var test = new Test(); //test.withFatArrow(); test.withoutFatArrow();