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.
interface
dengan nama wadah yang mendokumentasikan sendiri, bukan generiktype
yang mencoba untuk memperluas definisi dalam tooltip IDE) atau hanya refactoring sumber untuk menghindari penggunaan berlebihan dari tipe kondisional sepenuhnya.Jawaban:
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: 12772
getTypeFromTypeNode()
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.
Tampilkan cuplikan kode
Beberapa petunjuk terperinci yang menjengkelkan untuk menjalankan plugin ini:
mkdir my-ts-plugin && cd my-ts-plugin
touch package.json
dan tulis{ "name": "my-ts-plugin", "main": "index.js" }
yarn add typescript fast-safe-stringify
index.ts
, gunakan tsc untuk mengompilasinyaindex.js
yarn link
cd
ke dir proyek ts Anda sendiri, jalankanyarn link my-ts-plugin
{ "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }
ketsconfig.json
(.vscode/settings.json)
baris ini:{ "typescript.tsdk": "<PATH_TO_YOUR_TS_PROJECT>/node_modules/typescript/lib" }
TypeScript: Select TypeScript Version... -> Use Workspace Version
TypeScript: Restart TS Server
TypeScript: Open TS Server Log
"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.sumber
debugger
untuk berhenti di suatu tempat kemudian secara manual melihat melalui lingkup lokal di tumpukan panggilan.getConditionalType()
inchecker.ts
untuk 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.