Bagaimana Anda menghasilkan file definisi “typings” .d.ts dari pustaka JavaScript yang ada?

Saya menggunakan banyak perpustakaan baik milik saya sendiri maupun pihak ketiga. Saya melihat direktori "mengetik" berisi beberapa untuk Jquery dan WinRT ... tetapi bagaimana mereka dibuat?

Ada beberapa opsi yang tersedia untuk Anda tergantung pada perpustakaan yang bersangkutan, bagaimana ini ditulis, dan tingkat akurasi apa yang Anda cari. Mari kita tinjau opsi, dalam urutan keinginan yang menurun.

Mungkin Sudah Ada

Selalu periksa DefinitelyTyped ( https://github.com/DefinitelyTyped/DefinitelyTyped ) terlebih dahulu. Ini adalah repo komunitas yang penuh dengan ribuan file .d.ts dan kemungkinan besar hal yang Anda gunakan sudah ada di sana. Anda juga harus memeriksa TypeSearch ( https://microsoft.github.io/TypeSearch/ ) yang merupakan mesin pencari untuk file .d.ts yang diterbitkan NPM; ini akan memiliki sedikit lebih banyak definisi daripada DefinitelyTyped. Beberapa modul juga mengirimkan definisi mereka sendiri sebagai bagian dari distribusi NPM mereka, jadi lihat juga apakah itu masalahnya sebelum mencoba untuk menulis sendiri.

Mungkin Anda Tidak Membutuhkannya

TypeScript sekarang mendukung --allowJsflag dan akan membuat lebih banyak inferensi berbasis JS dalam file .js. Anda dapat mencoba memasukkan file .js dalam kompilasi Anda bersama dengan --allowJspengaturan untuk melihat apakah ini memberi Anda informasi jenis yang cukup. TypeScript akan mengenali hal-hal seperti kelas gaya ES5 dan komentar JSDoc dalam file-file ini, tetapi mungkin akan tersandung jika pustaka menginisialisasi dirinya dengan cara yang aneh.

Mulai Dengan --allowJs

Jika --allowJsmemberi Anda hasil yang layak dan Anda ingin menulis sendiri file definisi yang lebih baik, Anda dapat bergabung --allowJsdengan --declarationuntuk melihat "tebakan terbaik" TypeScript di jenis pustaka. Ini akan memberi Anda titik awal yang baik, dan mungkin sama bagusnya dengan file yang ditulis tangan jika komentar JSDoc ditulis dengan baik dan kompiler dapat menemukannya.

Mulai dengan dts-gen

Jika --allowJstidak berhasil, Anda mungkin ingin menggunakan dts-gen ( https://github.com/Microsoft/dts-gen ) untuk mendapatkan titik awal. Alat ini menggunakan bentuk runtime objek untuk menghitung secara akurat semua properti yang tersedia. Di sisi positifnya, ini cenderung sangat akurat, tetapi alat ini belum mendukung pengikisan komentar JSDoc untuk mengisi jenis tambahan. Anda menjalankan ini seperti ini:

npm install -g dts-gen
dts-gen -m <your-module>

Ini akan menghasilkan your-module.d.tsdi folder saat ini.

Tekan Tombol Tunda

Jika Anda hanya ingin melakukan semuanya nanti dan pergi tanpa mengetik untuk sementara waktu, di TypeScript 2.0 sekarang Anda dapat menulis

declare module "foo";

yang akan membiarkan Anda importdalam "foo"modul dengan jenis any. Jika Anda memiliki global yang ingin Anda tangani nanti, cukup tulis

declare const foo: any;

yang akan memberi Anda foovariabel.

Anda dapat menggunakan tsc --declaration fileName.tsseperti yang dijelaskan Ryan, atau Anda dapat menentukan di declaration: truebawah compilerOptionsdengan tsconfig.jsonasumsi Anda sudah memiliki tsconfig.jsonproyek Anda.

Cara terbaik untuk mengatasi ini (jika file deklarasi tidak tersedia di DefinitelyTyped ) adalah dengan menulis deklarasi hanya untuk hal-hal yang Anda gunakan daripada seluruh perpustakaan. Ini mengurangi pekerjaan banyak - dan juga kompiler ada untuk membantu dengan mengeluh tentang metode yang hilang.

Seperti kata Ryan, compiler tsc memiliki saklar --declarationyang menghasilkan .d.tsfile dari .tsfile. Juga catat bahwa (cegah bug) TypeScript seharusnya dapat mengkompilasi Javascript, sehingga Anda dapat meneruskan kode javascript yang ada ke kompiler tsc.

seperti yang dijelaskan dalam http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript pada 00:33:52 mereka telah membangun alat untuk mengubah metadata WebIDL dan WinRT menjadi Ketik Script d.ts

Berikut adalah beberapa PowerShell yang membuat file definisi TypeScript tunggal perpustakaan yang mencakup banyak *.jsfile dengan JavaScript modern.

Pertama, ubah semua ekstensi menjadi .ts.

Get-ChildItem | foreach { Rename-Item $_ $_.Name.Replace(".js", ".ts") }

Kedua, gunakan kompiler TypeScript untuk menghasilkan file definisi. Akan ada banyak kesalahan kompiler, tetapi kita bisa mengabaikannya.

Get-ChildItem | foreach { tsc $_.Name  }

Terakhir, gabungkan semua *.d.tsfile menjadi satu index.d.ts, hapus importpernyataan dan hapus defaultdari setiap pernyataan ekspor.

Remove-Item index.d.ts; 

Get-ChildItem -Path *.d.ts -Exclude "Index.d.ts" | `
  foreach { Get-Content $_ } | `
  where { !$_.ToString().StartsWith("import") } | `
  foreach { $_.Replace("export default", "export") } | `
  foreach { Add-Content index.d.ts $_ }

Ini diakhiri dengan satu index.d.tsfile yang dapat digunakan yang menyertakan banyak definisi.

Saat membuat perpustakaan Anda sendiri, Anda dapat membuat *.d.tsfile dengan menggunakan perintah tsc(TypeScript Compiler) seperti: (dengan asumsi Anda sedang membangun perpustakaan Anda ke dist/libfolder)

tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly

• -d( --declaration): menghasilkan *.d.tsfile
• --declarationDir dist/lib: Direktori keluaran untuk file deklarasi yang dihasilkan.
• --declarationMap: Menghasilkan peta sumber untuk setiap file '.d.ts' yang sesuai.
• --emitDeclarationOnly: Hanya memancarkan file deklarasi '.d.ts'. (tidak ada JS yang dikompilasi)

(lihat dokumen untuk semua opsi kompiler baris perintah)

Atau misalnya di package.json:

"scripts": {
    "build:types": "tsc -d --declarationDir dist/lib --declarationMap --emitDeclarationOnly",
}

lalu jalankan: yarn build:types(atau npm run build:types)

Saya akan mencari pemetaan yang ada dari perpustakaan JS pihak ke-3 Anda yang mendukung Script # atau SharpKit. Pengguna kompiler lintas C # ke .js ini akan menghadapi masalah yang Anda hadapi sekarang dan mungkin telah menerbitkan program sumber terbuka untuk memindai lib pihak ke-3 Anda dan mengubahnya menjadi kelas kerangka C #. Jika demikian hack program pemindai untuk menghasilkan TypeScript di tempat C #.

Jika gagal, menerjemahkan antarmuka publik C # untuk lib pihak ke-3 Anda ke definisi TypeScript mungkin lebih mudah daripada melakukan hal yang sama dengan membaca sumber JavaScript.

Minat khusus saya adalah kerangka kerja ExtJS RIA Sencha dan saya tahu ada proyek yang diterbitkan untuk menghasilkan interpretasi C # untuk Script # atau SharpKit