Eh bien, bon retour et dans cette leçon, nous allons vous expliquer comment installer TypeScript dans votre projet et en s'assurant que tout le reste vous voudrez peut-être utiliser correctement les exécutions. Et comme vous le savez peut-être, si vous avez vu l'une de mes autres vidéos, Je suis un utilisateur de Visual Studio, donc je vais utiliser ça pour mettre ça en place. Et ce faisant, je vais juste créer un tout nouveau projet et ce sera une application Web ASP.NET Core. Et je vais lui donner un nom là-bas et je vais utiliser le modèle MVC ici, non configuré pour HTTPS. J'utilise Core 3.1. Cela devrait fonctionner dans n'importe quelle autre version que vous utilisez de Core. Et la première chose que je veux faire pour pouvoir utiliser TypeScript est-ce que je vais ajouter ce paquet, donc je vais utiliser NuGet pour faire ça et similaire, c'est la version Microsoft de Node Package Manager. Et je vais avoir besoin de ce paquet qui construit mon TypeScript en JavaScript. Donc je vais juste ajouter ça ici dans le projet. Et toutes dépendances, tout comme npm, toutes les dépendances doivent être installées à la fois. La prochaine chose que je dois faire est-ce que je vais ajouter un fichier de configuration TypeScript. Je peux donc le faire dans Visual Studio juste en faisant Ajouter un nouvel élément. Et je veux chercher ici TypeScript, cherchez-le pour ne pas avoir à aller partout. On y va. Tsconfig.json. Donc, vous pouvez simplement laisser ça appelé ça. Maintenant, vous obtiendrez un ensemble d'options par défaut quand tu mets ça là-dedans et j'ai un ensemble assez typique d'autres options que j'aime faire et c'est l'endroit où vous pouvez configurer le chemin le compilateur TypeScript fonctionne. Remarquez, par exemple, ici, Je cible ECMAScript 6. J'ai une bibliothèque qui comprendra ES2017 et être capable de manipuler le DOM. Et surtout, au minimum, Je veux dire quel est mon répertoire de sortie va être pour mes fichiers TypeScript qui deviennent JavaScript. Donc, dans ce cas, ils sont sous wwwroot / js. Alors assurons-nous que j'ai ça. On y va. J'ai déjà ce dossier là-bas. Donc c'est bien, très bien jusqu'à présent. J'ai aussi besoin d'un endroit que je vais stocker mes scripts TypeScript. Je vais donc ajouter un nouveau dossier ici appelé Scripts. Pas sous wwwroot. Cela existe en dehors de cela. Et ajoutons un fichier TypeScript ici et voir si nous pouvons faire fonctionner quelque chose. Ainsi, un fichier TypeScript se termine simplement par ts. Nous y voilà, et je l'appellerai juste main.ts. Alors qu'est-ce qui va se passer ici est-ce que nous allons faire notre TypeScript et puis à chaque fois que je construis ce projet dans Visual Studio, chaque fois que je compile, cela va se transformer en bon vieux JavaScript. Donc tu peux voir un peu tout de suite les choses c'est un peu différent. Nous avons la saisie ici, par exemple. On peut dire que c'est une chaîne et utilisé avant d'être défini. J'obtiens ces petites lignes vertes ondulées ici. C'est donc bien de Visual Studio, plutôt, le peluchage de TypeScript ici qui montre ces choses comme des erreurs et des avertissements. Donc dans ce cas, par exemple, J'ai le nom là-dedans et il est déduit d'une chaîne littérale, donc je n'avais pas vraiment besoin de ça. Donc ça va me signaler pour ce genre de choses. Et puis celui-ci, l'appelant a été utilisé avant qu'il ne soit défini mais je pense que tout ira bien là-bas. Et vous pouvez simplement les considérer comme des indices. Si cela vous ennuie, il y a un fichier que vous pouvez ouvrir, eslintrc, et vous le trouverez généralement dans votre répertoire d'utilisateurs, directement à la racine du répertoire des utilisateurs. Vous pouvez voir là-bas, il existe certaines des options que vous pouvez modifier. Donc, si vous le mettez à zéro, cela le rendra faux. Assertions de type cohérent. Ce ne sont que quelques-uns de ceux que je change généralement car encore une fois, ce sont des indices pour la plupart et si tu sais quel genre de JavaScript que vous créez là-bas, alors c'est bien, tant mieux. Alors je devrais juste pouvoir pour toujours construire le projet avec ceci parce que je crois que ce n'est qu'un avertissement. Alors faisons la construction ici et voyez si cela fonctionne. A réussi et donc j'aurais dû, on y va, il y a mon fichier principal c'est dans wwwroot et encore une fois, aucune preuve nécessairement que cela venait de TypeScript. C'est juste du bon vieux JavaScript ordinaire. Alors si j'y vais, allons-y ici et je vais créer une page et testons et assurons-nous que cela fonctionne réellement. Maintenant, certaines de ces fonctionnalités, nous allons ajouter plus tard. Pour le moment, tout ce que j'ai est principal et je vais appeler ma fonction tsHello. C'est donc juste du JavaScript normal. J'ai mon lien de script là-bas. J'appelle tsHello, qui se termine dans mon fichier JavaScript principal. Et je vais pouvoir en parler et voir la valeur lorsque je clique sur ce bouton et cela devrait nous donner au moins une bonne idée pour commencer par ce qui fonctionne ici. Et remarquez, nous ne voyons encore rien, alors vérifions notre console et nous pouvons voir là-bas, d'accord, c'est parce que nous avons du JQuery sur la page et JQuery n'est pas encore pris en charge. Alors construisons ça dans puis nous y retournerons et nous ferons le tout. Alors ce que nous devons faire ensuite ajoute la prise en charge de JQuery. Nous allons l'ajouter à notre fichier package.json et nous n'en avons pas encore, donc dans Visual Studio, je vais le refaire comme un nouvel élément. Et c'est dans la liste ici en tant que fichier de configuration npm. Nous pouvons simplement le laisser appelé package.json et je vais ajouter dans mes dépendances de développement là-bas que je suis dépendant de JQuery et je crois que la version que j'utilise est 3.5.1. Alors je vais ajouter ça là-dedans et cela devrait me permettre pour utiliser maintenant JQuery et en fait, Je pense que je peux ajouter un autre fichier TypeScript. Et utilisez également JQuery dans ce fichier. Voyons voir, alors nous allons faire ça et nous l'appellerons bibliothèque. Nous allons juste aller de l'avant et attraper quelle que soit la version de JQuery ici. Ok, donc je vais juste lancer une petite fonction là-bas. Il dit encore une fois ne peut pas trouver le nom mais il devrait pouvoir au moment où nous construisons à nouveau et au moment où nous exécutons cette page. Et nous avons juste ce drapeau inutile pour tout. Donc ts-example-2 sur notre page, revenons à tsBonjour, c'est juste une petite envergure dans lequel on va coller quelque chose et nous allons appeler cette version de l'émission d'ici. Très bien, alors essayons ça et voir si nous travaillons. Et nous essaierons à nouveau et ne verrons rien. D'accord, nous avons toujours $ non défini. Alors, assurons-nous qu'il est réellement en place. D'accord, donc je fais référence à cela à partir de mes modules Node au lieu de wwwroot. C'est donc juste un problème particulier dans mon projet ici. Nous allons donc inclure cela. On y va. Et nous allons lui donner un autre essai ici. Maintenant, si vous rencontrez toujours des problèmes avec ça et le problème que tu pourrais avoir est que JQuery n'est pas reconnu. Il y a une petite chose que vous pourriez avoir à faire. Dans mon cas particulier, j'ai ajouté JQuery en utilisant npm. Donc, si vous exécutez cette petite déclaration, cela devrait faire en sorte que le support de JQuery fonctionne toujours dans votre application, et je vais rendre cela un peu plus grand pour vous. Donc, si vous avez ajouté JQuery, si vous l'utilisez dans le cadre du modèle qui était déjà là, vous n'en aurez peut-être pas besoin. Mais dans ce cas, j'y suis lié sur ma page en utilisant npm. Cela devrait donc faire en sorte que cela fonctionne. Ramenons ce bonjour, le monde remonte. Tu vois, parfois bonjour, le monde n'est pas si simple, n'est-ce pas? Nous ramènerons ça et voyez si cela fonctionne. Ah, maintenant nous avons notre feuille de style. On y va. Alors j'ai eu le bonjour et voilà, ma version JQuery est la 3.5.1. Donc, dans cette leçon, nous avons appris comment installer JQuery dans notre application Web. Et comment nous assurer que nous avons du soutien pour les bibliothèques tierces. Restez à l'écoute, dans notre prochaine leçon, nous allons faire nos premières fonctionnalités sur la vue de TypeScript, première partie.
