Tentang "* .d.ts" di TypeScript

Saya merasa ingin tahu tentang *.d.tskarena saya seorang pemula di TypeScript. Dan saya diberitahu oleh seseorang bahwa jenis file ini adalah sesuatu seperti "file kepala" di C ++ tetapi untuk JS saja. Tapi saya tidak bisa mengonversi file JS murni ke *.d.tsfile kecuali saya dengan paksa mengubah *.jske *.ts. Jadi saya punya tiga file: file JS, file TS dan *.d.tsfile.

1. Apa hubungan mereka?

2. Bagaimana saya bisa menggunakan *.d.tsfile? Apakah ini berarti saya dapat menghapus *.tsfile secara permanen?

3. Jika demikian, bagaimana *.d.tsfile tersebut dapat mengetahui file JS mana yang dipetakan untuk dirinya sendiri?

Akan sangat baik jika seseorang bisa memberi saya contoh.

File "d.ts" digunakan untuk memberikan informasi jenis naskah tentang API yang ditulis dalam JavaScript. Idenya adalah bahwa Anda menggunakan sesuatu seperti jQuery atau garis bawah, pustaka javascript yang ada. Anda ingin menggunakannya dari kode skrip Anda.

Daripada menulis ulang jquery atau garis bawah atau apa pun dalam naskah, Anda dapat menulis file d.ts, yang hanya berisi anotasi jenis. Kemudian dari kode skrip Anda, Anda mendapatkan manfaat skrip jenis pemeriksaan statis saat masih menggunakan perpustakaan JS murni.

dsingkatan File Deklarasi :

Ketika skrip TypeScript dikompilasi ada opsi untuk menghasilkan file deklarasi (dengan ekstensi .d.ts) yang berfungsi sebagai antarmuka ke komponen dalam JavaScript yang dikompilasi. Dalam prosesnya kompiler menghapus semua fungsi dan metode tubuh dan hanya mempertahankan tanda tangan dari jenis yang diekspor. File deklarasi yang dihasilkan kemudian dapat digunakan untuk menggambarkan tipe TypeScript virtual yang diekspor dari pustaka JavaScript atau modul ketika pengembang pihak ketiga menggunakannya dari TypeScript.

Konsep file deklarasi analog dengan konsep file header yang ditemukan di 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;
}

Ketik file pernyataan dapat ditulis dengan tangan untuk pustaka JavaScript yang ada, seperti yang telah dilakukan untuk jQuery dan Node.js.

Koleksi besar file deklarasi untuk pustaka JavaScript populer di-host di GitHub di DefinitelyTyped dan Typings Registry . Utilitas baris perintah yang disebut pengetikan disediakan untuk membantu mencari dan menginstal file deklarasi dari repositori.

Saya tidak bisa berkomentar dan karenanya menambahkan ini sebagai jawaban.
Kami mengalami kesulitan mencoba memetakan tipe yang ada ke perpustakaan javascript.

Untuk memetakan .d.tsfile ke file javascript-nya, Anda perlu memberi nama .d.tsfile yang sama dengan file javascript, menyimpannya di folder yang sama, dan arahkan kode yang memerlukannya ke .d.tsfile tersebut.

misal: test.jsdan test.d.tsberada di testdir/folder, maka Anda mengimpornya seperti ini di komponen reaksi:

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

The .d.tsFile diekspor sebagai namespace seperti ini:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Contoh yang berhasil untuk kasus tertentu :

Katakanlah Anda punya modul-saya yang Anda bagikan melalui npm .

Anda menginstalnya dengan npm install my-module

Anda menggunakannya sebagai berikut:

import * as lol from 'my-module';

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

Logika modul adalah semuanya index.js :

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Untuk menambahkan pengetikan, buat file index.d.ts:

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

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

Seperti kata @takeshin .d singkatan file deklarasi untuk naskah (.ts).

Beberapa poin yang harus diklarifikasi sebelum melanjutkan untuk menjawab posting ini -

1. Naskah adalah superset sintaksis javascript.
2. Naskah tidak berjalan dengan sendirinya, itu perlu diubah menjadi javascript ( konversi naskah ke javascript )
3. "Tipe definisi" dan "Jenis memeriksa" adalah fungsi add-on utama yang menyediakan naskah melalui javascript. ( periksa perbedaan antara skrip jenis dan javascript )

Jika Anda berpikir jika naskah adalah superset sintaksis, manfaat apa yang ditawarkannya - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Untuk Menjawab posting ini -

Seperti yang kita bahas, naskah adalah superset dari javascript dan perlu diubah menjadi javascript. Jadi jika pustaka atau kode pihak ketiga ditulis dalam naskah, akhirnya akan dikonversi ke javascript yang dapat digunakan oleh proyek javascript tetapi sebaliknya tidak berlaku.

Untuk mantan -

Jika Anda menginstal perpustakaan javascript -

npm install --save mylib

dan coba mengimpornya dalam kode naskah -

import * from "mylib";

Anda akan mendapatkan kesalahan.

"Tidak dapat menemukan modul 'mylib'."

Seperti yang disebutkan oleh @Chris, banyak perpustakaan seperti garis bawah, Jquery sudah ditulis dalam javascript. Daripada menulis kembali perpustakaan-perpustakaan itu untuk proyek naskah, solusi alternatif dibutuhkan.

Untuk melakukan ini, Anda dapat memberikan jenis file deklarasi di pustaka javascript bernama * .d.ts, seperti dalam kasus mylib.d.ts di atas. File deklarasi hanya menyediakan jenis deklarasi fungsi dan variabel yang ditentukan dalam file javascript masing-masing.

Sekarang ketika Anda mencoba -

import * from "mylib";

mylib.d.ts diimpor yang bertindak sebagai antarmuka antara kode pustaka javascript dan proyek naskah.

Jawaban ini mengasumsikan Anda memiliki beberapa JavaScript yang tidak ingin Anda konversi ke TypeScript, tetapi Anda ingin mendapat manfaat dari pemeriksaan tipe dengan perubahan minimal pada Anda .js. SEBUAH.d.ts file yang sangat banyak seperti C atau C ++ file header. Tujuannya adalah untuk mendefinisikan antarmuka. Berikut ini sebuah contoh:

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

Hubungan di sini adalah: mashString.d.tsmendefinisikan antarmuka, mashString.jsmengimplementasikan antarmuka, dan main.jsmenggunakan antarmuka.

Agar pemeriksaan jenis ini berfungsi, Anda tambahkan // @ts-check ke .jsfile Anda . Tapi ini hanya memeriksa yang main.jsmenggunakan antarmuka dengan benar. Untuk juga memastikan bahwa mashString.jsmengimplementasikannya dengan benar, kami menambahkan /** @type {import("./mashString")} */sebelum ekspor.

Anda dapat membuat .d.tsfile awal menggunakantsc -allowJs main.js -d kemudian mengeditnya seperti yang diperlukan secara manual untuk meningkatkan pemeriksaan tipe dan dokumentasi.

Dalam kebanyakan kasus, implementasi dan antarmuka memiliki nama yang sama, di sini mashString. Tetapi Anda dapat memiliki implementasi alternatif. Misalnya kita bisa mengganti nama mashString.jsmenjadi reverse.jsdan memiliki alternatif encryptString.js.