Une brève introduction à TypeScript

Dans cet article, nous allons approfondir et apprendre les bases de TypeScript. comment nous pouvons l'utiliser pour obtenir un meilleur code dans nos applications, les avantages qu'il nous apportera et les conséquences de l'utilisation de TypeScript. Nous allons également apprendre à commencer à l'utiliser immédiatement en créant des interfaces et des types et en rendant notre code plus sûr et lisible.

Le Web a évolué si rapidement au fil des ans. Premièrement, nous avons appris le langage HTML et CSS, ainsi que le style de nos pages. Ensuite, nous devions donner du mouvement à nos pages, puis JavaScript est venu. Au début, ce n’était pas si facile et beau de travailler avec ce qu’il est aujourd’hui, et beaucoup de gens n’ont pas confiance en la langue. Nous étions toujours à la recherche des meilleures pratiques pour travailler avec JavaScript car ce n'était pas si facile comme aujourd'hui.

Puis, après une période de travail acharné et de croissance de la communauté, JavaScript a conquis le monde. De nombreux frameworks ont été créés, de nombreuses bibliothèques ont été créées et le langage a également évolué, avec de nombreuses spécifications telles que ES2016 ou ES2017. Nous avons également commencé à utiliser JavaScript côté serveur et aujourd'hui, de nombreuses applications utilisent JavaScript pour les interfaces frontale et serveur.

En JavaScript, nous ne pouvons pas travailler avec des types tels que Java ou C #. Cela a longtemps été un inconvénient, car de nombreux développeurs étaient habitués à cela, ils ne sont donc pas passés immédiatement à JavaScript car ils ne se sentaient pas suffisamment en sécurité.

TypeScript est venu résoudre ce problème pour nous, par nous permettant de travailler avec des types en JavaScript. Cela peut nous conduire à un code plus lisible, plus sûr et sans erreurs absurdes que nous pourrions rencontrer lors du développement d'applications.

Quoi et pourquoi

JavaScript a réellement changé notre monde et nous a permis d'écrire. de meilleures applications. Nous avons commencé à l'utiliser à l'avant et sur le serveur, et de nombreuses bibliothèques, frameworks, applications et entreprises ont été créés à l'aide de JavaScript. Mais avec JavaScript, lorsque nous travaillons avec des bases de code très volumineuses, cela a tendance à laisser notre code se brouiller si nous ne faisons pas attention, avec beaucoup de bugs et de la difficulté à le déboguer. C'est pourquoi Microsoft a créé TypeScript et que de nombreux développeurs l'ont adopté dans leurs projets.

TypeScript est un sur-ensemble de fonctionnalités nous permettant d'utiliser des types en JavaScript. Il nous donne un système de modules, des classes, des interfaces et un système de types riche. TypeScript nous aide à rédiger un code de meilleure qualité, avec moins d’erreurs, en nous aidant à détecter les erreurs statiques que nous pouvons commettre au cours de la construction de nos applications. Nous pouvons améliorer la qualité du code et la compréhensibilité de notre application simplement en commençant à utiliser des types dans notre code.

Fondamentalement, TypeScript compilera le code et générera une compilation des erreurs s'il détecte des erreurs de syntaxe, comme des fautes d'orthographe. . Avec cela, cela nous donne beaucoup de sécurité lors de l'écriture de notre code.

Nous allons maintenant plonger dans TypeScript et en apprendre les bases, en commençant par Variables. Pour commencer à utiliser rapidement TypeScript, nous pouvons utiliser le TypeScript Playground uniquement à des fins d'apprentissage.

Variables

Toute partie de JavaScript est un TypeScript code valide. Ainsi, lorsque vous déclarez une variable dans TypeScript, il vous suffit d'inclure un signe deux-points (: ) après le nom de la variable. Vous pouvez lui donner le type de votre choix. Dans TypeScript, nous avons ces types de base: any numéro boolean string non défini types d'objets et vides .

