Informacje o „* .d.ts” w TypeScript

Jestem ciekawy, *.d.tsponieważ jestem nowicjuszem w TypeScript. Ktoś powiedział mi, że ten rodzaj pliku to coś w rodzaju „pliku głównego” w C ++, ale tylko dla JS. Ale nie mogę przekonwertować czystego pliku JS do *.d.tspliku, chyba że forcely zmienić *.jssię *.ts. Mam więc trzy pliki: plik JS, plik TS i *.d.tsplik.

1. Jaki jest związek między nimi?

2. Jak mogę użyć *.d.tspliku? Czy to oznacza, że ​​mogę *.tstrwale usunąć plik?

3. Jeśli tak, to w jaki sposób *.d.tsplik może wiedzieć, który plik JS jest mapowany na siebie?

Byłoby bardzo miło, gdyby ktoś mógł dać mi przykład.

Plik „d.ts” służy do dostarczania informacji o typie maszynopisu o interfejsie API napisanym w JavaScript. Chodzi o to, że używasz czegoś takiego jak jQuery lub podkreślenie, istniejąca biblioteka javascript. Chcesz konsumować je ze swojego kodu maszynowego.

Zamiast przepisywać jquery lub podkreślenie lub cokolwiek innego w pismach maszynowych, możesz zamiast tego napisać plik d.ts, który zawiera tylko adnotacje typu. Następnie z kodu maszynowego uzyskujesz zalety maszynowego sprawdzania typu statycznego przy jednoczesnym korzystaniu z czystej biblioteki JS.

doznacza pliki deklaracji :

Po skompilowaniu skryptu TypeScript istnieje możliwość wygenerowania pliku deklaracji (z rozszerzeniem .d.ts), który działa jako interfejs do komponentów w skompilowanym JavaScript. W tym procesie kompilator usuwa wszystkie ciała funkcji i metod oraz zachowuje tylko sygnatury eksportowanych typów. Wynikowy plik deklaracji można następnie wykorzystać do opisania wyeksportowanych wirtualnych typów TypeScript biblioteki lub modułu JavaScript, gdy programista zewnętrzny korzysta z niego z TypeScript.

Pojęcie plików deklaracji jest analogiczne do pojęcia pliku nagłówkowego w 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;
}

Pliki deklaracji typu mogą być pisane ręcznie dla istniejących bibliotek JavaScript, tak jak zrobiono to dla jQuery i Node.js.

Duże zbiory plików deklaracji dla popularnych bibliotek JavaScript są przechowywane na GitHub w DefinitelyTyped i typowania Rejestru . Udostępniono narzędzie wiersza polecenia o nazwie typings, które pomaga wyszukiwać i instalować pliki deklaracji z repozytoriów.

Nie mogłem komentować, dlatego dodam to jako odpowiedź.
Mieliśmy pewien problem z mapowaniem istniejących typów na bibliotekę javascript.

Aby zamapować .d.tsplik na plik javascript, należy nadać mu .d.tstaką samą nazwę jak plik javascript, przechowywać go w tym samym folderze i wskazać kod, który go potrzebuje .d.ts.

np .: test.jsi test.d.tsznajdują się w testdir/folderze, następnie importujesz go w ten sposób do komponentu reagującego:

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

.d.tsPlik był eksportowany jako nazw takich jak to:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Przykład działania dla konkretnego przypadku :

Załóżmy, że masz mój moduł , który udostępniasz przez npm .

Instalujesz za pomocą npm install my-module

Używasz go w ten sposób:

import * as lol from 'my-module';

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

Logika modułu jest w index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Aby dodać typowanie, utwórz plik index.d.ts:

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

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

Jak powiedział @takeshin .d oznacza plik deklaracji dla maszynopisu (.ts).

Kilka punktów do wyjaśnienia przed przejściem do odpowiedzi na ten post -

1. Maszynopis to nadzbiór składniowy javascript.
2. Maszynopis nie działa samodzielnie, należy go przetłumaczyć na javascript ( konwersja maszynopisu na javascript )
3. „Definicja typu” i „Sprawdzanie typu” są głównymi funkcjami dodatkowymi zapewnianymi przez maszynopis nad javascript. ( sprawdź różnicę między skryptem typu a skryptem javascript )

Jeśli zastanawiasz się, czy maszynopis to po prostu nadzbiór składniowy, jakie oferuje to korzyści - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Aby odpowiedzieć na ten post -

Jak już omawialiśmy, maszynopis jest nadzbiorem javascript i musi zostać przełożony na javascript. Więc jeśli kod biblioteki lub strony trzeciej jest zapisany na maszynie, ostatecznie zostanie przekonwertowany na javascript, który może być używany przez projekt javascript, ale odwrotnie nie jest prawdą.

Na przykład -

Jeśli zainstalujesz bibliotekę javascript -

npm install --save mylib

i spróbuj zaimportować go do kodu maszynowego -

import * from "mylib";

dostaniesz błąd.

„Nie można znaleźć modułu„ mylib ”.”

Jak wspomniano @Chris, wiele bibliotek takich jak podkreślenie, Jquery jest już napisanych w javascript. Zamiast ponownego pisania tych bibliotek dla projektów maszynopisowych potrzebne było alternatywne rozwiązanie.

W tym celu możesz podać plik deklaracji typu w bibliotece javascript o nazwie * .d.ts, podobnie jak w powyższym przypadku mylib.d.ts. Plik deklaracji zawiera tylko deklaracje typu funkcji i zmiennych zdefiniowanych w odpowiednim pliku javascript.

Teraz, kiedy spróbujesz -

import * from "mylib";

Mylib.d.ts zostaje zaimportowany, co działa jako interfejs między kodem biblioteki javascript a projektem maszynopisu.

Ta odpowiedź zakłada, że ​​masz JavaScript, którego nie chcesz przekonwertować na TypeScript, ale chcesz skorzystać ze sprawdzania tekstu przy minimalnych zmianach w swoim .js. .d.tsPliku jest bardzo podobny do C lub pliku nagłówka C ++. Jego celem jest zdefiniowanie interfejsu. Oto przykład:

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

Relacja jest tutaj: mashString.d.tsdefiniuje interfejs, mashString.jsimplementuje interfejs i main.jsużywa interfejsu.

Aby sprawdzanie typu działało, dodajesz // @ts-check do .jsplików. Ale to sprawdza tylko, czy main.jspoprawnie używa interfejsu. Aby również upewnić się, że mashString.jsimplementuje to poprawnie, dodajemy /** @type {import("./mashString")} */przed eksportem.

Możesz utworzyć .d.tspliki początkowe , używając, tsc -allowJs main.js -da następnie edytować je ręcznie, aby poprawić sprawdzanie typu i dokumentację.

W większości przypadków implementacja i interfejs mają tutaj tę samą nazwę mashString. Ale możesz mieć alternatywne implementacje. Na przykład moglibyśmy przemianować mashString.jssię reverse.jsi mieć alternatywę encryptString.js.