web-dev-qa-db-fra.com

Que sont les dactylographies dans Typescript

Je suis nouveau sur Angular2 et je l’apprécie jusqu’à présent, mais il ya un problème: Typings . Je n'arrive pas à comprendre comment les utiliser et ce qu'ils sont exactement. Certains endroits recommandent d'utiliser des dactylographies, d'autres d'utiliser npm pour installer des définitions. 

Je suis confus!! 

typescripttypescript-typings
23
Alfy

JavaScript n'est pas typé, ce qui signifie que nous pouvons transmettre et utiliser des données, des objets et des fonctions sans contrainte. Nous pouvons écrire du code qui appelle des méthodes qui n'existent pas sur un objet ou des variables de référence que nous n'avons pas. Il est parfois difficile de détecter ces types d’erreurs lorsque vous écrivez du code, ce qui peut conduire à des codes instables et erronés. Faire de gros changements dans votre code peut devenir difficile et risqué, car vous ne voyez pas immédiatement si certaines modifications entrent en conflit avec le reste du code ailleurs.

TypeScript consiste principalement à ajouter types à JavaScript. Cela signifie que TypeScript nécessite que vous décriviez avec précision le format de vos objets et de vos données. Cela signifie que le compilateur peut étudier votre code et détecter les erreurs. Vous pouvez voir que vous essayez d'appeler une fonction avec de mauvais types d'arguments ou de référencer une variable qui n'est pas accessible dans la portée actuelle.

Lorsque vous écrivez vous-même TypeScript, cette description formelle du code fait partie du code lui-même.

Toutefois, lorsque vous utilisez des bibliothèques externes telles que jQuery ou moment.js, le code ne contient aucune information sur les types. Donc, pour l'utiliser avec TypeScript, vous devez également obtenir des fichiers décrivant les types de ce code. Ce sont les fichiers de déclaration type, le plus souvent avec le nom d'extension .d.ts. Heureusement, les gens ont écrit ces types de fichiers de déclaration de types pour les bibliothèques javascript les plus courantes.

Typings était simplement un outil pour installer ces fichiers. Il est maintenant préférable de utilisez simplement npm .

Une fois que vous avez installé ces fichiers, ce qui signifie en gros uniquement les télécharger et les placer dans votre projet, le compilateur TypeScript comprendra * ce code externe et vous pourrez utiliser ces bibliothèques. Sinon, vous n'obtiendrez que des erreurs partout.

* En fonction de la manière dont vous avez configuré et configuré votre projet, vous devrez peut-être configurer TypeScript pour rechercher ces fichiers de manière spécifique ou simplement fonctionner sans aucune configuration de votre part.

75
Alex

Que sont les typages?

En bref, TypeScript ajoute le typage statique à JavaScript. Etant donné que JavaScript seul ne définit pas de telles définitions de types, elles doivent être écrites et incluses dans le processus de compilation TypeScript par le biais de mécanismes supplémentaires. En d'autres termes, une bibliothèque JavaScript peut définir une fonction:

export function createPerson(name, age, initScore) { ... }

Mais dans l'environnement typé statiquement de TypeScript, il serait beaucoup plus utile que le développeur ait quelque chose comme ceci:

interface Person {
    name: string,
    age: number,
    score: number
}

export function createPerson(name: string, age: number, initScore?: number): Person;

Le but de type declarations, souvent appelé typings, définitions de types ou juste types, est de renseigner ces détails sur les implémentations, en identifiant ainsi les API abus, même entre bibliothèques. Ils résident généralement dans des fichiers avec l'extension .d.ts et peuvent être construits à partir de fichiers .ts à l'aide du compilateur. Cependant, lorsque les programmes ne sont pas écrits en TypeScript, ces déclarations sont écrites manuellement.

Cela dit, votre confusion est quelque peu justifiée: plusieurs approches pour l’installation et la gestion de déclarations TypeScript ont été appliquées au fil du temps. Cependant, à l'heure actuelle, il existe un moyen officiel (et donc recommandé) d'installer et d'utiliser des fichiers de déclaration. Il est documenté ici :

Dans TypeScript 2.0, il est devenu beaucoup plus facile de consommer des fichiers de déclaration lors de leur acquisition, de leur utilisation et de leur recherche. Cette page détaille exactement comment faire les trois

[...]

Obtenir des déclarations de type dans TypeScript 2.0 et versions ultérieures ne nécessite aucun outil en dehors de npm.

Par exemple, récupérer des déclarations pour Angular est aussi simple que d'installer cette dépendance dans votre projet:

npm install --save @types/angular

Les paquetages de l'espace de noms @types seront automatiquement pris en compte par le compilateur pour la récupération des déclarations de type. De plus, si ces déclarations sont déjà incorporées dans le paquet npm, vous ne devez rien installer d'autre que l'installation de ce paquet (un exemple d'un tel paquet est redux ). Pour plus d'informations, voir la documentation sur tsconfig.json . Il existe également une section entière sur la création de vos propres fichiers de déclaration , qui est une lecture recommandée à tous les développeurs souhaitant ajouter des déclarations de type à leurs propres bibliothèques.

16
E_net4

Je n'ai travaillé qu'avec TypeScript dans un projet ASP.NET (classique), je ne peux donc pas vous dire quelle est la manière typique de procéder. Mais il existe quelques options peu orthodoxes:

  • Recherchez vous-même les fichiers * .d.ts et copiez-les simplement dans votre projet quelque part. Ils ne seront pas mis à jour automatiquement avec vos bibliothèques, cependant.
  • Déclarez tout ce que la bibliothèque vous donne comme tout. Par exemple, vous pouvez le faire pour JQuery, si vous n’avez pas encore installé de typages JQuery: declare var $: any;
0
libertyernie

Je vais essayer de l'expliquer avec un exemple simple. Si vous utilisez des bibliothèques tierces telles que jQuery dans des projets Angular ou TypeScript

Vous pouvez directement référencer le fichier jquery (fichier angular.json) dans des projets angulaires et écrire le code en déclarant $ ou jQuery comme indiqué ci-dessous 

comme indiqué ci-dessous

declare var $: any;
ngOnInit() {
   $(document).ready(function() {
     alert('I am Called From jQuery');
   });
}

Le code fonctionnera. Mais le problème est que TypeScript concerne uniquement la vérification de type et la détection des erreurs dans le code au moment de la compilation uniquement. 

Comme TypeScript ne sait rien de la bibliothèque jquery, il ne peut pas effectuer de vérification de type statique. le code ci-dessous compile sans erreur

ngOnInit() {
   $(document).ready(function() {
     $('#my-button').click(1);
 });
}

Je passe le mauvais paramètre pour cliquer sur la fonction de jquery et le code ci-dessus sera compilé et au moment de l'exécution, chaque fois que nous cliquerons sur un élément du bouton, une erreur sera générée.

C'est là que les tapages entrent en image. Mais si vous avez des définitions de type pour jquery plug, ces erreurs peuvent être détectées uniquement au moment de la compilation.

Installer les typages jquery à partir des paquets de noeud et les référencer dans le code 

npm install --save jquery
npm install --save @types/jquery

Et importer un objet jquery dans le code comme indiqué ci-dessous

import * as $ from 'jquery';

Et maintenant, le code ci-dessus ne sera pas compilé et génère une erreur en disant

Argument of type ‘1’ is not assignable to parameter of type ‘false | EventHandlerBase<HTMLElement, ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>>’

Vous pouvez en savoir plus sur Comment installer et utiliser JQuery dans des projets angulaires

0
Arun