Share
Après avoir lu le didacticiel d’introduction à TypeScript, vous devriez maintenant être en mesure d’écrire votre propre code TypeScript dans un environnement de développement intégré qui le prend en charge, puis de le compiler en JavaScript. Dans ce tutoriel, vous apprendrez différents types de données disponibles dans TypeScript..
JavaScript comporte sept types de données différents: Null, Undefined, Boolean, Number, String, Symbol (introduit dans ES6) et Object. TypeScript définit quelques types supplémentaires, qui seront tous traités en détail dans ce tutoriel..
Tout comme en JavaScript, le nul Le type de données dans TypeScript ne peut avoir qu'une seule valeur valide: nul. Une variable null ne peut pas contenir d'autres types de données tels que nombre et chaîne. Définir une variable sur null effacera son contenu si elle en avait.
Rappelez-vous que lorsque le strictNullChecks le drapeau est réglé sur vrai dans tsconfig.json, seule la valeur null est assignable à des variables de type null. Cet indicateur est désactivé par défaut, ce qui signifie que vous pouvez également affecter la valeur null à des variables avec d'autres types tels que nombre ou vide.
// Avec strictNullChecks défini sur true, laissez a: null = null; // Ok let b: undefined = null; // Erreur let c: number = null; // Erreur let d: void = null; // Erreur // Avec strictNullChecks, la valeur est false, laissez a: null = null; // Ok let b: undefined = null; // Ok let c: nombre = null; // Ok let d: void = null; // D'accord
Toute variable dont vous n'avez pas spécifié la valeur est définie sur indéfini. Cependant, vous pouvez également définir explicitement le type d'une variable sur non défini, comme dans l'exemple suivant..
Gardez à l'esprit qu'une variable avec type mis à indéfini ne peut avoir indéfini que sa valeur. Si la strictNullChecks l'option est définie sur faux, vous pourrez aussi assigner indéfini aux variables avec des types de nombre et de chaîne, etc..
// Avec strictNullChecks défini sur true, laissez a: undefined = undefined; // Ok let b: undefined = null; // Erreur let c: number = undefined; // Erreur let d: void = undefined; // Ok // Avec strictNullChecks, mettre à false, laissez a: undefined = undefined; // Ok let b: undefined = null; // Ok let c: number = undefined; // Ok let d: void = undefined; // D'accord
Le type de données void est utilisé pour indiquer l’absence de type pour une variable. Définition de variables pour avoir un vide type peut ne pas être très utile, mais vous pouvez définir le type de retour des fonctions qui ne renvoient rien à vide. Lorsqu'il est utilisé avec des variables, le type vide ne peut avoir que deux valeurs valides: nul et indéfini.
// Avec strictNullChecks défini sur true, laissez a: void = undefined; // Ok let b: void = null; // Erreur let c: void = 3; // Erreur let d: void = "apple"; // Erreur // Avec strictNullChecks défini sur false, laissez a: void = undefined; // Ok let b: void = null; // ok let c: void = 3; // Erreur let d: void = "apple"; // Erreur
Contrairement à la nombre et chaîne Types de données, booléen a seulement deux valeurs valides. Vous pouvez uniquement définir sa valeur sur vrai ou faux. Ces valeurs sont beaucoup utilisées dans les structures de contrôle où un morceau de code est exécuté si une condition est vrai et un autre morceau de code est exécuté si une condition est faux.
Voici un exemple très basique de déclaration de variables booléennes:
let a: boolean = true; Soit b: booléen = faux; Soit c: booléen = 23; // Erreur let d: boolean = "blue"; // Erreur
le nombre Le type de données est utilisé pour représenter les nombres entiers et les valeurs à virgule flottante en JavaScript, ainsi que TypeScript. Cependant, vous devez vous rappeler que tous les nombres sont représentés en interne sous forme de valeurs à virgule flottante. Les nombres peuvent également être spécifiés en tant que littéraux hexadécimaux, octaux ou binaires. N'oubliez pas que des représentations octales et binaires ont été introduites dans ES6, ce qui peut entraîner une sortie de code JavaScript différente en fonction de la version que vous ciblez..
Il existe également trois autres valeurs symboliques spéciales qui relèvent de la nombre type: +Infini, -Infini, et NaN. Voici quelques exemples d'utilisation du nombre type.
// Avec strictNullChecks défini sur true, laissez a: number = undefined; // Erreur let b: nombre = null; // Erreur let c: nombre = 3; Soit d: nombre = 0b111001; // binaire let e: number = 0o436; // Octal let f: nombre = 0xadf0d; // hexadécimal let g: nombre = "chat"; // Erreur // Avec strictNullChecks défini sur false, laissez a: number = undefined; // Ok let b: nombre = null; // ok let c: nombre = 3; Soit d: nombre = 0b111001; // binaire let e: number = 0o436; // Octal let f: nombre = 0xadf0d; // hexadécimal let g: nombre = "chat"; // Erreur
Lorsque la version cible est définie sur ES6, le code ci-dessus est compilé dans le code JavaScript suivant:
laissez a = undefined; laissez b = null; Soit c = 3; soit d = 0b111001; Soit e = 0o436; soit f = 0xadf0d; Soit g = "chat";
Notez que les variables JavaScript sont toujours déclarées en utilisant laisser, qui a été introduit dans ES6. Vous ne voyez pas non plus de message d'erreur lié à la type de variables différentes car le code JavaScript n'a aucune connaissance des types utilisés dans le code TypeScript.
Si la version cible est définie sur ES5, le code TypeScript que nous avons écrit précédemment sera compilé en JavaScript suivant:
var a = non défini; var b = null; var c = 3; var d = 57; var e = 286; var f = 0xadf0d; var g = "chat";
Comme vous pouvez le constater, cette fois, toutes les occurrences du laisser le mot clé a été changé en var. Notez également que les nombres octaux et binaires ont été modifiés en leurs formes décimales.
Le type de données string est utilisé pour stocker des informations textuelles. JavaScript et TypeScript utilisent des guillemets doubles (") ainsi que des guillemets simples (') pour entourer vos informations textuelles sous forme de chaîne. Une chaîne peut contenir zéro ou plusieurs caractères encadrés par des guillemets..
// Avec strictNullChecks défini sur true, laissez a: string = undefined; // Erreur let b: string = null; // Erreur let c: string = ""; soit d: string = "y"; let e: string = "building"; Soit f: chaîne = 3; // Erreur let g: string = "3"; // Avec strictNullChecks défini sur false, laissez a: string = undefined; // Ok let b: string = null; // Ok, laissez c: string = ""; soit d: string = "y"; let e: string = "building"; Soit f: chaîne = 3; // Erreur let g: string = "3";
TypeScript prend également en charge les chaînes de modèle ou les littéraux de modèle. Ces littéraux de modèles vous permettent d'incorporer des expressions dans une chaîne. Les littéraux de modèle sont entourés par le caractère de coche arrière (') au lieu de guillemets doubles et de guillemets simples qui entourent des chaînes régulières. Ils ont été introduits dans ES6. Cela signifie que vous obtiendrez une sortie JavaScript différente en fonction de la version que vous ciblez. Voici un exemple d'utilisation de littéraux de modèle dans TypeScript:
let e: string = "building"; Soit f: nombre = 300; let phrase: string = 'Le $ e en face de mon bureau a une hauteur de $ f pieds.';
Lors de la compilation, vous obtiendrez le code JavaScript suivant:
// Sortie dans ES5 var e = "building"; var f = 300; var sentence = "Le" + e + "situé devant mon bureau correspond à" + f + "pieds hauts."; // Sortie dans ES6 let e = "building"; soit f = 300; let sentence = 'Le $ e devant mon bureau mesure $ f pieds de haut.';
Comme vous pouvez le constater, le littéral de modèle a été remplacé par une chaîne normale dans ES5. Cet exemple montre comment TypeScript vous permet d'utiliser les dernières fonctionnalités de JavaScript sans vous soucier de la compatibilité..
Vous pouvez définir des types de tableaux de deux manières différentes en JavaScript. Dans la première méthode, vous spécifiez le type d’éléments de tableau suivi de [] qui dénote un tableau de ce type. Une autre méthode consiste à utiliser le type de tableau générique Tableau. L'exemple suivant montre comment créer des tableaux avec ces deux méthodes. En précisant nul ou indéfini comme l'un des éléments produira des erreurs lorsque le strictNullChecks le drapeau est vrai.
// Avec strictNullChecks défini sur false, laissez a: number [] = [1, 12, 93, 5]; let b: string [] = ["a", "abricot", "mangue"]; soit c: nombre [] = [1, "pomme", "pomme de terre"]; // Erreur let d: Array= [null, undefined, 10, 15]; let e: Array = ["pie", null, ""]; // Avec strictNullChecks défini sur true, laissez a: number [] = [1, 12, 93, 5]; let b: string [] = ["a", "abricot", "mangue"]; soit c: nombre [] = [1, "pomme", "pomme de terre"]; // Erreur let d: Array = [null, undefined, 10, 15]; // Erreur let e: Array = ["pie", null, ""]; // Erreur
Le type de données tuple vous permet de créer un tableau dans lequel le type d'un nombre fixe d'éléments est connu à l'avance. Le type du reste des éléments ne peut être qu'un des types que vous avez déjà spécifiés pour le tuple. Voici un exemple qui le clarifiera:
let a: [nombre, chaîne] = [11, "lundi"]; let b: [nombre, chaîne] = ["lundi", 11]; // Erreur let c: [nombre, chaîne] = ["a", "monkey"]; // Erreur let d: [nombre, chaîne] = [105, "hibou", 129, 45, "cat"]; Soit e: [nombre, chaîne] = [13, "bat", "spiderman", 2]; e [13] = "éléphant"; e [15] = faux; // Erreur
Pour tous les tuples de notre exemple, nous avons défini le type du premier élément à un nombre et le type du deuxième élément à un chaîne. Puisque nous avons seulement spécifié un type pour les deux premiers éléments, le reste peut être une chaîne ou un nombre. Créer des tuples b et c entraîne une erreur car nous avons essayé d'utiliser une chaîne comme valeur pour le premier élément alors que nous avions mentionné que le premier élément serait un nombre.
De même, nous ne pouvons pas définir la valeur d'un élément du tuple sur faux après avoir spécifié qu'il ne contiendra que des chaînes et des nombres. C'est pourquoi la dernière ligne génère une erreur.
le enum Le type de données est présent dans de nombreux langages de programmation tels que C et Java. JavaScript a été manquant, mais TypeScript vous permet de créer et de travailler avec des énumérations. Si vous ne savez pas quoi enums sont, ils vous permettent de créer une collection de valeurs liées en utilisant des noms mémorables.
enum Animaux chat, lion, chien, vache, singe let c: Animals = Animals.cat; console.log (Animaux [3]); // cow console.log (Animals.monkey); // 4
Par défaut, la numérotation des énumérations commence à 0, mais vous pouvez également définir une valeur différente pour le premier membre ou tout autre membre manuellement. Cela modifiera la valeur de tous les membres qui les suivront en augmentant leur valeur de 1. Vous pouvez également définir toutes les valeurs manuellement dans un champ. enum.
enum Animaux cat = 1, lion, chien = 11, vache, singe soit c: Animaux = Animaux.cat; console.log (Animaux [3]); // non défini console.log (Animals.monkey); // 13
Contrairement à l'exemple précédent, la valeur de Animaux [3] est indéfini cette fois. En effet, la valeur 3 aurait été attribuée à dog, mais nous avons explicitement défini sa valeur sur 11. La valeur pour vache reste à 12 et non 3, car la valeur est supposée être supérieure à la valeur du dernier membre.
Supposons que vous écrivez un programme dans lequel la valeur d'une variable est déterminée par les utilisateurs ou par le code écrit dans une bibliothèque tierce. Dans ce cas, vous ne pourrez pas définir correctement le type de cette variable. La variable peut être de n'importe quel type, comme une chaîne, un nombre ou un booléen. Ce problème peut être résolu en utilisant le tout type. Ceci est également utile lorsque vous créez des tableaux avec des éléments de types mélangés..
laissez a: any = "apple"; Soit b: any = 14; soit c: any = false; let d: any [] = ["porte", "cuisine", 13, faux, nul]; b = "personnes";
Dans le code ci-dessus, nous avons pu attribuer un numéro à b puis changez sa valeur en chaîne sans obtenir d'erreur car le type tout peut accepter tous les types de valeurs.
le jamais type est utilisé pour représenter des valeurs qui ne sont jamais supposées se produire. Par exemple, vous pouvez affecter jamais comme le type de retour d'une fonction qui ne retourne jamais. Cela peut se produire lorsqu'une fonction génère toujours une erreur ou lorsqu'elle est bloquée dans une boucle infinie.
laissez a: jamais; // Ok, laissez b: jamais = faux; // Erreur let c: never = null; // Erreur let d: never = "lundi"; // Fonction d'erreur bloquée (): never while (true)
Ce tutoriel vous a présenté tous les types disponibles dans TypeScript. Nous avons appris comment l'attribution d'un type de valeur différent à une variable entraîne des erreurs dans TypeScript. Cette vérification peut vous aider à éviter beaucoup d’erreurs lors de l’écriture de programmes volumineux. Nous avons également appris à cibler différentes versions de JavaScript..
Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Dans le prochain tutoriel, vous en apprendrez plus sur les interfaces dans TypeScript. Si vous avez des questions concernant ce didacticiel, faites-le moi savoir dans les commentaires..
Accentsconagua