Why doesn't TypeScript perform type checking on a two-dimensional array?

Question

Why doesn't TypeScript perform type checking on a two-dimensional array?

Here's a simple code snippet I've been using to create a 2D array:

type cell = {
  id: string;
};
const board: cell[][];
board = Array(10)
      .fill("")
      .map((x) => Array(10).fill(ANY TYPE CAN GO HERE WHY?));

Oddly enough, when I populate the inner array, I can insert any type of data without encountering any errors. Usually, I would expect to only be able to input objects of type cell. Why is this happening?

I'm aware that I should probably specify a type for Array(10), but shouldn't TypeScript then throw an error since "cell" is not included in any union type?

Why isn't type checking enforced in this situation?

Could this convoluted method be causing issues with inferred types?

arrays typescript types

Answer 1

Answer №1

Array() results in any[], and TypeScript automatically converts it to cell[] without raising any concerns.

This raises 3 important questions:

Why does TypeScript convert any to cell? This is a core aspect of TypeScript and must be handled with caution.

Let's consider a similar scenario:

type cell = {
    id: string;
};

const foo: any = "foo";
const c: cell = foo;

Why does Array(10) yield any[]? It's because there is no way to determine the type of value at this point. However, Array<cell>(10) returns a cell[].
Why does fill(obj) result in any[] instead of (typeof obj)[]? This may be due to the fact that fill modifies the object it operates on, keeping its original type intact.

The key issue here is that any can always be converted to other types, posing a potential risk as TypeScript sometimes undermines its own typing mechanisms.

Answer 2

Array() results in any[], and TypeScript automatically converts it to cell[] without raising any concerns.

This raises 3 important questions:

Why does TypeScript convert any to cell? This is a core aspect of TypeScript and must be handled with caution.

Let's consider a similar scenario:

type cell = {
    id: string;
};

const foo: any = "foo";
const c: cell = foo;

Why does Array(10) yield any[]? It's because there is no way to determine the type of value at this point. However, Array<cell>(10) returns a cell[].
Why does fill(obj) result in any[] instead of (typeof obj)[]? This may be due to the fact that fill modifies the object it operates on, keeping its original type intact.

The key issue here is that any can always be converted to other types, posing a potential risk as TypeScript sometimes undermines its own typing mechanisms.

Why doesn't TypeScript perform type checking on a two-dimensional array?

Answer №1

Similar questions

This TypeScript issue in ServiceStack ignores namespaces, leading to duplicate declarations

Order a portion of a JSON array according to another part of the same array

Positioning the search bar to the left with react-bootstrap-table

How can we retrieve string values from arrays in Plist files?

Arranging items in an ArrayObject using PHP

What is the best way to divide an array into groups of four elements when using ngFor

Tips for deactivating a specific value or graying it out within the list of value items in a drop-down menu using <ng-selectize> or <options> in Angular 7

deleting element from array once found

Ensuring Immutability of React Props in TypeScript

Discovering the highest value within an array

What is the specific term for an event that exclusively passes type arguments into a generic function within the realm of TypeScript?

Restricting HTTP requests to once every 200 milliseconds in Angular 4 with filtering in place

I was recently tasked with manipulating a sequence of numbers in a stream, such as 1,3,5,4,6,9. My objective was to display them in a compressed format, showing

Downloading PDF files on IOS while using Angular often results in the PDF opening in the same

Modify marker location as data updates

Handling arrays concurrently

Encountered an issue where property scrollToBottom is unable to be read of null upon returning to

Setting up the environment variable for ApolloClient to be utilized in server-side rendering for continuous integration/continuous deployment involves following a specific

What is the best way to fill an array with dates that are not empty?

Managing memory usage in Vue 2 when dealing with a high volume of data (approximately 50,000 objects)