TypeScript：'Card | 类型的参数 undefined' 不可分配给类型为 'Card' 的参数

Question

I am trying to make Blackjack as an exercise to learn TypeScript. When I run the program, the player gets two cards from the shoe succesfully, but I get the warning Argument of type 'Card | undefined' is not assignable to parameter of type 'Card'. Argument of type 'Card | undefined' is not assignable to parameter of type 'Card'.

Here's my code:

class Card {
    suit: string;
    value: number;
    name: string;
    constructor(suit: string, value: number, name: string) {
        this.suit = suit;
        this.value = value;
        this.name = name;
    }
    greet() {
        console.log(`This card is a ${this.value} of ${this.suit}`)
    }
}

class Deck {
    static suits = ["Diamonds", "Clubs", "Hearts", "Spades"]
    static cardTypes = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"]
    cards: Card[] = [];
    makeDeck() {
        let cards: Card[] = [];
        for (let i = 0; i < Deck.suits.length; i++) {
            for (let j = 0; j < Deck.cardTypes.length; j++) {
                let value = Deck.cardTypes[j];
                let numValue: number;
                let name: string;
                if (
                    value === "Jack" ||
                    value === "Queen" ||
                    value === "King"
                ) {
                    numValue = 10
                } else if (value === "Ace") {
                    numValue = 11
                }
                else {
                    numValue = parseInt(Deck.cardTypes[j]);
                }

                name = `${value} of ${Deck.suits[i]}`

                cards.push(new Card(Deck.suits[i], numValue, name))
            }
        }
        return cards;
    }
    constructor() {
        this.cards = this.makeDeck()
    }
    presentDeck() {
        console.log(this.cards)
    }
}

class Shoe {
    numberOfDecks: number;
    cards: Card[] = [];
    constructor(numberOfDecks: number) {
        this.numberOfDecks = numberOfDecks
        this.cards = this.makeShoe()
    }
    makeShoe() {
        let cards: Card[] = [];
        for (let i = 0; i < this.numberOfDecks; i++) {
            let deck = new Deck();
            for (let j = 0; j < deck.cards.length; j++) {
                cards.push(deck.cards[j])
            }
        }
        return cards;
    }
    shuffleCards(cards: Card[] = this.cards) {
        var j, x, i;
        for (i = cards.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = cards[i];
            cards[i] = cards[j];
            cards[j] = x;
        }
        return cards;
    }
    presentShoe() {
        console.log(this.cards)
    }
    dealCard() {
        return this.cards.pop();
    }
}

class Hand {
    private _cards: Card[] = [];
    receiveCard(card: Card) {
        this.cards.push(card);
    }
    get cards(): Card[] {
        return this._cards
    }
}

let deck = new Deck();
let shoe = new Shoe(2);
let player = new Hand();

shoe.shuffleCards();
player.receiveCard(shoe.dealCard());
player.receiveCard(shoe.dealCard());
console.log(player.cards)

The error is on the shoe.dealCard() parts at the end. I'm not sure why the type has two parts, Card and undefined. And I'm not sure what is undefined.

Answer 1

The error happens because this.cards.pop() might return undefined when this.cards has no elements ( this.cards === [] ). One way to make the error disappear is to use the non-null assertion operator ! . This operator accepts that this expression will never be null and doesn't show the error anymore.

dealCard() {
    return this.cards.pop()!;
}