typescript missing return type in array.map

Question

typescript missing return type in array.map

Why does TypeScript allow the code below, despite it containing a type error that I would expect?

export interface Structure {
    aaa: string;
}

export function f1(): Structure[] {  // TypeScript is fine with this, but not me
    const result = [].map(certState => {
        return {
            aaa: 'aaa',
            ADDITIONAL_FIELD: 'asdf'
        }
    });

    return result;
}

export function f2(): Structure[] { // TypeScript catches the error (unlike me)
        return [
            {
                aaa: 'sdf',
                ADDITIONAL_FIELD: 'asdf'
            }
        ]
    }

Check out the link here

Appreciate your help!

arrays typescript dictionary types

Answer 1

Answer №1

The issue arises from the direct return of the result in function f2().

If you were to modify f2() like this:

export function f2(): Structure[] {
    const returnVal = [
        {
            aaa: 'sdf',
            ADDITIONAL_FIELD: 'asdf'
        }
    ]

    return returnVal;
}

then the compiler error would vanish.

TypeScript relies on structural typing for determining type compatibility. Therefore, in your f1() code, result is considered as

{
   aaa: string,
   ADDITIONAL_FIELD: string
}[]

which is compatible with Structure[] (no risk of type narrowing).

I'm uncertain why a direct return doesn't work, but my theory is that in f2() you are stating to the compiler that "this particular array is of type Structure[]" and it disagrees. However, when using an intermediary variable in f1(), you specify "this function returns Structure[]" and upon returning the variable, the compiler verifies that "alright, result matches Structure[]" so this function performs as described.

I would be interested to know if others can provide a more detailed explanation.

Answer 2

The issue arises from the direct return of the result in function f2().

If you were to modify f2() like this:

export function f2(): Structure[] {
    const returnVal = [
        {
            aaa: 'sdf',
            ADDITIONAL_FIELD: 'asdf'
        }
    ]

    return returnVal;
}

then the compiler error would vanish.

TypeScript relies on structural typing for determining type compatibility. Therefore, in your f1() code, result is considered as

{
   aaa: string,
   ADDITIONAL_FIELD: string
}[]

which is compatible with Structure[] (no risk of type narrowing).

I'm uncertain why a direct return doesn't work, but my theory is that in f2() you are stating to the compiler that "this particular array is of type Structure[]" and it disagrees. However, when using an intermediary variable in f1(), you specify "this function returns Structure[]" and upon returning the variable, the compiler verifies that "alright, result matches Structure[]" so this function performs as described.

I would be interested to know if others can provide a more detailed explanation.

Answer 3

Answer №2

Recently, I discovered that Typescript strictly enforces exact types only for object literals. This means that in function f1, which does not use object literals, adding additional properties is allowed and considered valid by Typescript. However, in function f2, which uses object literals, adding extra properties is prohibited. This realization was initially concerning to me, but it simply reflects how Typescript operates.

Answer 4

Recently, I discovered that Typescript strictly enforces exact types only for object literals. This means that in function f1, which does not use object literals, adding additional properties is allowed and considered valid by Typescript. However, in function f2, which uses object literals, adding extra properties is prohibited. This realization was initially concerning to me, but it simply reflects how Typescript operates.

typescript missing return type in array.map

Answer №1

Answer №2

Similar questions

Utilizing ExpressJS in a NodeJS application with ES6 and Typescript

Retrieving the value of an object using a key in TypeScript

Is the Codewars Snail Test a Failure, or is the Code Flawed

Using Typescript to assign a custom object to any object is a powerful feature

What is the right way to send an array using $.post method?

How can I display a php array recursively within nested div elements?

What is the best way to check if an object exists in an array in JavaScript and update it if it does, otherwise add it as a new object in

Combining arrays while deducting specific values in PHP

Manipulating map references in C++

Retrieve JSON data within a service and provide it to a component

When using TypeScript in React, the event handler for the onLoad event of an image element cannot locate the properties naturalWidth and naturalHeight

Guide on transitioning an Angular 4 project created in Visual Studio 2015 to Angular 6 with Visual Studio Code

Iterate through a multidimensional array in PHP and add a prefix to each

Learn the process of merging an array element into another object and keeping track of the total count

PHP is throwing an 'Undefined offset' error and I'm unable to determine the cause

Learn how to utilize C# in order to read, write, and manipulate files effectively

Converting data types to bytes in the Java programming language

Properties cannot be accessed using the standard method in the controller; however, they function correctly when using an arrow

Exploring TypeScript: Navigating the static methods within a generic class

Removing a parent element in XML with C# based on the presence of a specific value in any of its child elements from an array