为什么方法 push() 有下划线？

Question

So hello for the first, I tried to make a little imaginary shopping cart for exercise in TypeScript. So i did and now I have a question here is the code.

class Warenkorb {
    liste:string[];

    add(produkt):void{
        this.liste.push(produkt);
    }
}

This is the first one it works fine no underlinings.

class Warenkorb {
    liste:string|number[];

    add(produkt):void{
        this.liste.push(produkt);
    }
}

So this the problem. When i want number or string the push method is red underlining it is not a problem for the exercise because the products should be only strings but i also want to know why it is so.

And sorry for the bad variable names i am german/austrian :D

Answer 1

Both of those should be showing you errors, because produkt implicitly has the type any .

The problem with list is that it's a string , or a number[] . If you want it to allow both strings and numbers, you need (string | number)[] .

You also need to initialize liste with an empty array.

So:

class Warenkorb {
    liste: (string|number)[] = [];
// −−−−−−−−^−−−−−−−−−−−−−^   ^^^^−−−−−−−−−−−−
    add(produkt: string|number):void{
// −−−−−−−−−−−−^^^^^^^^^^^^^^^
        this.liste.push(produkt);
    }
}

Answer 2

The syntax is not correct in second example, you need to add array for both data types in union like below:

class Warenkorb {
liste:string[]|number[] = [];

add(produkt):void{
    this.liste.push(produkt);
}

Now you are defining that it will be either array of strings or array of numbers and initialize with an empty array, else it will have default value of undefined and an error will occur.

In your case you define it either to be string or array of numbers. So push method does not exist on strings.

string|number[]

Answer 3

The notation you wrote says: liste is of type string or number[] .

This is what you tried to say

class Warenkorb {
  liste: (string|number)[];

  add(produkt: string|number):void {
    this.liste.push(produkt);
  }
}

As a side note, if you were to enable strict mode. You would get another error. One that would say that "liste" is not defined in the constructor. You either should use liste: (string|number)[] = [] , or create constructor and assign it there.