The absence of a semicolon in the non-null assertion is causing an

Question

The absence of a semicolon in the non-null assertion is causing an

Within my code, I have a function that arranges a set of cards according to a specific coordinate system:

const orderCardsInPage = (items: OrderItemType[], pageCards: CardType[]) => {
    return pageCards.sort((firstCard, secondCard) => {
        const orderItemOfFirstCard = items.find((orderItem: OrderItemType) => orderItem.card === firstCard._id.toString());
        const orderItemOfSecondCard = items.find((orderItem: OrderItemType) => orderItem.card === secondCard._id.toString());
        const valueOfFirstOrderItem = orderItemOfFirstCard?.value;
        const valueOfSecondOrderItem = orderItemOfSecondCard?.value;
        return valueOfFirstOrderItem! - valueOfSecondOrderItem!;
    });
};

When attempting to compile the code, an error is thrown at the return statement due to a missing semicolon error on the non-null assertion symbol (!).

Recognizing that the array.find() function may result in undefined values, I utilized the non-null assertion. How can this issue be resolved?

javascript typescript

Answer 1

Answer №1

The error cannot be duplicated, but it is recommended to ensure that the values are defined to avoid the need for a non-null assertion.

const orderCardsInPage = (items: { value: number }[], pageCards: { _id: number }[]) => {
  return pageCards.sort((firstCard, secondCard) => {
    const orderItemOfFirstCard = items.find((orderItem: any) => orderItem.card === firstCard._id.toString());
    const orderItemOfSecondCard = items.find((orderItem: any) => orderItem.card === secondCard._id.toString());
    const valueOfFirstOrderItem = orderItemOfFirstCard?.value;
    const valueOfSecondOrderItem = orderItemOfSecondCard?.value;
    // throw an error if either value is not found
    if (!valueOfFirstOrderItem || !valueOfSecondOrderItem) throw new Error("No item found");
    return valueOfFirstOrderItem - valueOfSecondOrderItem;
  });
};

By the way, I made assumptions about the types. If the value property is not optional, consider performing the check earlier in the code.

const orderCardsInPage = (items: { value: number }[], pageCards: { _id: number }[]) => {
  return pageCards.sort((firstCard, secondCard) => {
    const orderItemOfFirstCard = items.find((orderItem: any) => orderItem.card === firstCard._id.toString());
    const orderItemOfSecondCard = items.find((orderItem: any) => orderItem.card === secondCard._id.toString());

    if (!orderItemOfFirstCard || !orderItemOfSecondCard) throw new Error("No item found");
    return orderItemOfFirstCard.value - orderItemOfSecondCard.value;
  });
};

Answer 2

The error cannot be duplicated, but it is recommended to ensure that the values are defined to avoid the need for a non-null assertion.

const orderCardsInPage = (items: { value: number }[], pageCards: { _id: number }[]) => {
  return pageCards.sort((firstCard, secondCard) => {
    const orderItemOfFirstCard = items.find((orderItem: any) => orderItem.card === firstCard._id.toString());
    const orderItemOfSecondCard = items.find((orderItem: any) => orderItem.card === secondCard._id.toString());
    const valueOfFirstOrderItem = orderItemOfFirstCard?.value;
    const valueOfSecondOrderItem = orderItemOfSecondCard?.value;
    // throw an error if either value is not found
    if (!valueOfFirstOrderItem || !valueOfSecondOrderItem) throw new Error("No item found");
    return valueOfFirstOrderItem - valueOfSecondOrderItem;
  });
};

By the way, I made assumptions about the types. If the value property is not optional, consider performing the check earlier in the code.

const orderCardsInPage = (items: { value: number }[], pageCards: { _id: number }[]) => {
  return pageCards.sort((firstCard, secondCard) => {
    const orderItemOfFirstCard = items.find((orderItem: any) => orderItem.card === firstCard._id.toString());
    const orderItemOfSecondCard = items.find((orderItem: any) => orderItem.card === secondCard._id.toString());

    if (!orderItemOfFirstCard || !orderItemOfSecondCard) throw new Error("No item found");
    return orderItemOfFirstCard.value - orderItemOfSecondCard.value;
  });
};

The absence of a semicolon in the non-null assertion is causing an

Answer №1

Similar questions

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

Ways to retrieve information from a POST request

What is the best way to display the weather information for specific coordinates in ReactJS?

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

How can the data controller of a model be accessed within a directive that has been defined with "this"?

Refreshing the form fields and storing the information using AngularJS

Can the CSS of an iframe be modified if the iframe is located on a different domain?

Is there a way to replicate table cells in the style of Excel using jQuery?

React: Issue accessing URL parameters using useParams() within a nested component

Ways to implement a conditional statement to display a div using JavaScript

Utilizing React to create an infinite loop, where an onClick event triggers an image change that updates the source of

javascript identify dissimilarities within arrays

"Exploring locations with Google Maps and integrating them into interactive

Accessing information from RESTful Web Service with Angular 2's Http functionality

Display the closest locations on the Google Maps interface

Executing <script> tags inside <template> on vue js

Implementing Angular to activate the JavaScript 'click' event

How to apply props conditionally in VueJS?

How can I use the form's restart() method in React-Final-Form to clear a MUI TextField input and also capture the event at the same time?