Über "*.d.ts" in TypeScript

Question

Ich bin neugierig auf .d.ts Deklarationsdateien, weil ich neu in der TypeScript-Programmiersprache bin. Mir wurde von jemandem gesagt, dass .d.ts Dateien ähnlich sind wie .h Headerdateien in den C & C++ Programmiersprachen, jedoch scheinen die .d.ts Dateien nicht ganz gleich zu funktionieren. Derzeit verstehe ich nicht, wie man die .d.ts Dateien korrekt benutzen kann. Es scheint, als ob ich meine .js oder .ts Dateien nicht zu den .d.ts Dateien hinzufügen kann, daher wird mein Projekt nur funktionieren, wenn es alle drei Dateitypen enthält. Das scheint mir viele Dateien zu sein. Um mir besser zu helfen zu verstehen, wie die .d.ts Dateien mit JavaScript & TypeScript zusammenhängen, habe ich einige Fragen, die ich gerne stellen würde.

---

1. Was ist die Beziehung zwischen den drei Dateien?

2. Wie kann ich die *.d.ts Datei verwenden, bedeutet das, dass ich die *.ts Datei dauerhaft löschen kann?

3. Wenn ja, wie kann die *.d.ts Datei wissen, welche JS-Datei sich auf sie bezieht?

---

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

Answer 1

Die "d.ts"-Datei wird verwendet, um TypeScript-Typinformationen über eine in JavaScript geschriebene API bereitzustellen. Die Idee ist, dass Sie etwas wie jQuery oder Underscore, eine existierende JavaScript-Bibliothek verwenden. Sie möchten diese in Ihrem TypeScript-Code verbrauchen.

Statt jQuery oder Underscore oder was auch immer in TypeScript neu zu schreiben, können Sie stattdessen die d.ts-Datei schreiben, die nur die Typanmerkungen enthält. Dann erhalten Sie aus Ihrem TypeScript-Code die Vorteile der statischen Typenüberprüfung, während Sie immer noch eine reine JS-Bibliothek verwenden.

Dies funktioniert dank der Einschränkung von TypeScript, die es Ihnen nicht erlaubt, die Dateierweiterung ".ts" am Ende des import-Statements hinzuzufügen. Aufgrund dessen, wenn Sie auf eine Datei verweisen, sagen wir, my-module.js, wenn daneben eine my-module.d.ts vorhanden ist, wird TypeScript deren Inhalt einbeziehen:

src/
  my-module.js
  my-module.d.ts
  index.ts

_{<i>my-module.js</i>}

const thing = 42;

module.exports = { thing };

_{<i>my-module.d.ts</i>}

export declare const thing: number;

_{<i>index.ts</i>}

import { thing } from "./my-module"; // <- keine Erweiterung

// Laufzeitimplementierung von `thing` stammt aus ".js"
console.log(thing); // 42

// Typdeklaration von `thing` stammt aus ".d.ts"
type TypeOfThing = typeof thing; // number

Answer 2

d steht 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 Methodenrümpfe und bewahrt nur die Signaturen der exportierten Typen. Die resultierende Deklarationsdatei kann dann verwendet werden, um die exportierten virtuellen TypeScript-Typen einer JavaScript-Bibliothek oder eines Moduls zu beschreiben, wenn ein Drittanbieterentwickler sie in TypeScript konsumiert.

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

Deklarationsdateien können für vorhandene JavaScript-Bibliotheken auch manuell erstellt werden, wie dies bei jQuery und Node.js der Fall ist.

Große Sammlungen von Deklarationsdateien für beliebte JavaScript-Bibliotheken werden auf GitHub in DefinitelyTyped und im Typings-Register gehostet. Ein Befehlszeilen-Dienstprogramm namens typings wird bereitgestellt, um bei der Suche und Installation von Deklarationsdateien aus den Repositories zu helfen.

Answer 3

Ich habe folgendes gelernt, als ich ein JavaScript-Projekt mühsam mit .d.ts-Dateien zuordnen musste.

Die Verwendung einer .d.ts-Datei zum Zuordnen von JavaScript erfordert, dass Sie Ihre .d.ts-Dateien genauso benennen wie Ihre .js-Dateien. Jede .js-Datei muss inline gehalten werden (im selben Verzeichnis) mit der .d.ts-Datei, die denselben Namen hat. Zeigen Sie den JS/TS-Code, der die Typen aus den .d.ts-Dateien benötigt, auf die .d.ts-Dateien.

Zum Beispiel: Wenn test.js und test.d.ts im testdir/-Ordner sind, importieren Sie es in einem React-Komponenten wie folgt:

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

Die .d.ts-Datei wurde als Namensraum exportiert, wie folgt:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Answer 4

Arbeitsbeispiel für einen speziellen Fall:

Angenommen, Sie haben ein my-module, das Sie über npm teilen.

Sie installieren es mit npm install my-module

Sie verwenden es folgendermaßen:

import * as lol from 'my-module';

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

Die Logik des Moduls befindet sich vollständig in index.js:

module.exports = function(firstString, secondString) {

  // Ihr Code

  return result
}

Um Typen hinzuzufügen, erstellen Sie eine Datei index.d.ts:

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

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

Answer 5

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

Einige Punkte, die geklärt werden müssen, bevor auf diesen Beitrag geantwortet wird -

1. Typescript ist eine syntaktische Obermenge von Javascript.
2. Typescript läuft nicht eigenständig, es muss in Javascript transpiliert werden (Typescript zu Javascript Konvertierung)
3. "Typdefinition" und "Typüberprüfung" sind wichtige zusätzliche Funktionen, die Typescript gegenüber Javascript bietet. (Unterschied zwischen Typescript und Javascript überprüfen)

Wenn Sie denken, dass Typescript nur eine syntaktische Obermenge ist, welche Vorteile bietet es dann an - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Um diesen Beitrag zu beantworten -

Wie wir besprochen haben, ist Typescript eine Obermenge von Javascript und muss in Javascript transpiliert werden. Wenn also eine Bibliothek oder Drittanbietercode in Typescript geschrieben ist, wird er letztendlich in Javascript konvertiert, das von einem Javascript-Projekt verwendet werden kann, aber nicht umgekehrt.

Zum Beispiel -

Wenn Sie eine Javascript-Bibliothek installieren -

npm install --save mylib

und versuchen, sie im Typescript-Code zu importieren -

import * from "mylib";

werden Sie einen Fehler erhalten.

"Modul 'mylib' kann nicht gefunden werden".

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

Um dies zu tun, können Sie eine Deklarationsdatei für Typen in der Javascript-Bibliothek bereitstellen, die als *.d.ts bezeichnet wird, 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.

Wenn Sie das jetzt versuchen -

import * from "mylib";

wird mylib.d.ts importiert, das als Schnittstelle zwischen dem Javascript-Bibliothekscode und dem Typescript-Projekt fungiert.