What steps can be taken to address the error encountered in TypeScript?

Question

What steps can be taken to address the error encountered in TypeScript?

Recently, I decided to delve into typescript after hearing so much praise for it over plain old javascript. To ease myself into it, I started tackling basic data structure problems using ts. However, I've hit a roadblock on some concepts that are eluding me.

interface GraphType {
  [index: string]: string[];
}

const graph: GraphType = {
  a: ['c', 'b'],
  b: ['d'],
  c: ['e'],
  d: ['f'],
  e: [],
  f: []
}

const depthFirstPrint = (graph: GraphType, source: string) => {
  const stack: string[] = [source];
  
  while(stack.length > 0) {
    const current: string = stack.pop(); // <1>
    console.log(current);
    for (let neighbor of graph[current]) { //<2>
      stack.push(neighbor);
    }
  }
};

depthFirstPrint(graph, 'a'); //abdfce

I'm encountering errors at:

<1> with the message

Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'

The confusion arises as I have defined stack as an array of strings and I am also ensuring it's not empty before accessing elements with while(stack.length > 0).

<2> brings up Object is possibly 'undefined', leaving me uncertain about how to handle this. In traditional js, if it's undefined, the loop doesn't run, which is the expected behavior. But I'm unsure how to replicate this in ts.

typescript

Answer 1

Answer №1

Indeed, you have verified stack.length > 0 within the while loop, but how can the compiler ascertain that stack.pop() will always yield a value?

Consider this scenario: if stack.length is 1 and the condition while(stack.length > 0) holds true, in the code snippet below, both current1 and current2 remain undefined when stack.length exceeds 1:

while(stack.length > 0) {
    const current = stack.pop(); 
    const current1 = stack.pop(); 
    const current2 = stack.pop(); 
}

Solution:

You can define current as type string | undefined, but before using the variable, ensure to check if it has a value:

const depthFirstPrint = (graph: GraphType, source: string) => {
  const stack: string[] = [source];
  
  while(stack.length > 0) {
    const current = stack.pop();
    console.log(current);

    if(current)
      for (let neighbor of graph[current]) {
         stack.push(neighbor);
      }
  }
};

Here is a functional sample: PlaygroundLink

Update based on OP's comment:

If you wish to activate noUncheckedIndexedAccess in your TSConfig, additional checks are required such as this:

while(stack.length > 0) {
    const current = stack.pop(); 
    console.log(current);
    
    if(current) {
    let value = graph[current];
    
      if(value)
        for (let neighbor of value) {
           stack.push(neighbor);
        }
    }
  }

PlaygroundLink

Answer 2

Indeed, you have verified stack.length > 0 within the while loop, but how can the compiler ascertain that stack.pop() will always yield a value?

Consider this scenario: if stack.length is 1 and the condition while(stack.length > 0) holds true, in the code snippet below, both current1 and current2 remain undefined when stack.length exceeds 1:

while(stack.length > 0) {
    const current = stack.pop(); 
    const current1 = stack.pop(); 
    const current2 = stack.pop(); 
}

Solution:

You can define current as type string | undefined, but before using the variable, ensure to check if it has a value:

const depthFirstPrint = (graph: GraphType, source: string) => {
  const stack: string[] = [source];
  
  while(stack.length > 0) {
    const current = stack.pop();
    console.log(current);

    if(current)
      for (let neighbor of graph[current]) {
         stack.push(neighbor);
      }
  }
};

Here is a functional sample: PlaygroundLink

Update based on OP's comment:

If you wish to activate noUncheckedIndexedAccess in your TSConfig, additional checks are required such as this:

while(stack.length > 0) {
    const current = stack.pop(); 
    console.log(current);
    
    if(current) {
    let value = graph[current];
    
      if(value)
        for (let neighbor of value) {
           stack.push(neighbor);
        }
    }
  }

PlaygroundLink

What steps can be taken to address the error encountered in TypeScript?

Answer №1

Similar questions

Creating an abstract static factory with a protected constructor in Typescript

Having trouble getting React app to recognize Sass properly

Angular 9: Trouble encountered with utilizing custom error handler for error instances

Generating dynamic content

What is the best way to connect a text box to a nested object in the state of a React component?

Angular 10: Unexpected Behavior with Observables

What is the best way to avoid (click) from adding the class to each individual element within an ngFor loop?

Guide to setting a SetState function within a component (Using NextJS and TypeScript)

There are two modals present on the page, however only one of them is triggered for all actions in Angular 2

Guide on automatically inserting a colon (:) after every pair of characters in Angular

Create a custom class that functions similarly to a dictionary

Eliminate duplicate values in an array while preserving the original data in TypeScript

Ways to enhance the type definitions for a built-in HTML element in Vue.js?

Avoid estimating the quantity using a pipe

Removing an image from the files array in Angular 4: A step-by-step guide

Is there a way to add zeros at the beginning of ZIP codes that have only 3 or 4 digits using LODASH or Typescript?

Discovering the origins of the node.js native modules and delving into the intricacies of typed modules

Differences between NgRx @Effect and createEffect

Is it possible to create my TypeORM entities in TypeScript even though my application is written in JavaScript?

The upcoming developer manages to execute the program successfully, however, it continues to load indefinitely