Imaginons donc que nous voulions créer un nouveau const appelé User et nous le voulons. être une chaîne, donc ce serait comme ceci:

 const User: string = "Leonardo"; 

Nous pouvons le transmettre à tout type de notre choix, tant que nous passons la valeur du même type; sinon, ça va jeter une erreur. Par exemple, si nous voulons que notre const soit string et que nous lui passions un numéro une erreur sera générée:

 const User: string = 21; [19659016] Cette ligne générera une erreur:  Le type '21' n'est pas assignable au type 'chaîne' . 

 Nous pouvons passer n'importe quel type de base que nous voulons aux variables dans TypeScript: 
 const User: = "Leonardo";
const UserAge: = 21;
const IsDeveloper: = true;
const hobbies: [] = ["Futebol", "Coding"]; 
 Nous pouvons également passer des types d'objet   à des variables dans TypeScript. Imaginons que notre  utilisateur  soit un objet ayant les propriétés suivantes:
 nom  doit être une chaîne ; l'âge 
  doit être un nombre ; 
 isDeveloper  devrait être un  booléen; 
 Comment pourrions-nous en créer un type? Eh bien, nous pourrions créer une interface   ou un type  . Apprenons-en plus sur ces types d'objet   puissants dans TypeScript et voyons leur fonctionnement
 Interfaces et types
 Vous pouvez imaginer une interface   comme un ensemble de propriétés et de méthodes associées. qui décrivent un objet spécifique. Cependant, dans TypeScript, les interfaces ne sont qu'une structure virtuelle qui n'existe que dans le contexte de TypeScript. Ils sont créés uniquement pour vérifier notre code et voir si tout fonctionne bien. Maintenant, nous pouvons écrire le code suivant pour créer une interface   pour notre interface  User :
   
 User {
  nom: chaîne;
  âge: nombre;
  isDeveloper: booléen;
} 
 Nous pouvons maintenant remplacer le type de chaîne de notre variable  User  par un  User . Cela générera une erreur car nous assignons une chaîne   où il devrait s'agir d'un objet   contenant ces trois propriétés que nous avons créées dans l'interface  User . Corrigeons ce code:
 const User: User = {
  nom: "Leonardo",
  âge: 21 ans,
  isDeveloper: true
}; 
 Une autre chose que nous pouvons faire avec une interface   dans TypeScript passe une valeur facultative. Imaginons que nous voulions que la propriété  isDeveloper  soit facultative. Il suffit de passer un point d'interrogation (? ) avant le colon (: ):
 interface User {
  nom: chaîne;
  âge: nombre;
  isDeveloper ?: boolean;
} 
 Nous pouvons également passer des fonctions à une interface, comme ceci:
 interface User {
  nom: chaîne;
  âge: nombre;
  isDeveloper ?: boolean;
  renderName ?: (name: string) => string;
} 
 Les types et les interfaces dans TypeScript sont assez similaires, mais présentent quelques différences. Pour créer un type  il suffit de:
 type Book = {
  titre: chaîne;
  auteur: chaîne;
  année: nombre;
} 
 L'une des différences entre une interface  de type  et une interface   réside dans la fonctionnalité d'extension. Avec une interface  nous pouvons créer une nouvelle interface et l'étendre, comme suit:
 interface PremiumUser étend User {
  primeship: booléen;
} 
 Une interface   peut étendre plusieurs interfaces et classes. un type   ne peut pas. Une autre différence entre un type   et une interface   est que la syntaxe permettant d'écrire un type   est différente. Vous devez inclure un signe égal ( = ) avant les points-virgules, comme lorsque vous créez une variable.
 Types d'intersection et d'union
 Pour utiliser plusieurs types dans TypeScript, nous pouvons utiliser l'union les types. Imaginons que nous voulions que notre variable User accepte une chaîne ou un nombre. Tout ce que nous avons à faire est:
 const User: string | number = "Leonardo"; 
 Un utilisateur   peut être une chaîne   ou un numéro  . Nous pouvons également utiliser des types d'union avec des types, des interfaces et des classes:
 interface Man {
  nom: chaîne;
  âge: nombre;
  profession: ficelle;
}

