Informationen zu "* .d.ts" in TypeScript

Ich bin neugierig, *.d.tsweil ich ein Neuling in TypeScript bin. Und mir wurde von jemandem gesagt, dass diese Art von Datei so etwas wie "Kopfdatei" in C ++ ist, aber nur für JS. Aber ich kann eine reine JS-Datei nicht in eine Datei konvertieren, es *.d.tssei denn, ich ändere die zwangsweise *.jsin *.ts. Ich habe also drei Dateien: eine JS-Datei, eine TS-Datei und eine *.d.tsDatei.

1. Wie ist die Beziehung zwischen ihnen?

2. Wie kann ich die *.d.tsDatei verwenden? Bedeutet das, dass ich die *.tsDatei dauerhaft löschen kann ?

3. Wenn ja, wie kann die *.d.tsDatei wissen, welche JS-Datei sich selbst zugeordnet ist?

Es wäre sehr schön, wenn mir jemand ein Beispiel geben könnte.

Die Datei "d.ts" wird verwendet, um Informationen zum Typoskripttyp über eine in JavaScript geschriebene API bereitzustellen. Die Idee ist, dass Sie so etwas wie jQuery oder Unterstrich verwenden, eine vorhandene Javascript-Bibliothek. Sie möchten diese aus Ihrem Typoskript-Code verwenden.

Anstatt jquery oder underscore oder was auch immer in Typoskript neu zu schreiben, können Sie stattdessen die Datei d.ts schreiben, die nur die Typanmerkungen enthält. Aus Ihrem Typoskript-Code erhalten Sie dann die Typoskript-Vorteile der statischen Typprüfung, während Sie weiterhin eine reine JS-Bibliothek verwenden.

dsteht für Deklarationsdateien :

Wenn ein TypeScript-Skript kompiliert wird, besteht die Möglichkeit, eine Deklarationsdatei (mit der Erweiterung .d.ts) zu generieren, die als Schnittstelle zu den Komponenten im kompilierten JavaScript fungiert. Dabei entfernt der Compiler alle Funktions- und Methodenkörper und behält nur die Signaturen der exportierten Typen bei. Die resultierende Deklarationsdatei kann dann verwendet werden, um die exportierten virtuellen TypeScript-Typen einer JavaScript-Bibliothek oder eines JavaScript-Moduls zu beschreiben, wenn ein Drittanbieter sie von TypeScript verwendet.

Das Konzept der Deklarationsdateien ist analog zum Konzept der Header-Datei in 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;
}

Typdeklarationsdateien können für vorhandene JavaScript-Bibliotheken von Hand geschrieben werden, wie dies für jQuery und Node.js geschehen ist.

Große Sammlungen von Deklarationsdateien für beliebte JavaScript-Bibliotheken werden auf GitHub in DefinitelyTyped und in der Typings Registry gehostet . Ein Befehlszeilenprogramm namens typings hilft beim Suchen und Installieren von Deklarationsdateien aus den Repositorys.

Ich konnte keinen Kommentar abgeben und füge dies daher als Antwort hinzu.
Wir hatten einige Probleme beim Versuch, vorhandene Typen einer Javascript-Bibliothek zuzuordnen.

Um eine .d.tsDatei ihrer Javascript-Datei zuzuordnen , müssen Sie der .d.tsDatei denselben Namen wie der Javascript-Datei geben, sie im selben Ordner aufbewahren und den Code, der sie benötigt, auf die .d.tsDatei verweisen .

zB: test.jsund test.d.tsbefinden sich im testdir/Ordner, dann importieren Sie es so in eine Reaktionskomponente:

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

Die .d.tsDatei wurde wie folgt als Namespace exportiert:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Arbeitsbeispiel für einen bestimmten Fall :

Angenommen, Sie haben ein My-Modul , das Sie über npm freigeben .

Sie installieren es mit npm install my-module

Sie verwenden es so:

import * as lol from 'my-module';

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

