TypeScript 更丰富的诊断显示元问题

xqkwcwgp  于 2022-10-29  发布在  TypeScript
关注(0)|答案(8)|浏览(203)

本期杂志追踪了几个不同的有用想法,这些想法可以让诊断更加“丰富”,以便于显示。我们一直想要其中的一些想法,它们在一定程度上受到了Jest和Mocha等测试工具的启发。我们也看到了Rust、罗马和Flow等工具在某种程度上证明了它们。
从长远来看,您可以想象它们与更丰富的编译器客户端进行交互。

跨行打印消息

类型可能会变得笨拙,内联显示它们会使您更难看到内容的开始/结束位置。

Type

    { x: string, y: number }

is not assignable to

    { x: string, y: string }

注意结尾处没有标点符号。不确定我们是否可以这样概括信息。
也不知道这如何发挥好与

  • 解析输出的工具。
  • 诊断 * 详细说明 *

消息中突出显示的跨页

想象一下,如果能够突出显示类型中的各个部分,以指示问题发生的位置。

vvvvvvvvvvv
Type '{ a: string; b: number; c: boolean; }' is not assignable to type '{ a: string; b: number; }'.
                              ^^^^^^^^^^^
  Object literal may only specify known properties, and 'c' does not exist in type '{ a: string; b: number; }'.

比较消息中的突出显示

基本上,假设红色是提供的颜色,而绿色是预期的颜色。

Type '[string, number, boolean]' is not assignable to type '[string, string, boolean]'.
               ^^^^^^                                                ^^^^^^
               rrrrrr                                                gggggg
gg0vcinb

gg0vcinb1#

我认为在--pretty样式输出下添加额外的(可能是彩色的)文本行(和换行符)可能是安全的(因为文件名/行/错误代码是vscode匹配的内容,因为这是消息中唯一“稳定”的部分)。

u4vypkhs

u4vypkhs2#

@dbaeumer可能对潜在的问题匹配器问题有更多的了解,但我知道其他工具也会将消息拆分为多行。

lfapxunr

lfapxunr3#

传递到@alexr00(任务确实有多行匹配器,但我不确定当前状态)

4szc88ey

4szc88ey4#

下面是关于VS代码中的多行问题匹配器的文档,但我认为如果您只是添加额外的行,就不需要它们了:https://code.visualstudio.com/Docs/editor/tasks#_defining-a-multiline-problem-matcher
添加不需要由VS代码问题匹配器读取的额外行应该被现有的typescript问题匹配器忽略。

hmae6n7t

hmae6n7t5#

另一个:更聪明的截断不会忽略实际上要详细说明的部分(@RyanCavanaugh称之为“差分typeToString“,并希望将其原型化)。

ny6fqffe

ny6fqffe6#

我打开了#42597来跟踪它,因为它与更丰富的诊断显示无关-它更像是一种类型显示策略。

gajydyqb

gajydyqb7#

@DanielRosenwasser我很有兴趣在这里发表意见。是否有一些特定的部分已经可以分成Help Wanted个任务?

drnojrws

drnojrws8#

关于建议1

我的团队有一个想法,就是把非常大的嵌套类型转换成一个漂亮的json格式。整个类型不是显示在一行上,而是打印出来的,这样每个嵌套层次都会缩进。对于小类型,一行并不是什么大问题,当你处理大的嵌套对象时,错误就会变成一堵无法阅读的文字墙。
例如,如果原始示例使用嵌套对象进行了扩充:

Type

    { x: string, y: number, o: { a: string, o2: { b: number, c: boolean } } }

is not assignable to

    { x: string, y: string }

具体表现为:

Type

    { 
        x: string, 
        y: number, 
        o: { 
            a: string, 
            o2: { 
                b: number, 
                c: boolean 
            } 
        } 
    }

is not assignable to

    { 
        x: string, 
        y: string 
    }

关于建议2

关于第二个类型突出显示的例子,这将是我的首选结果。然而,如果这是不可能的,一个可怜的表亲,将只是突出显示两个不同的类型。同样,当类型很小,这不是一个真正的大问题,但当你在寻找错误的一部分,它说is not assignable to type在一个巨大的文字墙是颜色的大问题。
下面是一个示例:

我有一个概念证明,我一直在使用我的团队在过去的几个星期,这个令人惊讶的小变化帮助了很多扫描错误。https://github.com/jleider/ts-error-formatter

相关问题