Introduction: Many problems are often encountered in the process of using Ts project development for beginners, or transforming JS project into Ts project. Here are some common TYPES of Ts errors.

1.TS2322

interface CSSProperties {

  display: 'block' | 'flex' | 'grid';

}

const style = {

  display: 'flex'};// TS2322: Type '{ display: string; }' is not assignable to type 'CSSProperties'.

// Types of property 'display' are incompatible.

// Type 'string' is not assignable to type '"block" | "flex" | "grid"'.

const cssStyle: CSSProperties = style;

Copy the code

In the example above, the CSSProperties display attribute is of type string literals type ‘block’ | ‘flex’ | ‘grid’, While the display property of the style variable looks completely compatible with the CSSProperties type, TypeScript prompts an error that the TS2322 type is incompatible. This is because the variable type of style is {display: string} by automatically inferring, natural not compatible type string string literals type ‘block’ | ‘flex’ | ‘grid’, so variable style cannot give cssStyle assignment.

Solutions:

1 / / method
const style: CSSProperties = {
  display: 'flex'};2 / / method
const style = {
  display: 'flex' as 'flex'};// typeof style = { display: 'flex' }

Copy the code

2. TS2345

enum A {
  x = 'x',
}

enum B {
  x = 'x',}function fn(val: A) {}

fn(B.x); // TS2345: Argument of type 'B.x' is not assignable to parameter of type 'A'.

Copy the code

As the example above shows, TypeScript prompts a type mismatch error. This is because enumerations are objects that actually exist at runtime, so TypeScript does not determine whether two enumerations are compatible with each other.

Type assertions can be used to bypass TypeScript type checking:

function fn(val: A) {}

fn((B.x as unknown) as A);

Copy the code

3.TS2589

type RepeatX<N extends number, T extends any[] = []> = T['length'] extends N
  ? T
  : RepeatX<N, [...T, 'X'>; type T1 = RepeatX<5>; // => ["X", "X", "X", "X", "X"]
// TS2589: Type instantiation is excessively deep and possibly infinite.
type T2 = RepeatX<50>; // => any

Copy the code

It is caused by the deep nesting of generic instantiation recursions.

Since the generic RepeatX received a numeric input parameter N and returned an array type of length N with elements ‘X’, the first type T1 contains five array types of “X”. But the second type, T2, is of type any and prompts a TS2589 type error. This is because TypeScript instantiates a maximum of 50 levels when dealing with recursive types. If the number of levels is exceeded, TypeScript does not continue to instantiate and the type changes to top type any.

The above errors are ignored using the @ts-ignore comment.

4.TS2554

function toString(x: number | undefined) :string {
  if (x === undefined) {
    return ' ';
  }
  return x.toString();
}

toString(); // TS2554: Expected 1 arguments, but got 0.
toString(undefined);
toString(1);
Copy the code

It is caused by a mismatch in the number of parameters and arguments.

5.TS1169

interface Obj {
  [key in 'id' | 'name']: any; // TS1169: A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type.
};
Copy the code

It is caused by using a non-literal or non-unique symbol type as the attribute name in the interface type definition

6.TS2456

// TS2456: Type alias 'T' circularly references itself.
type T = Readonly<T>;
Copy the code

It is caused by the type alias loop referencing itself

Reference:

  1. Summary analysis of common TypeScript errors from the 100 + project experience
  2. TypeScript source repository