Die Logik des Moduls ist alles in index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Erstellen Sie eine Datei, um Eingaben hinzuzufügen index.d.ts:

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

interface MyResponse {
  something: number;
  anything: number;
}

Wie @takeshin sagte, steht .d für Deklarationsdatei für Typoskript (.ts).

Einige Punkte müssen geklärt werden, bevor Sie mit der Beantwortung dieses Beitrags fortfahren.

1. Typoskript ist eine syntaktische Obermenge von Javascript.
2. Typoskript läuft nicht alleine, es muss in Javascript transpiliert werden ( Konvertierung von Typoskript in Javascript )
3. "Typdefinition" und "Typprüfung" sind wichtige Zusatzfunktionen, die Typoskript gegenüber Javascript bietet. ( Überprüfen Sie den Unterschied zwischen Typ Skript und Javascript )

Wenn Sie überlegen, ob Typoskript nur eine syntaktische Obermenge ist, welche Vorteile bietet es - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Um diesen Beitrag zu beantworten -

Wie bereits erwähnt, ist Typoskript eine Obermenge von Javascript und muss in Javascript transpiliert werden. Wenn also eine Bibliothek oder ein Code von Drittanbietern in Typoskript geschrieben ist, wird er schließlich in Javascript konvertiert, das vom Javascript-Projekt verwendet werden kann, aber umgekehrt nicht.

Zum Beispiel -

Wenn Sie eine Javascript-Bibliothek installieren -

npm install --save mylib

und versuchen Sie es in Typoskript-Code zu importieren -

import * from "mylib";

Sie werden einen Fehler erhalten.

"Modul 'Mylib' kann nicht gefunden werden."

Wie von @Chris erwähnt, sind viele Bibliotheken wie Unterstrich und Jquery bereits in Javascript geschrieben. Anstatt diese Bibliotheken für Typoskript-Projekte neu zu schreiben, war eine alternative Lösung erforderlich.

Zu diesem Zweck können Sie eine Typdeklarationsdatei in der Javascript-Bibliothek mit dem Namen * .d.ts bereitstellen, wie im obigen Fall mylib.d.ts. Die Deklarationsdatei enthält nur Typdeklarationen von Funktionen und Variablen, die in der jeweiligen Javascript-Datei definiert sind.

Jetzt, wenn Sie versuchen -

import * from "mylib";

mylib.d.ts wird importiert und fungiert als Schnittstelle zwischen Javascript-Bibliothekscode und Typoskript-Projekt.

Bei dieser Antwort wird davon ausgegangen, dass Sie über JavaScript verfügen, das Sie nicht in TypeScript konvertieren möchten, aber von der Typprüfung mit minimalen Änderungen an Ihrem Skript profitieren möchten .js. Eine .d.tsDatei ist einer C- oder C ++ - Headerdatei sehr ähnlich. Ihr Zweck ist es, eine Schnittstelle zu definieren. Hier ist ein Beispiel:

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"));

Die Beziehung hier ist: mashString.d.tsdefiniert eine Schnittstelle, mashString.jsimplementiert die Schnittstelle und main.jsverwendet die Schnittstelle.

Damit die Typprüfung funktioniert, fügen Sie // @ts-check sie Ihren .jsDateien hinzu. Dies überprüft jedoch nur, ob main.jsdie Schnittstelle korrekt verwendet wird. Um sicherzustellen, dass mashString.jses korrekt implementiert wird, fügen wir es /** @type {import("./mashString")} */vor dem Export hinzu.

Sie können Ihre ursprünglichen .d.tsDateien erstellen , indem Sie tsc -allowJs main.js -dsie nach Bedarf manuell bearbeiten, um die Typprüfung und Dokumentation zu verbessern.

In den meisten Fällen haben die Implementierung und die Schnittstelle hier den gleichen Namen mashString. Sie können jedoch alternative Implementierungen haben. Zum Beispiel könnten wir umbenennen mashString.jsinreverse.js und eine Alternative haben encryptString.js.