Visual Studio Code - เป็นไปได้หรือไม่ที่จะโชว์ชนิดที่คำนวณเต็มของ type/interface ของ TypeScript ใน VSCode (หรือที่อื่น)

เมื่อคุณวางเมาส์เหนือชนิดใน VSCode มันจะแสดงชนิดนั้น แต่ถ้าคุณมีชนิดที่ใหญ่กว่าปกติมันมักจะแสดงเป็น { a: string; ... 24 more ...; z: string } เป็นไปได้ไหมที่จะให้มันแสดงชนิดเต็มได้บ้าง?

ในทำนองเดียวกัน หากคุณมีการตัดกันของสองประเภท บางครั้งมันจะแสดงเพียง Type1 & Type2 แทนที่จะแสดงประเภทเต็ม หรือถ้าคุณใช้ Pick มันจะแสดงเป็น Pick<Type1, "a" | ... 23 รายการเพิ่มเติม ... | "z">...

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

คำตอบ #1

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

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

const object1 = { a1: 4, b1: "test", c1: true, d1: ["test", "test2"], e1: { ea1: "yes", eb1: 3, ec1: [4] } as const } as const;
const object2 = { a2: 4, b2: "test2", c2: false, d1: ["testw", "testw2"], e2: { ea2: "no", eb2: 5, ec2: [8] } as const } as const;
const object3 = { a3: 4, b3: "test", c3: true, d3: ["test", "test2"], e3: { ea3: "never", eb3: 3, ec3: [4] } as const } as const;
const object4 = { a4: 4, b4: "test2", c4: false, d4: ["testw", "testw2"], e4: { ea4: "maybe", eb4: 5, ec4: [8] } as const } as const;
type testComplexType = typeof object1 & typeof object2 & typeof object3 & typeof object4;

type whatTypeIsThis = testComplexType["e1"]["ea1"]; //yes
type whatTypeIsThis2 = testComplexType["e2"]["ea2"]; //no
type whatTypeIsThis3 = testComplexType["e3"]["ea3"]; //never
type whatTypeIsThis4 = testComplexType["e4"]["ea4"]; //maybe

คำตอบ #2

นี่ไม่ได้ตอบคำถามตามที่ถามจริง ๆ แต่เป็นวิธีแก้ปัญหาชั่วคราวที่ทำให้คุณได้ข้อมูลเดียวกัน

หากคุณมีชนิดข้อมูลที่มีคุณสมบัติมากมายและคุณไม่สามารถทำให้ VS Code แสดงคำจำกัดความเต็มได้ วิธีที่ดีที่สุดที่ฉันพบในการสำรวจโครงสร้างชนิดข้อมูลคือการสร้างตัวแปร const ชั่วคราว เริ่มเขียนโค้ดเพื่อตั้งค่าเริ่มต้นให้มัน และใช้การเติมข้อความอัตโนมัติ ตัวอย่างเช่น (ใช้ HTMLInputElement เป็นชนิดข้อมูลสุ่มที่มีคุณสมบัติมากมาย):

หรือถ้าคุณมีประเภทยูเนียนของสตริงขนาดใหญ่ ให้เริ่มต้นการกำหนดค่าโดยใช้ลิตเทอรัลสตริง: