是否可以在 VSCode（或其他地方）中顯示打字稿類型/接口的完整計算類型

Question

當您將鼠標懸停在 VSCode 中的類型上時，它會顯示該類型，但如果您有更大的類型，它通常會將其顯示為{ a: string; ... 24 more ...; z: string } { a: string; ... 24 more ...; z: string } { a: string; ... 24 more ...; z: string } 。 是否有可能讓它以某種方式顯示完整類型？

同樣，如果您有兩種類型的交集，那么有時它只會將其顯示為Type1 & Type2而不是顯示完整類型，或者如果您使用Pick那么它會顯示Pick<Type1, "a" | ... 23 more ... | "z"> Pick<Type1, "a" | ... 23 more ... | "z"> Pick<Type1, "a" | ... 23 more ... | "z"> ...

在所有這些情況下，我認為檢查我對 typescript 正在做什么以有時能夠看到完整類型的理解會很有用，並且想知道是否有辦法做到這一點，無論是通過 vscode 還是通過 typescript 的工具。

Answer 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