Jestem ciekawy, *.d.ts
ponieważ 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.ts
pliku, chyba że forcely zmienić *.js
się *.ts
. Mam więc trzy pliki: plik JS, plik TS i *.d.ts
plik.
Jaki jest związek między nimi?
Jak mogę użyć
*.d.ts
pliku? Czy to oznacza, że mogę*.ts
trwale usunąć plik?Jeśli tak, to w jaki sposób
*.d.ts
plik może wiedzieć, który plik JS jest mapowany na siebie?
Byłoby bardzo miło, gdyby ktoś mógł dać mi przykład.
typescript
.d.ts
iliketocode
źródło
źródło
Odpowiedzi:
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.
źródło
d
oznacza pliki deklaracji :źródło
typings
narzędzie wiersza poleceń nie jest tak naprawdę potrzebne od TypeScript 2.0. Bardziej aktualnym podejściem jest używanie opakowań do pisania za pomocą repozytorium npm w@types
przestrzeni nazw. Aby uzyskać więcej informacji, patrz github.com/typings/typings/blob/master/README.mdNie mogłem komentować, dlatego dodam to jako odpowiedź.
Mieliśmy pewien problem z mapowaniem istniejących typów na bibliotekę javascript.
Aby zamapować
.d.ts
plik na plik javascript, należy nadać mu.d.ts
taką samą nazwę jak plik javascript, przechowywać go w tym samym folderze i wskazać kod, który go potrzebuje.d.ts
.np .:
test.js
itest.d.ts
znajdują się wtestdir/
folderze, następnie importujesz go w ten sposób do komponentu reagującego:.d.ts
Plik był eksportowany jako nazw takich jak to:źródło
.d.ts
plik ten musi również mieć taką samą nazwę jak pakiet do zaimportowania.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:
Logika modułu jest w
index.js
:Aby dodać typowanie, utwórz plik
index.d.ts
:źródło
Jak powiedział @takeshin .d oznacza plik deklaracji dla maszynopisu (.ts).
Kilka punktów do wyjaśnienia przed przejściem do odpowiedzi na ten post -
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 -
i spróbuj zaimportować go do kodu maszynowego -
dostaniesz błąd.
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 -
Mylib.d.ts zostaje zaimportowany, co działa jako interfejs między kodem biblioteki javascript a projektem maszynopisu.
źródło
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.ts
Pliku jest bardzo podobny do C lub pliku nagłówka C ++. Jego celem jest zdefiniowanie interfejsu. Oto przykład:mashString.d.ts
mashString.js
main.js
Relacja jest tutaj:
mashString.d.ts
definiuje interfejs,mashString.js
implementuje interfejs imain.js
używa interfejsu.Aby sprawdzanie typu działało, dodajesz
// @ts-check
do.js
plików. Ale to sprawdza tylko, czymain.js
poprawnie używa interfejsu. Aby również upewnić się, żemashString.js
implementuje to poprawnie, dodajemy/** @type {import("./mashString")} */
przed eksportem.Możesz utworzyć
.d.ts
pliki początkowe , używając,tsc -allowJs main.js -d
a 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.js
sięreverse.js
i mieć alternatywęencryptString.js
.źródło