Bagaimana saya bisa melihat bagaimana TypeScript menghitung tipe?

18

Masalah: Saya sedang mengerjakan file yang memiliki banyak tipe kondisional yang menurunkan tipe mereka dari tipe kondisional yang telah ditentukan sebelumnya dan ini menjadi sangat kompleks dan sulit untuk men-debug bagaimana suatu tipe diturunkan.

Saya mencoba menemukan cara untuk "men-debug" atau daftar bagaimana kompiler TypeScript membuat penentuan pada tipe kondisional dan memilih jalur untuk mendapatkan tipe pamungkas.

Saya telah melihat-lihat opsi kompiler dan belum menemukan apa pun di area itu ...

Analogi dengan apa yang saya cari saat ini adalah setara dengan DEBUG=express:*jenis pengaturan yang mungkin digunakan jika Anda ingin melihat apa yang dilakukan server ekspres.

Namun, masalah sebenarnya yang saya coba selesaikan adalah untuk dapat mendekonstruksi dan men-debug bagaimana suatu tipe diturunkan dalam definisi tipe hierarkis kompleks yang besar.

Catatan Penting: Saya tidak mencoba men-debug pelaksanaan runtime proyek TypeScript. Saya mencoba men-debug bagaimana jenis dikomputasi oleh kompiler TypeScript.

Orang
sumber
Cukup gunakan IDE yang bagus, instantiate tipe Anda dan arahkan kursor ke nilai dalam file sumber yang dibuka di editor Anda. Apakah ada beberapa informasi tambahan yang Anda ingin lewatkan dengan menggunakan saran itu?
Patrick Roberts
@ Patrickrickoberts - terima kasih atas jawabannya. Ketika saya melakukan itu menunjuk ke tipe kompleks yang memiliki tipe bersarang bersarang. Itu pada gilirannya menunjuk ke tipe kompleks lain yang serupa dan terus berjalan dan kadang-kadang akan bercabang dengan cara yang tidak jelas. Mencoba mencari tahu cara men-debug mengapa cabang konstruksi jenis itu terjadi.
Guy
1
Saya pikir pertanyaan Anda akan mendapat manfaat dari contoh nyata untuk menunjukkan hal ini. Saya juga mengalami situasi yang Anda gambarkan sebelumnya, tetapi biasanya saya menemukan solusinya melibatkan penulisan ulang jenis sehingga mereka lebih buram (misalnya generik interfacedengan nama wadah yang mendokumentasikan sendiri, bukan generik typeyang mencoba untuk memperluas definisi dalam tooltip IDE) atau hanya refactoring sumber untuk menghindari penggunaan berlebihan dari tipe kondisional sepenuhnya.
Patrick Roberts
@ PatrickRoberts mencoba untuk mengupgrade repo ini ke Hapi / Joi @ 16 dan men-debug generasi jenis yang menyebabkan pertanyaan ini. github.com/TCMiranda/joi-extract-type
Guy
@ PatrickRoberts ini adalah masalah khusus yang membahas pemutakhiran itu sendiri untuk konteks. github.com/TCMiranda/joi-extract-type/issues/22
Guy

Jawaban:

1

Tidak ada mekanisme bawaan dalam naskah untuk keluar info yang diinginkan dipertanyakan. Namun, jika Anda tertarik untuk memahami pekerjaan internal, inilah tempat di kode sumber tempat penyelesaian tipe kondisional yang sebenarnya terjadi.

Lihatlah tempat-tempat ini di checker.ts.

Di: 13258 instantiateTypeWorker()
Di: 12303 getConditionalType()
Di: 12385 getTypeFromConditionalTypeNode()
Di: 12772getTypeFromTypeNode()


Terlampir adalah plugin naskah setengah jadi yang saya buat dengan sembarangan. Log struktur data mentah dari a ConditionalType. Untuk memahami struct ini, periksa types.ts ln: 4634.

UX dari plugin ini mengerikan, tetapi struct itu memberi tahu Anda bagaimana naskah menentukan nilai akhir dari suatu tipe kondisional.

Beberapa petunjuk terperinci yang menjengkelkan untuk menjalankan plugin ini:

  1. mkdir my-ts-plugin && cd my-ts-plugin
  2. touch package.json dan tulis { "name": "my-ts-plugin", "main": "index.js" }
  3. yarn add typescript fast-safe-stringify
  4. salin-tempel cuplikan ini ke index.ts, gunakan tsc untuk mengompilasinyaindex.js
  5. yarn link
  6. sekarang cdke dir proyek ts Anda sendiri, jalankanyarn link my-ts-plugin
  7. tambahkan { "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }ketsconfig.json
  8. tambahkan ke pengaturan ruang kerja (.vscode/settings.json)baris ini:{ "typescript.tsdk": "<PATH_TO_YOUR_TS_PROJECT>/node_modules/typescript/lib" }
  9. buka palet perintah vscode dan jalankan:
    1. TypeScript: Select TypeScript Version... -> Use Workspace Version
    2. TypeScript: Restart TS Server
    3. TypeScript: Open TS Server Log
  10. Anda harus dapat melihat plugin keluar "PLUGIN UP AND RUNNING", sekarang buka file kode ts dan mouse arahkan ke beberapa node tipe bersyarat, Anda akan melihat data struktur jooooooong ditambahkan ke file log.
hackape
sumber
Terima kasih untuk @hapeape. Saya telah meretasnya dan dapat menghasilkan beberapa log yang menarik dan cukup banyak daftar apa yang saya lihat secara interaktif ketika menggunakan VSCode sehingga tidak membuat saya lebih jauh dari tempat saya berada. Instruksi yang baik tentang cara agar plugin itu berfungsi.
Guy
Saya memberikan hadiah untuk Anda. Walaupun itu belum membawa saya ke solusi saya pikir bahwa dengan lebih banyak upaya di pihak saya memodifikasi plugin yang saya mungkin bisa sampai di sana dan saya tidak bisa membayangkan bahwa ada solusi yang lebih baik untuk ini dalam waktu dekat. Terima kasih atas bantuan dan usaha Anda!
Guy
1
@Beli Terima kasih atas hadiahnya. Jadi saya menghabiskan beberapa jam lagi kemarin untuk mendapatkan hasil yang lebih bermanfaat. Kamu benar. Struct data di atas menangkap objek AST-ish dari rantai tipe bersyarat, tapi itu hanya hasil parsing, bukan hasil yang dievaluasi. Mengenai "mengapa" atau cabang bersyarat yang digunakan penyelesai jenis saat mengevaluasi, itu memerlukan membuang hasil dari semua langkah perantara, agak seperti meletakkan debuggeruntuk berhenti di suatu tempat kemudian secara manual melihat melalui lingkup lokal di tumpukan panggilan.
hackape
1
Saya memodifikasi getConditionalType()in checker.tsuntuk membuat skrip pembuatan kustom, memasukkan beberapa logika efek samping untuk membuang info perantara di sepanjang jalan. Dan kali ini saya mendapat sesuatu yang sedikit lebih berguna. Saya akan membersihkan kode saya dan melampirkan inti nanti.
hackape
1
@Beli intinya ada di sini
hackape