Comment TypeScript fait de vous un meilleur développeur JavaScript –

Qu'est-ce que Airbnb Google Lyft et Asana ont en commun? Ils ont tous migré plusieurs bases de code vers TypeScript.

Qu'il s'agisse de manger plus sainement, de faire de l'exercice ou de dormir plus, nos humains aiment le progrès personnel. La même chose s'applique à nos carrières. Si quelqu'un partageait des conseils pour s'améliorer en tant que programmeur, vos oreilles se percheraient.

Dans cet article, l'objectif est d'être ce quelqu'un. Nous savons que TypeScript fera de vous un meilleur développeur JavaScript pour plusieurs raisons. Vous vous sentirez en confiance en écrivant du code. Moins d'erreurs apparaîtront dans votre code de production. Il sera plus facile de refactoriser le code. Vous écrivez moins de tests (yay!). Et dans l’ensemble, votre éditeur disposera d’une meilleure expérience de codage.

Qu'est-ce que TypeScript?

TypeScript est un langage compilé. Vous écrivez TypeScript et il compile en JavaScript. Pour l’essentiel, vous écrivez du JavaScript, mais avec un système de type. Les développeurs JavaScript devraient avoir une transition transparente parce que les langues sont les mêmes, à quelques exceptions près.

Voici un exemple de base d’une fonction en JavaScript et en TypeScript:

 function helloFromSitePoint (name) {
    return `Bonjour, $ {name} de SitePoint!`
}

 function helloFromSitePoint (nom: chaîne) {
    return `Bonjour, $ {name} de SitePoint!`
}

Remarquez à quel point les deux sont presque identiques. La différence réside dans l'annotation de type du paramètre "name" dans TypeScript. Cela dit au compilateur: "Hé, assurez-vous que lorsque quelqu'un appelle cette fonction, il ne fait que transmettre une chaîne." Nous n'entrerons pas dans les détails mais cet exemple devrait illustrer le minimum minimal de TypeScript.

How Will TypeScript Make Me Better?

TypeScript améliorera vos compétences en tant que développeur JavaScript par:

• pour vous donner davantage de confiance,
• pour détecter les erreurs avant qu'elles n'atteignent la production,
• pour faciliter la refactorisation du code,
• . temps après la rédaction des tests,
• vous offrant une meilleure expérience de codage

Explorons chacun d’entre eux un peu plus en profondeur

Plus de confiance

TypeScript renforcera votre confiance lorsque vous travaillez dans des bases de code inconnues et dans des équipes plus grandes . Si vous connaissez TypeScript et que vous rejoignez une nouvelle équipe ou un nouveau projet utilisant TypeScript, vous vous sentirez moins inquiet. Vous savez que TypeScript vous donnera un coup de main. Le langage offre plus de lisibilité et de prévisibilité du code car vous pouvez regarder quelque chose et en déduire immédiatement le fonctionnement. Ceci est un résultat direct du système de types.

Les paramètres de fonction sont annotés afin que TypeScript connaisse les types valides pour les valeurs que vous transmettez.

 type Color = "red" | "bleu" | "vert"

