ฉันจะดูวิธีการคำนวณประเภทของ TypeScript ได้อย่างไร


18

ปัญหา: ฉันกำลังทำงานกับไฟล์ที่มีประเภทตามเงื่อนไขจำนวนมากที่ได้รับประเภทของพวกเขาจากประเภทเงื่อนไขที่กำหนดไว้ก่อนหน้านี้และมันซับซ้อนและยากที่จะดีบักวิธีที่ได้รับประเภท

ฉันพยายามหาวิธี "debug" หรือรายการวิธีที่คอมไพเลอร์ TypeScript ทำการตัดสินใจในประเภทตามเงื่อนไขและเลือกเส้นทางที่จะได้รับประเภทที่ดีที่สุด

ฉันได้ตรวจสอบตัวเลือกของคอมไพเลอร์แล้ว แต่ยังไม่พบอะไรในพื้นที่นั้น ...

การเปรียบเทียบกับสิ่งที่ฉันกำลังมองหาในขณะนี้คือสิ่งที่เทียบเท่ากับDEBUG=express:*ประเภทของการตั้งค่าที่อาจใช้ถ้าคุณต้องการดูว่าเซิร์ฟเวอร์ด่วนกำลังทำอะไรอยู่

อย่างไรก็ตามปัญหาที่เกิดขึ้นจริงที่ฉันพยายามจะแก้ก็คือสามารถแยกแยะและตรวจแก้จุดบกพร่องว่าได้รับมาจากประเภทใดในคำจำกัดความประเภทลำดับชั้นที่ซับซ้อน

หมายเหตุสำคัญ: ฉันไม่ได้พยายามดีบักการดำเนินการรันไทม์ของโครงการ TypeScript ฉันพยายามดีบักวิธีการคำนวณประเภทโดยคอมไพเลอร์ TypeScript


เพียงใช้ IDE ที่ดียกตัวอย่างประเภทของคุณและโฮเวอร์เหนือค่าในไฟล์ต้นฉบับที่เปิดในตัวแก้ไขของคุณ มีข้อมูลที่ต้องการเพิ่มเติมที่คุณพลาดโดยใช้คำแนะนำนั้นหรือไม่?
Patrick Roberts

@PatrickRoberts - ขอบคุณสำหรับการตอบกลับ เมื่อฉันทำเช่นนั้นมันจะชี้ไปยังประเภทที่ซับซ้อนที่มีประเภทซ้อนกันตามเงื่อนไข ในทางกลับกันชี้ไปยังอีกประเภทที่ซับซ้อนที่คล้ายกันและมันยังคงดำเนินต่อไปและบางครั้งมันจะแตกแขนงในลักษณะที่ไม่ชัดเจน พยายามหาวิธีแก้จุดบกพร่องสาเหตุที่สาขาการก่อสร้างประเภทนั้นเกิดขึ้น
Guy

1
ฉันคิดว่าคำถามของคุณจะได้รับประโยชน์จากตัวอย่างที่เป็นรูปธรรมในการสาธิตเรื่องนี้ ฉันได้พบกับสถานการณ์ที่คุณอธิบายก่อนหน้านี้ แต่โดยปกติแล้วฉันจะพบวิธีแก้ปัญหาที่เกี่ยวข้องกับการเขียนชนิดใหม่เพื่อให้พวกเขามีความทึบมากขึ้น (เช่นชื่อสามัญที่interfaceมีชื่อคอนเทนเนอร์การบันทึกเอกสารด้วยตนเองแทนชื่อทั่วไปtypeที่พยายามขยาย คำจำกัดความในคำแนะนำเครื่องมือของ IDE) หรือเพียงแค่ทำการรีซอร์สแหล่งข้อมูลเพื่อหลีกเลี่ยงการใช้ประเภทเงื่อนไขที่ซับซ้อนมากเกินไป
Patrick Roberts เมื่อ

@PatrickRoberts พยายามอัพเกรด repo นี้เป็น Hapi / Joi @ 16 และการดีบักการสร้างประเภทเป็นสิ่งที่นำไปสู่คำถามนี้ github.com/TCMiranda/joi-extract-type
Guy

@PatrickRoberts นี่เป็นปัญหาเฉพาะที่พูดถึงการอัพเกรดตัวเองสำหรับบริบท github.com/TCMiranda/joi-extract-type/issues/22
Guy

คำตอบ:


1

ไม่มีกลไกในตัวใน typescript เพื่อออกจากระบบข้อมูลที่ต้องการ อย่างไรก็ตามหากคุณสนใจที่จะทำความเข้าใจกับงานภายในนี่คือสถานที่ในซอร์สโค้ดที่การแก้ไขประเภทตามเงื่อนไขเกิดขึ้นจริง

checker.tsลองดูที่สถานที่เหล่านี้ใน

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


