Very rough prototype of 2 col type comparison in tsc

Author: orta

package.json

@@ -28,6 +28,10 @@
     "engines": {
         "node": ">=4.2.0"
     },
+    "dependencies": {
+        "prettier": "^2.3.2",
+        "as-table":"^1.0.55"
+            },
     "devDependencies": {
         "@octokit/rest": "latest",
         "@types/browserify": "latest",

src/compiler/checker.ts

@@ -17533,7 +17533,9 @@ namespace ts {
                         }
                     }
                 }
-                const diag = createDiagnosticForNodeFromMessageChain(errorNode!, errorInfo, relatedInformation);
+                const diag: AssignmentDiagnostic = createDiagnosticForNodeFromMessageChain(errorNode!, errorInfo, relatedInformation);
+                diag.sourceType = source;
+                diag.targetType = target;
                 if (relatedInfo) {
                     addRelatedInfo(diag, ...relatedInfo);
                 }

src/compiler/program.ts

@@ -484,6 +484,62 @@ namespace ts {
         return output;
     }
 
+    export function format2322DiagnosticsWithColorAndContext(diagnostics: readonly AssignmentDiagnostic[], host: FormatDiagnosticsHost): string {
+        let output = "";
+        const p = require("prettier");
+        const table = require("as-table");
+        for (const diagnostic of diagnostics) {
+            if (diagnostic.file) {
+                const { file, start } = diagnostic;
+                output += formatLocation(file, start!, host); // TODO: GH#18217
+                output += " - ";
+            }
+            output += formatColorAndReset(diagnosticCategoryName(diagnostic), getCategoryFormat(diagnostic.category));
+            output += formatColorAndReset(` TS${diagnostic.code}: `, ForegroundColorEscapeSequences.Grey);
+
+            output += host.getNewLine();
+
+            // console.log(diagnostic);
+            const a = createProgram({ rootNames: [], options: {} });
+            const t = createTypeChecker(a, false);
+
+            const sourceStr = t.typeToString(diagnostic.sourceType!);
+            const targetStr = t.typeToString(diagnostic.targetType!);
+
+            const left = p.format(`type TXM = ${sourceStr}`, { printWidth: 80, filepath: "x.ts" }).replace("type TXM = ", "").trim();
+            const right = p.format(`type TXM = ${targetStr}`, { printWidth: 80, filepath: "x.ts" }).replace("type TXM = ", "").trim();
+
+            output += table([
+                [ "Type:", "is not assignable to: " ],
+                ["", ""],
+                [ left, right ],
+            ], { align: [ "l", "l" ] });
+            output += host.getNewLine();
+
+            // output += flattenDiagnosticMessageText(diagnostic.messageText, host.getNewLine());
+
+            if (diagnostic.file) {
+                output += host.getNewLine();
+                output += formatCodeSpan(diagnostic.file, diagnostic.start!, diagnostic.length!, "", getCategoryFormat(diagnostic.category), host); // TODO: GH#18217
+            }
+            if (diagnostic.relatedInformation) {
+                output += host.getNewLine();
+                for (const { file, start, length, messageText } of diagnostic.relatedInformation) {
+                    if (file) {
+                        output += host.getNewLine();
+                        output += halfIndent + formatLocation(file, start!, host); // TODO: GH#18217
+                        output += formatCodeSpan(file, start!, length!, indent, ForegroundColorEscapeSequences.Cyan, host); // TODO: GH#18217
+                    }
+                    output += host.getNewLine();
+                    output += indent + flattenDiagnosticMessageText(messageText, host.getNewLine());
+                }
+            }
+            output += host.getNewLine();
+        }
+        return output;
+    }
+
+
     export function flattenDiagnosticMessageText(diag: string | DiagnosticMessageChain | undefined, newLine: string, indent = 0): string {
         if (isString(diag)) {
             return diag;

src/compiler/types.ts

@@ -5883,6 +5883,11 @@ namespace ts {
         next?: DiagnosticMessageChain[];
     }
 
+    export interface AssignmentDiagnostic extends Diagnostic {
+        sourceType?: Type
+        targetType?: Type
+    }
+
     export interface Diagnostic extends DiagnosticRelatedInformation {
         /** May store more in future. For now, this will simply be `true` to indicate when a diagnostic is an unused-identifier diagnostic. */
         reportsUnnecessary?: {};

src/compiler/watch.ts

@@ -18,11 +18,17 @@ namespace ts {
         if (!pretty) {
             return diagnostic => system.write(formatDiagnostic(diagnostic, host));
         }
+        
 
         const diagnostics: Diagnostic[] = new Array(1);
         return diagnostic => {
             diagnostics[0] = diagnostic;
-            system.write(formatDiagnosticsWithColorAndContext(diagnostics, host) + host.getNewLine());
+            if (diagnostic.code === 2322) {
+                system.write(format2322DiagnosticsWithColorAndContext(diagnostics, host) + host.getNewLine());
+            }
+            else {
+                system.write(formatDiagnosticsWithColorAndContext(diagnostics, host) + host.getNewLine());
+            }
             diagnostics[0] = undefined!; // TODO: GH#18217
         };
     }