Share
AngularJS a bouleversé le monde du développement front-end lors de sa sortie en regroupant un certain nombre de pratiques de développement d'applications Web nouvelles ou récentes dans un cadre puissant et facile à utiliser. Avec la version 2, l'équipe Angular est repartie de zéro avec un tout nouveau système. Beaucoup des idées derrière Angular sont toujours les mêmes, mais l'expérience de l'API et celle du développeur sont très différentes..
Dans ce didacticiel vidéo de mon cours intitulé Get Started With Angular 2, nous verrons comment TypeScript fonctionne avec Angular 2. Je vous montrerai également quelques syntaxe de base de TypeScript..
Angular 2 est construit sur TypeScript, qui utilise la syntaxe ES6 et se compile en JavaScript. Standard ES5 JavaScript est également valide TypeScript, vous pouvez donc toujours utiliser votre code existant..
Là où TypeScript diffère, c'est dans le système de frappe. Bien que ce soit facultatif, je vous recommande d’utiliser le système de dactylographie dans vos projets. Un système de frappe aide les projets de grande taille en identifiant le type attendu d'une valeur dans votre code.
Cela s'étend aux tableaux et aux objets et permet à un éditeur tel que Visual Studio Code de reconnaître la valeur attendue. Ceci est utile dans un grand projet ou lorsque d'autres développeurs travailleront avec votre code. Au lieu de vous demander quelles données vous devriez utiliser dans une variable générique, avec les typages, vous saurez quel type de valeur utiliser.
Avant de regarder un peu de syntaxe TypeScript, nous allons discuter de la tsconfig.json et le typings.json fichier que nous mettons en place avec notre projet.
Premièrement le tsconfig.json Le fichier qui contrôle notre fichier TypeScript sera compilé. La cible dans les options du compilateur indique au compilateur de générer du code JavaScript ES5..
module détermine le style de chargeur de module que nous utilisons; les autres options sont communes à JS, AMD et UMD. moduleRésolution décide comment les modules sont résolus, et carte source génère un fichier de carte correspondant qui mappe le code JavaScript généré avec son source SourceScript. le emitDecoratorMetadata et expérimentalDécorateurs nous permettent d'utiliser des décorateurs dans notre application. Nous discuterons plus des décorateurs dans un instant. enleverCommentaires détermine si les commentaires que nous ajoutons sont supprimés lors de la compilation, et enfin nous avons noImplicitAny. Ceci contrôle le comportement du compilateur quand il ne peut pas déduire un type. Comme TypeScript est éventuellement typé, si nous ne fournissons pas de type, il doit déterminer le type en fonction de la manière dont nous utilisons la variable..
Avec noImplicitAny mis à faux, le compilateur va par défaut tout pour un type, ça ne se comprend pas. Si nous mettons cela à vrai, TypeScript signalera une erreur lorsqu'il ne peut pas en déduire le type. Ensuite nous avons le exclure block, où nous excluons tous les fichiers que nous voulons que le compilateur ignore.
Outre les modules de noeud contenant des fichiers TypeScript, nous avons également inclus certains fichiers de la tapages dossier. En effet, deux types de frappe ont été installés. Nous devons donc en ignorer un..
Si nous allons à typings.json, on voit le es6-shim. Cela représente une dactylographie qui a été ajoutée à notre projet..
Le compilateur TypeScript ne comprend pas les méthodes pouvant être incluses avec des bibliothèques externes. Lorsque cela se produit, vous obtiendrez une erreur dans le compilateur. Pour résoudre ce problème, nous pouvons obtenir des typages pour la bibliothèque que nous utilisons afin que TypeScript comprenne les méthodes du compilateur..
Dans ce cas, le drapeau ambiant et les dépendances associées indiquent que le fichier de typage provient de DefinitelyTyped. DefinitelyTyped est un énorme référentiel de fichiers de frappe pour les bibliothèques les plus populaires. Dans notre typings.json fichier, nous saisissons le es6-shim fichier de dactylographie. Le nombre à la fin représente l'ID de validation du fichier de typage. Les dactylographies ont été installées dans la post-installation et le fichier de dactylographie a ensuite été copié dans notre tapages dossier pour nous.
Maintenant que nous comprenons ce que nous avons mis en place en ce qui concerne le compilateur TypeScript, examinons le langage lui-même. La première chose que nous allons examiner est la saisie des valeurs.
Nous avons ici les types de base que nous avons utilisés en JavaScript, mais nous avons l'identifiant ajouté qui indique au compilateur quel type de valeur a été utilisé avec la variable.
Si nous essayons de stocker un numéro dans le mon nom variable, nous aurons une erreur. Cela sera vrai si nous essayons de stocker le mauvais type dans n'importe quelle variable. Nous pouvons aussi utiliser tout pour spécifier que tout type est disponible pour cette variable:
var myName2: any = 'Reggie';
Nous pouvons aussi utiliser vide en tant que type, généralement en tant que type de retour d'une fonction qui ne renvoie pas de valeur.
Enfin, nous pouvons utiliser un tableau comme type. Nous utilisons le type des éléments à l'intérieur du tableau suivi de crochets pour indiquer qu'il s'agit d'un type de tableau.
lettres var: string [] = ['a', 'b', 'c'];
Nous pouvons aussi écrire un type de tableau comme ceci:
var letters2: tableau= ['a', 'b', 'c'];
Ensuite, nous avons l'interface, qui vous permet de définir un contrat dans votre code sur la forme de vos valeurs.
interface SampleInterface title: string;
Ici, nous avons créé un exemple d’interface, mais pour mieux le comprendre, utilisons cette interface..
Dans la fonction, nous spécifions l'interface comme forme de l'argument que nous transmettons à notre fonction. Ensuite, nous créons un objet à utiliser. La dernière ligne déconnecterait notre titre si nous compilions et exécutions cette.
Nous ne devons utiliser que la propriété title avec cette interface. Nous avons ajouté une autre propriété, mais TypeScript n’a aucune importance tant que la propriété title est incluse dans cet objet. Si nous ne l'avions pas, nous aurions une erreur. Notez également que l'ordre des propriétés n'a pas d'importance tant que la valeur requise est présente..
La prochaine partie de TypeScript que vous devez comprendre concerne les classes. En TypeScript, nous pouvons utiliser des classes pour construire nos applications de manière orientée objet. Angular 2 tire parti de cela en utilisant des classes comme l’épine dorsale du framework..
Au lieu d'apprendre la syntaxe propre au framework, la syntaxe Angular 2 est basée sur TypeScript. De cette façon, vous ne vous limitez pas à apprendre Angular 2, car la syntaxe sera utile lors du développement en dehors de Angular 2. À la base, une classe est créée comme suit:
classe SampleClass
Toute logique ainsi qu'une fonction constructeur peuvent être incluses dans cette classe.
Nous étendons cela dans Angular 2 grâce à l’utilisation de décorateurs, tels que @Composant(). Ce décorateur ajoute des métadonnées indiquant à l'application que cette classe est un composant angulaire. Nous construisons nos applications en ajoutant des métadonnées pour nos composants, services, directives, etc. Tout ce que nous construisons dans Angular 2 sera basé sur une classe. Nous allons explorer cela plus en construisant nos applications.
Enfin, à mesure que nous construirons notre application, nous exécuterons le script de démarrage NPM. Cela lancera notre application dans notre aperçu et exécutera le compilateur en mode veille. Toutes les modifications seront compilées et reflétées dans l'aperçu. Telles sont les bases de TypeScript que vous devez connaître pour débuter avec Angular 2..
Consultez la documentation TypeScript pour en savoir plus, car je n’ai fait qu’effleurer la surface des fonctionnalités disponibles. Vous en apprendrez aussi beaucoup plus dans le reste du cours - voir ci-dessous.
Dans le cours complet, Premiers pas avec Angular 2, vous apprendrez à créer une application web simple à partir de zéro, en commençant par l'échafaudage et la configuration de l'outillage. Vous apprendrez à utiliser la variante JavaScript typée de TypeScript pour créer des composants, des services et des directives Angular 2. En cours de route, vous découvrirez comment implémenter les bases d’une application moderne à page unique: routage, accès aux API externes, saisie utilisateur et validation..
Que vous soyez un développeur angulaire expérimenté souhaitant faire le saut vers cette dernière version ou un nouveau développeur souhaitant apprendre à créer des sites Web avec les dernières technologies, ce cours constitue un excellent point de départ pour apprendre Angular 2..
Accentsconagua