// Ici, vous savez que la couleur doit être de type "Color", ce qui signifie l'une des trois options
fonction printColor (couleur: Couleur) {
  console.log (`La couleur que vous avez choisie était: $ {color})
}

Les types de retour de fonction seront soit inférés, soit annotés.

 fonction sum (a: nombre, b: nombre) {// TS déduit le type de retour sous forme de nombre
  retourne a + b
}

fonction moins (a: nombre, b: nombre): nombre {// nous annotons le type de retour sous forme de nombre
  retourne a - b
}

Souvent, avec TypeScript, le code de votre coéquipier est explicite. Ils n'ont pas besoin de vous l'expliquer car les types ajoutent un contexte au code. Ces fonctionnalités vous permettent de faire davantage confiance à l'équipe. Vous travaillez à un niveau supérieur parce que vous passez moins de temps à vous soucier des erreurs stupides. Cela fonctionne de la même manière pour votre code. TypeScript vous oblige à écrire du code explicite. L'effet secondaire est une augmentation instantanée de la qualité du code. Au final, vous vous sentirez plus confiant de travailler dans TypeScript en tant que développeur JavaScript.

Moins d'erreurs de production

TypeScript interceptera vos éventuelles erreurs de production lors de la compilation plutôt que lors de l'exécution. Lorsque vous écrivez du code, TypeScript vous hurle si vous faites quelque chose de mal. Par exemple, prenons cet exemple:

Remarquez comment les couleurs ont un ondulé rouge? C’est parce que nous appelons .forEach dessus, mais il se peut que ne soit pas défini . Cela pourrait provoquer une erreur de production. Heureusement, TypeScript nous indique que nous écrivons le code et que nous ne compilerons pas tant que nous ne le réparerons pas. En tant que développeur, vous devriez être celui qui capte cela plutôt que votre utilisateur. TypeScript éliminera presque toujours ces types d'erreur car vous les verrez lorsque votre code sera compilé.

Plus facile à refactoriser

Le refactoring de code devient plus facile avec TypeScript, car il intercepte les erreurs pour vous. Si vous renommez une fonction, vous saurez si vous oubliez d'utiliser le nouveau nom quelque part. Lorsque vous modifiez la forme d’une interface ou tapez et supprimez une propriété qui, à votre avis, n’était pas utilisée, TypeScript vous corrige. Tout changement que vous apportez à votre code, TypeScript sera la personne derrière vous disant: «Hey. Vous avez oublié de changer le nom à la ligne 142. ”J'ai entendu une fois quelqu'un l'appeler“ refactoring continu ”parce que vous pouvez refactoriser rapidement de grandes parties d'un code. C’est une belle chose qui se révèle plus facile à maintenir pour l’avenir.

Moins de tests unitaires

TypeScript supprime la nécessité de certains tests unitaires tels que les tests de signature de fonction. Prenons cette fonction par exemple:

 interface User {
  nom: chaîne;
  âge: nombre;
}

fonction getAge (utilisateur: utilisateur) {
  retour user.age
}

Nous n'avons plus besoin d'un test unitaire pour nous assurer que getAge est appelé avec le type de valeur approprié. Si un développeur essaie d'appeler getAge avec un numéro, TypeScript émettra une erreur en nous indiquant que les types ne correspondent pas. En conséquence, cela nous permet de passer moins de temps à écrire des tests unitaires simples et plus de temps à écrire des choses que nous apprécions davantage.

Meilleure expérience de codage dans l'éditeur

L'un des domaines dans lesquels TypeScript vous sera le plus bénéfique est la productivité via la saisie semi-automatique et le code JavaScript "futur". La plupart des principaux IDE et éditeurs, y compris Atom, Emacs, Vim, VSCode, Sublime Text et Webstorm, ont des plugins pour les outils TypeScript. Nous ferons référence à certaines des fonctionnalités disponibles dans VScode pour cette section.

La première fonctionnalité qui augmentera votre productivité est la saisie semi-automatique. C’est à ce moment-là que vous recherchez une méthode ou une propriété sur une classe ou un objet. Si TypeScript connaît la forme, il peut compléter automatiquement le nom pour vous. Voici un exemple:

Remarquez que je n’ai pas fini de taper les propriétés de myFriend . Ici, vous voyez que TypeScript commence à suggérer le nom de la propriété car il sait que la forme correspond à Utilisateur .

J'écris une fonction appelée printUser . Je souhaite connecter le nom complet de l’utilisateur à la console. Je vais définir nom et voir une ligne ondulée rouge. En le survolant dans mon éditeur, TypeScript m’indique que la propriété "lastName" n’existe pas sur le type "User". C'est super utile! Cela a attiré mon erreur stupide pour moi.

La deuxième caractéristique qui améliore notre expérience est la capacité de TypeScript de vous permettre d’écrire du code JavaScript “futur”. Pour cela, nous avons généralement besoin de plusieurs plugins Babel. TypeScript, d’autre part, fournit cette même fonctionnalité, mais pour le coût d’une seule dépendance. L'équipe TypeScript fait un excellent travail en respectant les spécifications ECMAScript, en ajoutant des fonctionnalités de langage de niveau 3 et supérieur. Cela signifie que vous pouvez exploiter de nouveaux ajouts à JavaScript sans vous occuper d'une pléthore de dépendances ou de configuration. Cela vous permettra de devancer vos collègues JavaScript. Ces deux fonctionnalités combinées augmenteront votre efficacité en tant que développeur JavaScript.

Par où commencer?

Si vous souhaitez commencer à utiliser TypeScript, vous pouvez commencer par quelques endroits, en fonction de apprendre mieux.

• TypeScript en 5 minutes . Le guide de démarrage rapide du manuel TypeScript vous donnera une expérience pratique du langage. Il vous guide à travers les fonctionnalités de base de la langue. Tout ce dont vous avez besoin pour commencer est de cinq minutes, d'un éditeur et d'une volonté d'apprendre.
• Une introduction à TypeScript . Si vous voulez aller plus loin, nous vous recommandons cet article destiné aux débutants, qui couvre quelques concepts de base et permet à TypeScript de s'exécuter en local.
• Programmation de TypeScript par Boris Cherny . Pour ceux qui aiment aller en profondeur – et nous voulons dire en profondeur – consultez ce livre O’Reilly de Boris Cherny. Il couvre les bases jusqu'aux fonctionnalités linguistiques avancées. Nous vous le recommandons vivement si vous souhaitez développer vos compétences en JavaScript au niveau suivant.

Essayez-le vous-même!

Il est important d’entendre les opinions des autres, mais rien ne vaut de se forger une opinion à partir de son expérience. Nous savons que TypeScript améliorera votre confiance en vous, vous aidera à détecter les erreurs et à refactoriser le code plus rapidement, et améliorera votre productivité globale. Maintenant, sortez, essayez TypeScript vous-même et dites-nous ce que vous pensez!

Si vous avez apprécié cet article, vous serez ravi d'apprendre que nous avons d'autres articles TypeScript sur leur chemin. Gardez les yeux ouverts dans les mois à venir. Nous aborderons des sujets tels que la mise en route de TypeScript et son utilisation avec des technologies telles que React.

Joe Previte, également appelé JavaScript Joe, est ingénieur logiciel chez Echobind. Il passe le plus clair de son temps à travailler avec JavaScript, y compris React, TypeScript, Node et récemment, React. Originaire de. Dans ses temps libres, il aime créer des vidéos pour Egghead, écrire des articles sur le codage et diriger un groupe d'étude sur la méditation en ligne.