interface Femme {
  nom: chaîne;
  hairColor: chaîne;
  âge: nombre;
  profession: ficelle;
}

type Utilisateur = Homme | Woman; 
 Fonctions
 Chaque bonne application est composée de fonctions simples, bonnes et pures. Utiliser TypeScript dans nos fonctions n’est pas si difficile et cela rendra notre code plus sûr et plus concis. Supposons que nous ayons une fonction simple appelée  printFullName qui va consolider un nom complet:
 const printFullName = (prenom, lastName_) =>
  console.log (`Hello $ {firstName} $ {lastName}`); 
 Nous pouvons maintenant créer un type appelé  FullName  et le transmettre à notre fonction. Nous devons faire attention ici car, dans notre fonction, nous ne renvoyons rien de particulier, il suffit d’imprimer le nom complet dans la console. Donc, dans notre type, nous devrions retourner  void  sinon, une erreur comme celle-ci sera renvoyée:
 tapez _FullName_ = (
  firstName: chaîne,
  lastName: chaîne
) => vide;

const printFullName: FullName = (prénom, nom) =>
  console.log (`Hello $ {firstName} $ {lastName}`); 
 Pour ajouter des types dans nos fonctions, nous pouvons également utiliser une interface, comme celle-ci:
 interface _IFullName_ {
  (firstName: string, lastName: string): void;
}

const printFullName: IFullName = (prénom, nom) =>
  console.log (`Hello $ {firstName} $ {lastName}`); 
 Future
 Comme nous pouvons le constater, TypeScript nous aide vraiment à écrire de meilleures applications avec un code plus propre, mais beaucoup de personnes se posent la même question en tête quand il s’agit de taper leur code: Vaut-il la peine d’apprendre TypeScript?  
 À mon avis, de plus en plus d'applications sont créées avec TypeScript, et de nombreuses entreprises l'adoptent récemment! En outre, de nombreux projets open source l'adoptent. L'un des plus récents et des plus célèbres était Jest - JavaScript Testing Framework -, ce qui montre que TypeScript gagne de plus en plus de popularité.
 Vous n'avez pas besoin de commencer immédiatement à utiliser TypeScript et à taper tout votre code. (bien que ça va être très bon). Vous devez juste commencer à l'utiliser progressivement. Commencez par utiliser les interfaces et les types, puis passez aux types d'intersection et d'union. Bientôt, vous pourrez l'utiliser dans vos fonctions. Vous verrez que cela améliorera beaucoup votre code, puis vous pourrez commencer à utiliser des concepts plus avancés dans TypeScript, tels que Génériques et Itérateurs. Nous en parlerons davantage dans le futur.
 Conclusion
 Ceci est une courte introduction à TypeScript. Dans cet article, nous avons appris et expliqué le fonctionnement de TypeScript, à l'aide d'interfaces et de types, de types d'union et d'ajout de types à nos fonctions.
 Pour tirer pleinement parti de la puissance de TypeScript lors de l'écriture de votre code, je vous recommande fortement d'utiliser dans un projet secondaire en premier. Essayez de construire quelque chose de vraiment simple avec cela - avec qui vous pouvez vous entraîner et en apprendre davantage à ce sujet. Vous pouvez créer une simple calculatrice ou une application de tâches à faire, puis commencer à l'implémenter dans d'autres projets  .
 TypeScript est un super langage qui nous aide à écrire un code meilleur, plus sûr et plus concis. , en améliorant notre expérience et en supprimant certaines erreurs stupides que nous pouvons commettre en cours de route. Merci pour la lecture!
 Vous souhaitez en savoir plus sur TypeScript?
 Voulez-vous continuer à plonger dans TypeScript? Consultez ces publications pour en savoir plus.