web-dev-qa-db-fra.com

Quelle est la différence entre * .d.ts et * .ts en tapuscrit?

Je commence à jouer avec TypeScript que j'ai trouvé vraiment génial. Mais je suis confus quant à la différence entre *.d.ts et *.ts. Quelle est la différence entre eux? quelqu'un peut-il m'expliquer avec un bon exemple?

40
Nur Rony

fichier de définition TypeScript (*.d.ts)

Ces fichiers sont utilisés pour décrire la "forme" d'un fichier JavaScript à utiliser dans TypeScript.

Par exemple, disons que j'ai le JavaScript suivant (Example.js):

function displayMessage(message) {
    alert(message);
}

Avec ce fichier seul, mon code TypeScript n'aura aucune idée de l'existence de cette fonction. Il ne connaîtra pas son nom et ne connaîtra pas ses paramètres. Nous pouvons résoudre ce problème en le décrivant dans un fichier de définition comme tel (Example.d.ts):

declare function displayMessage(message: string);

Maintenant, je peux utiliser la fonction displayMessage dans TypeScript sans erreurs de compilation et j'obtiendrai des erreurs de compilation lorsque je ne l'utiliserai pas correctement (par exemple, si j'ai fourni 2 arguments au lieu de 1 J'obtiendrais une erreur).

En bref: Les fichiers de définition vous permettent d'utiliser le code JavaScript existant dans TypeScript sans avoir à réécrire le code dans TypeScript.

fichier TypeScript (.ts)

Il s'agit de l'extension de fichier standard que vous utilisez lors de l'écriture de TypeScript. Il sera compilé en JavaScript.

46
David Sherret

Tout ce qui est autorisé dans un fichier * .d.ts peut également apparaître dans un fichier * .ts, mais pas l'inverse. Donc * .d.ts autorise un sous-ensemble des fonctionnalités de TypeScript.

Un fichier * .d.ts ne peut contenir que du code TypeScript qui ne génère aucun code JavaScript dans la sortie. Si vous essayez d'utiliser une fonctionnalité de TypeScript qui générerait JavaScript, vous obtiendrez une erreur.

Les interfaces sont autorisées, car elles disparaissent complètement après la compilation.

Les énumérations const (ajoutées en 1.4) sont également autorisées, contrairement aux énumérations ordinaires qui génèrent un objet dans le JavaScript de sortie.

Les classes, variables, modules et fonctions de niveau supérieur doivent être préfixés avec declare. Souvent, vous verrez un niveau supérieur declare module et le contenu à l'intérieur est donc aussi une pure déclaration:

declare module Something {
    var x;
}

Ils sont utiles pour bien plus que simplement exposer une interface TypeScript à du code écrit en JavaScript. Vous pouvez également les utiliser pour déclarer un ensemble d'interfaces communes qui sont largement utilisées dans votre code, il n'est donc pas nécessaire de require un module physique spécifique juste pour obtenir la visibilité de ces interfaces.

22
Daniel Earwicker