What is the reasoning behind TypeScript's assumption that array element lookup will not result in undefined?

It is quite surprising that this snippet of typescript does not throw a type error, which you can also test in the typescript sandbox:

class Foo {
  constructor(readonly x: number, readonly y: number) {}
}

const xOfFirstFoo = (arr: Array<Foo>): number => {
  return arr[0].x
}

const result = xOfFirstFoo([]);
// The above line results in:
// [ERR]: "Executed JavaScript Failed:" 
// [ERR]: Cannot read property 'x' of undefined

One would assume that the typer should recognize that arr[0] (or any arr[i]) could either be a Foo or undefined, and therefore it cannot guarantee the presence of an .x property.

So, what's really happening here?

arraystypescript

Answer №1

I want to give a big shoutout to @jonrsharpe and @shinigami for their invaluable insights that really helped me grasp this concept! To sum it up:

  1. Think of arrays as essentially { [index: number]: T }, where each value at a certain index is expected to have a corresponding defined T value. If you're looking for a specific length, consider using a tuple type.

  2. However, with the introduction of the flag --noUncheckedIndexedAccess in TypeScript 4.1, the behavior will align more closely with what I initially expected. This means:

In this updated mode, every property access (e.g., foo.bar) or indexed access (e.g., foo["bar"]) is now considered potentially undefined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating consecutive HTTP API requests in Angular 2

Is there a way to use RXJS in order to handle multiple API calls, where one call is dependent on another? ...

javascriptangulartypescriptrxjs

Tips for concealing title when window is resized?

I'm working on a webpage that has a title at the top, but I want to hide it on smaller devices and make it responsive when the window is resized. Currently, I only show the title when the window width (w) is greater than 450 pixels. However, I'm ...

javascriptangulartypescriptionic-framework

Immutable.Map<K, T> used as Object in Typescript

While refactoring some TypeScript code, I encountered an issue that has me feeling a bit stuck. I'm curious about how the "as" keyword converts a Map<number, Trip> into a "Trip" object in the code snippet below. If it's not doing that, the ...

javascriptangulartypescriptimmutable.js

Creating and handling Observable of Observables in RxJS: Best practices

Within my Angular application, there are multiple services that have dependencies on each other. To manage this, I have created a dependency map as shown in the example below: let accountInitialization$: Observable<void>; let productInitialization$: ...

angulartypescriptrxjs

Invoking a function on an immutable object

I have a code snippet that looks like this: private get headers(): Headers { const headers = new Headers(); headers.set('Authorization', `Bearer ${this.auth.tokenSnapshot}`); return headers; } The variable headers is defined as ...

angulartypescript

Creating a single definition that encompasses the characteristics of both primitive and generic types without the need for combining them

Here is a scenario where I need to consolidate and refactor two types: ... .then((result1: any) => { let promises = { one: $q.when(val1), two: $q.when(val2) }; return $q.all(promises); }) .then((resolvedPromises: any) => { ...

angularjsgenericstypescriptpromise

Using TypeScript to efficiently filter an Array by converting all values to lowercase

I have a custom array in TypeScript that needs to be filtered based on the city and job, with case-insensitivity as a requirement. array = [{ name: "Hardik", city: null, job: null }, { name: "John", city: "Ahmedabad", job: "IT" }, { name: "Margie", c ...

typescriptfilter

What causes a JSON error upon deleting a list in Replit?

Need assistance with deleting a specific index from a list stored in a json file The json file structure { "0": [ "0", "1", "2", "3" ] } The Python program import json with o ...

pythonarraysjsonpython-3.xlist

Signature for a generic function that takes an input of one type and returns an output of a different type

Hello, I am currently facing an issue where I am trying to pass a function as an argument to another function and need to provide the type signature for that function. Initially, I attempted to solve this problem using the following code snippet: const fun ...

typescripttypescript-typingstypescript-generics

Exploring ways to analyze data that shares similarities within a JSON object document

I'm currently working on an application to detect duplicate and unique data within a JSON file. My goal is to accurately count the number of unique records present. Within the JSON object, there are numerous first and last names. My aim is to not onl ...

javascriptarraysjsonreactjsobject

Problems with PHP Arrays

I've been working on a basic shopping cart for my friend, and I'm using an array in session to store the items. When I want to include a new item in the cart, this is the code I use: $next_item = sizeof($_SESSION['cart']) +1; $_SESSIO ...

phparraysmultidimensional-arrayshopping-cart

What is preventing Angular from letting me pass a parameter to a function in a provider's useFactory method?

app.module.ts bootstrap: [AppComponent], declarations: [AppComponent], imports: [ CoreModule, HelloFrameworkModule, ], providers: [{ provide: Logger, useFactory: loggerProviderFunc(1), }] ...

javascriptangulartypescriptdependency-injectionangular5

Can we determine the return type of a function based on the specific parameters it is called with?

When working with generated APIs, such as openapi-fetch, our code may look something like this: import {paths} from "./the-generated-types"; import createClient from "openapi-fetch"; const client = createClient<paths>(); // U ...

typescript

Exploring modules alias functionality in TypeScript

Initially, I believed that using path & basePath in tsconfig would allow aliases, but it appears not to be the case. "moduleResolution": "node", "baseUrl": "./src", "paths": { "@api/*": [&qu ...

typescripttsconfig

Strategies for preventing profanity in Typescript within Nuxt 2 implementation

implement user authorization functionality create the Auth class for authentication handling import type { Context } from '@nuxt/types'; export class Auth { public ctx: Context; constructor(ctx: Context) { t ...

typescriptvue.jsnuxt.js

Working with comma delimiting and `getline` functions in C++

I am currently working on a program that is designed to read input from a text file containing multiple lines. Each line in the text file represents information about a student and each piece of information is separated by a comma. Here is the code I have ...

c++arraysdelimiterifstream

Issue detected in the tile game event handler loop

I have created an ActionListen class to add action listeners to the buttons in a grid based on the numbers assigned to them. The function of the class is to swap two buttons when a button adjacent to an empty spot is clicked. However, when I click a button ...

javaarrays

Is it possible to iterate through an array in order to modify elements' attributes when hovering over them?

Is there a simpler way to achieve this? I'm using jQuery to toggle navigation aria attributes on hover, but it feels like there might be a more concise solution. Apologies for my lack of expertise, still learning the ropes here. var navItems = [&apo ...

jqueryarraysnavigationhover

Creating distinctive click events for every Repetition of an Array in JavaScript

Consider the following scenario with three forms sharing the same repeated instance and lacking a unique identifier: <form action="/haters"><input type="submit" value="stop hatin"></form> <form action="/haters"><input type="subm ...

javascriptjqueryarraysjquery-events

Verify the final element in the array

I have an array of strings, and I need to compare the i element with the i + 1 element for any similarities, excluding the last element as it has already been checked by the previous one. String[] somearr = new {"first, second"}; arr[i] && arr[i+ ...

javaarraysindexoutofboundsexception