สิ่งที่แนบมาเป็นปลั๊กอิน typescript แบบกึ่งสำเร็จรูปที่ฉันใส่กันอย่างประมาท ConditionalTypeมันล็อกเอาโครงสร้างข้อมูลดิบของ เพื่อทำความเข้าใจโครงสร้างนี้ให้ตรวจสอบtypes.ts ln: 4634

UX ของปลั๊กอินนี้แย่มาก แต่ struct นั้นบอกคุณว่า typescript ตัดสินใจค่าสุดท้ายของประเภทเงื่อนไข

คำแนะนำโดยละเอียดที่น่ารำคาญเพื่อให้ปลั๊กอินนี้ทำงาน:

  1. mkdir my-ts-plugin && cd my-ts-plugin
  2. touch package.json และเขียน { "name": "my-ts-plugin", "main": "index.js" }
  3. yarn add typescript fast-safe-stringify
  4. คัดลอกวางตัวอย่างข้อมูลนี้ไปยังindex.tsใช้ tsc เพื่อรวบรวมindex.js
  5. yarn link
  6. ตอนนี้cdถึงโครงการ dir ของคุณเองให้รันyarn link my-ts-plugin
  7. เพิ่ม{ "compilerOptions": { "plugins": [{ "name": "my-ts-plugin" }] } }ของคุณtsconfig.json
  8. เพิ่มในพื้นที่ทำงานตั้งค่า(.vscode/settings.json)บรรทัดนี้:{ "typescript.tsdk": "<PATH_TO_YOUR_TS_PROJECT>/node_modules/typescript/lib" }
  9. เปิดจานสีคำสั่ง vscode และเรียกใช้:
    1. TypeScript: Select TypeScript Version... -> Use Workspace Version
    2. TypeScript: Restart TS Server
    3. TypeScript: Open TS Server Log
  10. คุณควรจะเห็นการออกจากระบบปลั๊กอิน"PLUGIN UP AND RUNNING"ตอนนี้เปิดไฟล์รหัส ts และเมาส์โฮเวอร์ไปยังโหนดประเภทที่มีเงื่อนไขคุณควรเห็นโครงสร้างข้อมูล loooooong json ที่เพิ่มเข้าไปในล็อกไฟล์

ขอบคุณสำหรับ @hackape ฉันแฮ็คกับมันและสามารถสร้างบันทึกที่น่าสนใจและรายการที่ฉันเห็นโต้ตอบเมื่อใช้ VSCode ดังนั้นมันจึงไม่ได้รับอะไรมากไปกว่าที่ฉันเคยเป็น คำแนะนำที่ดีเกี่ยวกับวิธีทำให้ปลั๊กอินใช้งานได้
Guy

ฉันให้ความโปรดปรานแก่คุณ แม้ว่ามันจะไม่ได้ให้ฉันแก้ปัญหา แต่ฉันคิดว่าด้วยความพยายามของฉันในการปรับเปลี่ยนส่วนเสริมที่ฉันอาจจะไปถึงที่นั่นและฉันไม่สามารถนึกภาพว่ามีทางออกที่ดีกว่านี้ในอนาคตอันใกล้ ขอบคุณสำหรับความช่วยเหลือและความพยายามของคุณ!
Guy

1
@ ซื้อขอบคุณสำหรับความโปรดปราน ดังนั้นฉันจึงใช้เวลาอีกสองสามชั่วโมงเมื่อวานนี้เพื่อให้ได้ผลลัพธ์ที่มีประโยชน์มากขึ้น คุณถูก. โครงสร้างข้อมูลด้านบนจับวัตถุ AST-ish ของห่วงโซ่ชนิดตามเงื่อนไข แต่เป็นเพียงผลการแยกวิเคราะห์ไม่ใช่ผลการประเมิน ในส่วนของ "ทำไม" หรือสาขาใดที่ตัวแก้ไขประเภทใช้เงื่อนไขเมื่อประเมินผลมันจำเป็นต้องทิ้งผลลัพธ์ของขั้นตอนกลางทั้งหมดเช่นวางการdebuggerหยุดไว้ที่ใดที่หนึ่งจากนั้นมองผ่านขอบเขตในการโทรด้วยตนเอง
hackape

1
ฉันแก้ไขgetConditionalType()in checker.tsเพื่อสร้าง typescript แบบกำหนดเองโดยแทรกตรรกะผลข้างเคียงบางอย่างเพื่อเทข้อมูลกลางระหว่างทาง และครั้งนี้ฉันก็ได้รับประโยชน์มากกว่านี้ ฉันจะล้างรหัสของฉันและแนบส่วนสำคัญในภายหลัง
hackape

1
@ ซื้อส่วนสำคัญอยู่ที่นี่
Hackape
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.