可以在TypeScript中使用”echo”来表示数据类型吗?

huangapple go评论59阅读模式
英文:

Can you echo a type in TypeScript?

问题

根据我所了解,TypeScript 中似乎没有像这样的东西:

type TypeA = { x: number };
printType(TypeA);

以下是我找到的唯一一种方法,可以始终让 TypeScript 输出类型的描述信息:

const y = {
    x: 1,
    z: 'hello',
};

const z: never = y;

尝试将值分配给 never 类型将始终引发错误,并且错误会提到正在分配的值的类型:

类型 '{ x: number; z: string; }' 不能赋值给类型 'never'

这种方法的局限性在于它需要一个真实的变量。真的没有其他方法吗?

英文:

As far as I'm aware there is nothing in TypeScript like:

type TypeA = { x: number };
printType(TypeA);

Here is the only approach I've found to consistently get TypeScript to output a description of a type.

const y = {
    x: 1,
    z: 'hello',
};

const z: never = y;

Attempting to assign to a never type will always print an error and the error mentions the type of the value being assigned.

Type '{ x: number; z: string; }' is not assignable to type 'never'.

This approach is limited because it requires a real variable.

Is there really no other way?

答案1

得分: 2

以下是翻译好的部分:

你无法在运行时执行此操作,因为TypeScript类型在运行时必然会被擦除。因此,在TypeScript变成可运行的JavaScript之前,你只能在IDE中或作为编译过程的一部分执行此操作。你提到的将其作为编译错误进行发射的解决方法是有效的,因为它发生在编译时;使用官方的TypeScript没有办法使其在运行时工作。

但是,tsserver的可用性使许多IDE能够轻松集成类型信息。该页面还包括一些示例集成,尽管还有许多其他集成可用。在这些集成中,最主要的是Microsoft自家的Visual Studio Code,它提供了IntelliSense(弹出、悬停和代码完成)和inlay hints(参数和类型信息以内联方式呈现,就像显式编写一样)。

最后,一种面向文档的语言扩展叫做Twoslash可以向IDE明确请求以内联方式显示类型。这与上述的inlay hints非常类似,但仅在您指定的地方才能选择启用。它在TypeScript Playground中自动可用,而且还提供了扩展,可以将Twoslash支持添加到VSCode中(https://marketplace.visualstudio.com/items?itemName=Orta.vscode-twoslash-queries)。

const a = { b: 3, c: "hello" };

console.log(a);
//          ^? [const a: { b: number, c: string }]

就像playground链接中一样,在方括号中的类型注释是自动添加和更新的。

英文:

You won't be able to do this at runtime, because TypeScript types are necessarily erased at runtime. Consequently, you'll only be able to do this in your IDE or as part of the compilation process, before TypeScript becomes runnable JavaScript. Your workaround of emitting this as a compilation error is effective because it happens during compile; there's no way using official TS to make it work at runtime.

That said, the availability of tsserver has made it easy for many IDEs to integrate type information. That page also includes some sample integrations, though many others are available. Foremost in those is Microsoft's own Visual Studio Code, which offers both IntelliSense (popups, hover-over, and code completion) and inlay hints (parameter and type information rendered inline as if written explicitly).

Finally, a documentation-oriented language extension called Twoslash makes explicit requests to the IDE to display the type inline. This works much like the inlay hints above but is opt-in for points you specify. It is available automatically in TypeScript Playground and extensions are available to add Twoslash support to VSCode.

const a = { b: 3, c: "hello" };

console.log(a);
//          ^? [const a: { b: number, c: string }]

As in the playground link, the type annotation in the square brackets is added and updated automatically.

huangapple
  • 本文由 发表于 2023年5月24日 23:17:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76325068.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定