À propos de «* .d.ts» dans TypeScript

Je me sens curieux *.d.tsparce que je suis un débutant en TypeScript. Et quelqu'un m'a dit que ce type de fichier est quelque chose comme "fichier principal" en C ++ mais uniquement pour JS. Mais je ne peux pas convertir un fichier JS pur en *.d.tsfichier sauf si je change de force le *.jsen *.ts. J'ai donc trois fichiers: un fichier JS, un fichier TS et un *.d.tsfichier.

1. Quelle est la relation entre eux?

2. Comment utiliser le *.d.tsfichier? Cela signifie-t-il que je peux supprimer le *.tsfichier de façon permanente?

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

Ce serait très bien si quelqu'un pouvait me donner un exemple.

Le fichier "d.ts" est utilisé pour fournir des informations de type tapuscrit 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 consommer ceux de votre code tapuscrit.

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

dsignifie fichiers de déclaration :

Lorsqu'un script TypeScript est compilé, il existe une option pour générer un fichier de déclaration (avec l'extension .d.ts) qui fonctionne comme une interface avec les composants dans le JavaScript compilé. Dans le processus, le compilateur supprime tous les corps de fonction et de méthode et ne conserve que les signatures des types qui sont 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 les utilise à partir de TypeScript.

Le concept de fichiers de déclaration est analogue au concept de fichier d'en-tête trouvé 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 le registre des typages . Un utilitaire de ligne de commande appelé typings est fourni pour aider à rechercher et installer des fichiers de déclaration à partir des référentiels.

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

Pour mapper un .d.tsfichier à son fichier javascript, vous devez donner au .d.tsfichier le même nom que le fichier javascript, les conserver dans le même dossier et pointer le code qui en a besoin vers le .d.tsfichier.

par exemple: test.jset test.d.tssont dans le testdir/dossier, alors vous l'importez comme ceci dans un composant React:

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

Le .d.tsfichier a été exporté en tant qu'espace de noms comme ceci:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

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;
}

Comme @takeshin l'a dit .d signifie fichier de déclaration pour dactylographié (.ts).

Peu de points à clarifier avant de répondre à ce post -

1. Le tapuscrit est un surensemble syntaxique de javascript.
2. Typescript ne fonctionne pas seul, il doit être transposé en javascript ( conversion de typescript en javascript )
3. La "définition de type" et la "vérification de type" sont des fonctionnalités complémentaires majeures fournies par dactylographié via javascript. ( vérifier la différence entre le script de type et javascript )

Si vous pensez que le typage n'est qu'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é, le tapuscrit est un surensemble de javascript et doit être transposé en javascript. Donc, si une bibliothèque ou un code tiers est écrit en texte dactylographié, il est finalement converti en javascript qui peut être utilisé par le projet javascript mais vice versa ne se vérifie pas.

Par exemple -

Si vous installez la bibliothèque javascript -

npm install --save mylib

et essayez de l'importer en code dactylographié -

import * from "mylib";

vous obtiendrez une erreur.

"Impossible de trouver le module 'mylib'."

Comme mentionné par @Chris, de nombreuses bibliothèques comme le soulignement, Jquery sont déjà écrites en javascript. Plutôt que de réécrire ces bibliothèques pour des projets dactylographiés, une solution alternative é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 des déclarations de type de fonctions et de variables définies dans le fichier javascript respectif.

Maintenant, quand vous essayez -

import * from "mylib";

mylib.d.ts est importé, ce qui sert d'interface entre le code de bibliothèque javascript et le projet dactylographié.

Cette réponse suppose que vous avez du JavaScript que vous ne souhaitez pas convertir en TypeScript, mais que vous souhaitez bénéficier de la vérification de type avec des modifications minimales de votre .js. Un .d.tsfichier ressemble beaucoup à un fichier d'en-tête C ou C ++. Son but est de définir une interface. Voici un exemple:

mashString.d.ts

/** Makes a string harder to read. */
declare function mashString(
    /** The string to obscure */
    str: string
):string;
export = mashString;

mashString.js

// @ts-check
/** @type {import("./mashString")} */
module.exports = (str) => [...str].reverse().join("");

main.js

// @ts-check
const mashString = require("./mashString");
console.log(mashString("12345"));

La relation ici est: mashString.d.tsdéfinit une interface, mashString.jsimplémente l'interface et main.jsutilise l'interface.

Pour que la vérification de type fonctionne, vous ajoutez // @ts-check à vos .jsfichiers. Mais cela ne vérifie que main.jsl'utilisation correcte de l'interface. Pour garantir également qu'il mashString.jsimplémente correctement, nous ajoutons /** @type {import("./mashString")} */avant l'exportation.

Vous pouvez créer vos .d.tsfichiers initiaux à l'aide tsc -allowJs main.js -dpuis les modifier manuellement si nécessaire pour améliorer la vérification de type et la documentation.

Dans la plupart des cas, l'implémentation et l'interface ont le même nom, ici mashString. Mais vous pouvez avoir des implémentations alternatives. Par exemple , nous pourrions renommer mashString.jspour reverse.jset avoir une alternative encryptString.js.