Checking the types for object literals returned from Array.map functions

Question

Checking the types for object literals returned from Array.map functions

Check out this demonstration I made in the TypeScript playground:

interface Test{
    a: string
    b: string
}

const object: Test = {
    a: 'b',
    b: 'c',
}

function testIt(): Test[] {
    const data = [{b: '2', c: '3'}]
    const prices: Test[] = data.length ? data.map((item) => {
        return {
            a: item.b,
            b: item.c,
            c: '2',
            d: '3'
        }
    }) : [];
    return prices;
}

If you remove either the 'a' or 'b' property from the object return statement within the array map method, it will result in a TypeScript error (as expected).

However, adding properties like 'c' or 'd' or any other unknown property does not trigger a TypeScript error. This behavior may only occur if the interface includes [x: string]: any.

So, why does Array.map perform type checking on missing properties in an interface but not on additional/unknown properties?

typescript

Answer 1

Answer №1

One of the challenges in object-oriented programming is ensuring that a derived type, which has additional properties, remains compatible with its base type that has fewer properties such as a and b.

In TypeScript, the compiler warns us when assigning object literals with excess properties to a type that expects fewer properties. This is known as excess property checking and it only occurs during direct assignments to a specific type.

The reason why excess property checking doesn't trigger in certain cases is due to the way type checking is handled for the map function. Initially, the return type of the callback function is inferred from the object literal, leading to an inferred type like

{ a: string, b: string, c: string, d: string }

. This inferred type is then used as the return type for map, resulting in an

Array<{ a: string, b: string, c: string, d: string }>

. Since this is eventually assigned to Test[], it complies with the compatibility rule. No object literal was directly assigned to a location expecting Test.

To force an error, we can prevent TypeScript from inferring the callback result by adding an explicit annotation to the callback function. This directly assigns an object literal to a position expecting Test:

const prices = data.length ? data.map((item) : Test => {
    return {
        a: item.b,
        b: item.c,
        c: '2', // error
        d: '3'
    }
}) : [];

Answer 2

One of the challenges in object-oriented programming is ensuring that a derived type, which has additional properties, remains compatible with its base type that has fewer properties such as a and b.

In TypeScript, the compiler warns us when assigning object literals with excess properties to a type that expects fewer properties. This is known as excess property checking and it only occurs during direct assignments to a specific type.

The reason why excess property checking doesn't trigger in certain cases is due to the way type checking is handled for the map function. Initially, the return type of the callback function is inferred from the object literal, leading to an inferred type like

{ a: string, b: string, c: string, d: string }

. This inferred type is then used as the return type for map, resulting in an

Array<{ a: string, b: string, c: string, d: string }>

. Since this is eventually assigned to Test[], it complies with the compatibility rule. No object literal was directly assigned to a location expecting Test.

To force an error, we can prevent TypeScript from inferring the callback result by adding an explicit annotation to the callback function. This directly assigns an object literal to a position expecting Test:

const prices = data.length ? data.map((item) : Test => {
    return {
        a: item.b,
        b: item.c,
        c: '2', // error
        d: '3'
    }
}) : [];

Checking the types for object literals returned from Array.map functions

Answer №1

Similar questions

There was an issue attempting to differentiate '[object Object]'. The Angular API Get Request from .Net only allows for arrays and iterables to be used

How to verify that the user is using the most up-to-date version of the application in React Native

Using React, PIXI, and Zustand can sometimes lead to stale state issues when handling mouse events

Manipulating CSS Class Properties Using JavaScript

tips for obtaining the highest value among multiple keys within an array

Palantir Forge: Enhancing Column Values with Typescript Functions

The promise callback in Angular2 is unable to access this

Tips for arranging datasets in React Chart.js 2 to create stacked bar charts

Derive data type details from a string using template literals

Issue: Module './App' not found in webpackSolution: Check if the module path is

What is the best way to create a highlighted navigation bar using Angular 2?

Currently in the process of modernizing an outdated method to a more up-to-date version in Jasmine, encountering issues related to

Is there a way to deactivate multiple time periods in the MUI Time Picker?

Ways to enforce a specific type based on the provided parameter

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

Issue with Readonly modifier not functioning as expected in Angular/Typescript

Production environment experiencing issues with Custom Dashboard functionality for AdminJS

Having trouble locating a nested component through multiple ng-content in Angular 8?

Erase Mistake in Pop-up Angular JSON Information and Bootstrap

Issue with Date generation in TypeScript class causing incorrect date output