web-dev-qa-db-fra.com

À propos de "* .d.ts" dans TypeScript

Je suis curieux à propos de *.d.ts à cause d'un débutant en TypeScript. Et quelqu'un m'a dit que ce type de fichier est quelque chose qui ressemble à "fichier principal" en C++, mais uniquement pour JS. Mais je ne peux pas convertir un fichier JS pur en fichier *.d.ts à moins de changer de force le *.js en *.ts. J'ai donc trois fichiers: un fichier JS, un fichier TS et un fichier *.d.ts.

  1. Quelle est la relation entre eux?

  2. Comment utiliser le fichier *.d.ts? Est-ce que cela signifie que je peux supprimer le fichier *.ts de manière permanente?

  3. Si tel est le cas, comment le fichier *.d.ts peut-il savoir quel fichier JS est mappé sur lui-même?

Merci beaucoup! Ce serait très bien si quelqu'un peut me donner un exemple.

typescript.d.ts
226
user3221822

Le fichier "d.ts" est utilisé pour fournir des informations de type TypeScript sur une API écrite en JavaScript. L'idée est que vous utilisez quelque chose comme jQuery ou underscore, une bibliothèque javascript existante. Vous voulez les utiliser à partir de votre code TypeScript.

Plutôt que de réécrire jquery ou underscore ou quoi que ce soit dans TypeScript, vous pouvez plutôt écrire le fichier d.ts, qui ne contient que les annotations de type. Puis, à partir de votre code TypeScript, vous bénéficiez des avantages de la vérification de type statique avec TypeScript, tout en utilisant une bibliothèque JS pure.

240
Chris Tavares

d signifie fichiers de déclaration :

Lorsqu'un script TypeScript est compilé, il est possible de générer un fichier de déclaration (avec l'extension .d.ts) qui sert d'interface aux composants du code JavaScript compilé. Au cours du processus, le compilateur supprime tous les corps de fonctions et de méthodes et ne conserve que les signatures des types exportés. Le fichier de déclaration résultant peut ensuite être utilisé pour décrire les types TypeScript virtuels exportés d'une bibliothèque ou d'un module JavaScript lorsqu'un développeur tiers le consomme à partir de TypeScript.

Le concept de fichier de déclaration est analogue au concept de fichier d’en-tête utilisé en C/C++.

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

Les fichiers de déclaration de type peuvent être écrits à la main pour les bibliothèques JavaScript existantes, comme cela a été fait pour jQuery et Node.js.

De grandes collections de fichiers de déclaration pour les bibliothèques JavaScript populaires sont hébergées sur GitHub dans DefinitelyTyped et dans le Typings Registry . Un utilitaire de ligne de commande appelé typings est fourni pour vous aider à rechercher et à installer les fichiers de déclaration à partir des référentiels.

48
takeshin

Je ne pouvais pas commenter et donc ajouter ceci comme réponse. Nous avons eu du mal à mapper les types existants vers une bibliothèque javascript.

Pour mapper un fichier d.ts sur son fichier javascript, vous devez lui attribuer le même nom que le fichier javascript, le conserver dans le même dossier et pointer le code qui en a besoin sur le fichier d.ts.

par exemple, test.js et test.d.ts sont dans testdir, puis vous l'importez comme ceci dans un composant react:

import * as Test from "./testdir/test";

Le fichier d.ts a été exporté sous forme d’espace de noms, comme suit:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}
35
ConstantinM

Exemple travaillé pour un cas spécifique :

Disons que vous avez mon-module que vous partagez via npm .

Vous l'installez avec npm install my-module

Vous l'utilisez ainsi:

import * as lol from 'my-module';

const a = lol('abc', 'def');

La logique du module est tout en index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Pour ajouter des saisies, créez un fichier index.d.ts:

declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
}

interface MyResponse {
  something: number;
  anything: number;
}
8
Boris Yakubchik

Comme @takeshin, cela signifie que .d représente un fichier de déclaration pour TypeScript (.ts).

Peu de points à clarifier avant de continuer à répondre à ce message -

  1. TypeScript est un sur-ensemble syntaxique de javascript.
  2. TypeScript ne fonctionne pas tout seul, il doit être transpilé en javascript ( Conversion de TypeScript en javascript )
  3. "Définition de type" et "Vérification de type" sont les principales fonctionnalités complémentaires fournies par TypeScript par rapport à javascript. ( vérifiez la différence entre le type script et javascript )

Si vous pensez que TypeScript est simplement un sur-ensemble syntaxique, quels avantages offre-t-il - https://basarat.gitbooks.io/TypeScript/docs/why-TypeScript.html#the-TypeScript-type-system =

Pour répondre à ce message -

Comme nous en avons discuté, TypeScript est un sur-ensemble de javascript et doit être transpilé en javascript. Ainsi, si une bibliothèque ou un code tiers est écrit en TypeScript, il est finalement converti en javascript qui peut être utilisé par un projet javascript, mais l'inverse n'est pas vrai.

Pour ex -

Si vous installez la bibliothèque javascript -

npm install --save mylib

et essayez de l'importer dans du code TypeScript -

import * from "mylib";

vous aurez une erreur.

"Impossible de trouver le module 'mylib'."

Comme mentionné par @Chris, de nombreuses bibliothèques telles que underscore, Jquery sont déjà écrites en javascript. Plutôt que de réécrire ces bibliothèques pour des projets TypeScript, une autre solution était nécessaire.

Pour ce faire, vous pouvez fournir un fichier de déclaration de type dans la bibliothèque javascript nommée * .d.ts, comme dans le cas précédent mylib.d.ts. Le fichier de déclaration fournit uniquement les déclarations de type des fonctions et des variables définies dans le fichier javascript correspondant.

Maintenant quand tu essaies -

import * from "mylib";

mylib.d.ts est importé et joue le rôle d'interface entre le code de bibliothèque javascript et le projet TypeScript.

5
Keshav