Type width in error messages

src/compiler/checker.ts

@@ -22475,7 +22475,14 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
                             return;
                         }
                     }
-                    message = Diagnostics.Type_0_is_not_assignable_to_type_1;
+
+                    const includesWideTypes = sourceType.length > 30 || targetType.length > 30;
+                    if (compilerOptions.pretty && includesWideTypes) {
+                        message = Diagnostics.Type_Colon_0_is_not_assignable_to_type_Colon_1;
+                    }
+                    else {
+                        message = Diagnostics.Type_0_is_not_assignable_to_type_1;
+                    }
                 }
             }
             else if (

src/compiler/diagnosticMessages.json

@@ -3991,6 +3991,10 @@
         "category": "Error",
         "code": 2881
     },
+    "Type:\n  {0}\n\nis not assignable to type:\n  {1}\n": {
+        "category": "Error",
+        "code": 2882
+    },
 
     "Import declaration '{0}' is using private name '{1}'.": {
         "category": "Error",

tests/baselines/reference/prettyFormatLongTypes.errors.txt

@@ -0,0 +1,73 @@
+prettyFormatLongTypes.ts:6:1 - error TS2882: Type:
+  { b: { c: { e: { f: string; }; }; }; }
+
+is not assignable to type:
+  { b: { c: { e: { f: number; }; }; }; }
+
+  The types of 'b.c.e.f' are incompatible between these types.
+    Type 'string' is not assignable to type 'number'.
+
+6 a = b;
+  ~
+prettyFormatLongTypes.ts:9:1 - error TS2882: Type:
+  string
+
+is not assignable to type:
+  { b: { c: { e: { f: number; }; }; }; }
+
+
+9 a = c;
+  ~
+prettyFormatLongTypes.ts:12:1 - error TS2882: Type:
+  { b: { c: { e: { f: number; }; }; }; }
+
+is not assignable to type:
+  string
+
+
+12 c = a;
+   ~
+prettyFormatLongTypes.ts:15:1 - error TS2322: Type 'boolean' is not assignable to type 'string'.
+
+15 c = false;
+   ~
+
+
+==== prettyFormatLongTypes.ts (4 errors) ====
+    let a = { b: { c: { e: { f: 123 } } } };
+    let b = { b: { c: { e: { f: "123" } } } };
+    let c = "test";
+
+    // both the source and target types are wide enough enough trigger pretty printing
+    a = b;
+    ~
+!!! error TS2882: Type:
+!!! error TS2882:   { b: { c: { e: { f: string; }; }; }; }
+!!! error TS2882: is not assignable to type:
+!!! error TS2882:   { b: { c: { e: { f: number; }; }; }; }
+!!! error TS2882:   The types of 'b.c.e.f' are incompatible between these types.
+!!! error TS2882:     Type 'string' is not assignable to type 'number'.
+
+    // only the source type is wide enough to trigger pretty printing
+    a = c;
+    ~
+!!! error TS2882: Type:
+!!! error TS2882:   string
+!!! error TS2882: is not assignable to type:
+!!! error TS2882:   { b: { c: { e: { f: number; }; }; }; }
+
+    // only the target type is wide enough to trigger pretty printing
+    c = a;
+    ~
+!!! error TS2882: Type:
+!!! error TS2882:   { b: { c: { e: { f: number; }; }; }; }
+!!! error TS2882: is not assignable to type:
+!!! error TS2882:   string
+
+    // neither the source nor the target type is wide enough to trigger pretty printing
+    c = false;
+    ~
+!!! error TS2322: Type 'boolean' is not assignable to type 'string'.
+
+Found 4 errors in the same file, starting at: prettyFormatLongTypes.ts:6
+

tests/baselines/reference/prettyFormatLongTypes.js

@@ -0,0 +1,32 @@
+//// [tests/cases/compiler/prettyFormatLongTypes.ts] ////
+
+//// [prettyFormatLongTypes.ts]
+let a = { b: { c: { e: { f: 123 } } } };
+let b = { b: { c: { e: { f: "123" } } } };
+let c = "test";
+
+// both the source and target types are wide enough enough trigger pretty printing
+a = b;
+
+// only the source type is wide enough to trigger pretty printing
+a = c;
+
+// only the target type is wide enough to trigger pretty printing
+c = a;
+
+// neither the source nor the target type is wide enough to trigger pretty printing
+c = false;
+
+
+//// [prettyFormatLongTypes.js]
+var a = { b: { c: { e: { f: 123 } } } };
+var b = { b: { c: { e: { f: "123" } } } };
+var c = "test";
+// both the source and target types are wide enough enough trigger pretty printing
+a = b;
+// only the source type is wide enough to trigger pretty printing
+a = c;
+// only the target type is wide enough to trigger pretty printing
+c = a;
+// neither the source nor the target type is wide enough to trigger pretty printing
+c = false;

tests/baselines/reference/prettyFormatLongTypes.symbols

@@ -0,0 +1,39 @@
+//// [tests/cases/compiler/prettyFormatLongTypes.ts] ////
+
+=== prettyFormatLongTypes.ts ===
+let a = { b: { c: { e: { f: 123 } } } };
+>a : Symbol(a, Decl(prettyFormatLongTypes.ts, 0, 3))
+>b : Symbol(b, Decl(prettyFormatLongTypes.ts, 0, 9))
+>c : Symbol(c, Decl(prettyFormatLongTypes.ts, 0, 14))
+>e : Symbol(e, Decl(prettyFormatLongTypes.ts, 0, 19))
+>f : Symbol(f, Decl(prettyFormatLongTypes.ts, 0, 24))
+
+let b = { b: { c: { e: { f: "123" } } } };
+>b : Symbol(b, Decl(prettyFormatLongTypes.ts, 1, 3))
+>b : Symbol(b, Decl(prettyFormatLongTypes.ts, 1, 9))
+>c : Symbol(c, Decl(prettyFormatLongTypes.ts, 1, 14))
+>e : Symbol(e, Decl(prettyFormatLongTypes.ts, 1, 19))
+>f : Symbol(f, Decl(prettyFormatLongTypes.ts, 1, 24))
+
+let c = "test";
+>c : Symbol(c, Decl(prettyFormatLongTypes.ts, 2, 3))
+
+// both the source and target types are wide enough enough trigger pretty printing
+a = b;
+>a : Symbol(a, Decl(prettyFormatLongTypes.ts, 0, 3))
+>b : Symbol(b, Decl(prettyFormatLongTypes.ts, 1, 3))
+
+// only the source type is wide enough to trigger pretty printing
+a = c;
+>a : Symbol(a, Decl(prettyFormatLongTypes.ts, 0, 3))
+>c : Symbol(c, Decl(prettyFormatLongTypes.ts, 2, 3))
+
+// only the target type is wide enough to trigger pretty printing
+c = a;
+>c : Symbol(c, Decl(prettyFormatLongTypes.ts, 2, 3))
+>a : Symbol(a, Decl(prettyFormatLongTypes.ts, 0, 3))
+
+// neither the source nor the target type is wide enough to trigger pretty printing
+c = false;
+>c : Symbol(c, Decl(prettyFormatLongTypes.ts, 2, 3))
+

tests/baselines/reference/prettyFormatLongTypes.types

@@ -0,0 +1,89 @@
+//// [tests/cases/compiler/prettyFormatLongTypes.ts] ////
+
+=== prettyFormatLongTypes.ts ===
+let a = { b: { c: { e: { f: 123 } } } };
+>a : { b: { c: { e: { f: number; }; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>{ b: { c: { e: { f: 123 } } } } : { b: { c: { e: { f: number; }; }; }; }
+>                                : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>b : { c: { e: { f: number; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>{ c: { e: { f: 123 } } } : { c: { e: { f: number; }; }; }
+>                         : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>c : { e: { f: number; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^
+>{ e: { f: 123 } } : { e: { f: number; }; }
+>                  : ^^^^^^^^^^^^^^^^^^^^^^
+>e : { f: number; }
+>  : ^^^^^^^^^^^^^^
+>{ f: 123 } : { f: number; }
+>           : ^^^^^^^^^^^^^^
+>f : number
+>  : ^^^^^^
+>123 : 123
+>    : ^^^
+
+let b = { b: { c: { e: { f: "123" } } } };
+>b : { b: { c: { e: { f: string; }; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>{ b: { c: { e: { f: "123" } } } } : { b: { c: { e: { f: string; }; }; }; }
+>                                  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>b : { c: { e: { f: string; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>{ c: { e: { f: "123" } } } : { c: { e: { f: string; }; }; }
+>                           : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>c : { e: { f: string; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^
+>{ e: { f: "123" } } : { e: { f: string; }; }
+>                    : ^^^^^^^^^^^^^^^^^^^^^^
+>e : { f: string; }
+>  : ^^^^^^^^^^^^^^
+>{ f: "123" } : { f: string; }
+>             : ^^^^^^^^^^^^^^
+>f : string
+>  : ^^^^^^
+>"123" : "123"
+>      : ^^^^^
+
+let c = "test";
+>c : string
+>  : ^^^^^^
+>"test" : "test"
+>       : ^^^^^^
+
+// both the source and target types are wide enough enough trigger pretty printing
+a = b;
+>a = b : { b: { c: { e: { f: string; }; }; }; }
+>      : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>a : { b: { c: { e: { f: number; }; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>b : { b: { c: { e: { f: string; }; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+// only the source type is wide enough to trigger pretty printing
+a = c;
+>a = c : string
+>      : ^^^^^^
+>a : { b: { c: { e: { f: number; }; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>c : string
+>  : ^^^^^^
+
+// only the target type is wide enough to trigger pretty printing
+c = a;
+>c = a : { b: { c: { e: { f: number; }; }; }; }
+>      : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>c : string
+>  : ^^^^^^
+>a : { b: { c: { e: { f: number; }; }; }; }
+>  : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+// neither the source nor the target type is wide enough to trigger pretty printing
+c = false;
+>c = false : false
+>          : ^^^^^
+>c : string
+>  : ^^^^^^
+>false : false
+>      : ^^^^^
+

tests/cases/compiler/prettyFormatLongTypes.ts

@@ -0,0 +1,17 @@
+// @pretty: true
+
+let a = { b: { c: { e: { f: 123 } } } };
+let b = { b: { c: { e: { f: "123" } } } };
+let c = "test";
+
+// both the source and target types are wide enough enough trigger pretty printing
+a = b;
+
+// only the source type is wide enough to trigger pretty printing
+a = c;
+
+// only the target type is wide enough to trigger pretty printing
+c = a;
+
+// neither the source nor the target type is wide enough to trigger pretty printing
+c = false;