What is the process of type checking in Typescript when passing arguments?

Question

What is the process of type checking in Typescript when passing arguments?

I'm curious about TypeScript and why the two function calls below result in different type checking outcomes. Can someone shed some light on this for me?

interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

var myObj = {size: 10, label: "Size 10 Object"};

//The type checking is successful with this call

**printLabel(myObj);**

//However, an error is flagged with this call stating "size does not exist in LabelledValue"

**printLabel({ size: 10, label: "Size 10 Object" });**

Thank you in advance.

object typescript types literals

Answer 1

Answer №1

The decision to flag excess properties in object literals as errors in TypeScript is intentional. It is likely that having extra properties is a mistake, so the compiler catches it as an error. In scenarios like the second call of the printLabel function mentioned in your query, if the size property is not being used, there is no need for it to be included in the object literal.

The documentation explains:

In cases like these, TypeScript considers the presence of additional properties in object literals a potential issue. When assigning object literals to other variables or passing them as arguments, they undergo excess property checking. If an object literal contains properties that the "target type" does not define, an error will be triggered.

Answer 2

The decision to flag excess properties in object literals as errors in TypeScript is intentional. It is likely that having extra properties is a mistake, so the compiler catches it as an error. In scenarios like the second call of the printLabel function mentioned in your query, if the size property is not being used, there is no need for it to be included in the object literal.

The documentation explains:

In cases like these, TypeScript considers the presence of additional properties in object literals a potential issue. When assigning object literals to other variables or passing them as arguments, they undergo excess property checking. If an object literal contains properties that the "target type" does not define, an error will be triggered.

Answer 3

Answer №2

When it comes to the first scenario, typescript automatically converts an object with properties { size: number, label: string } to type LabelledValue, and this conversion goes smoothly without any issues.

However, in the second case, typescript interprets that you are attempting to construct an object of type LabelledValue. As a result, it throws an error because size is not a recognized property within that type definition.

If you were to declare a specific type for myObj in the first situation, like this:

var myObj: LabelledValue = {size: 10, label: "Size 10 Object"}; // this will trigger a compiler error

I'm not entirely sure about your objective here, but one potential solution could be to include size as an optional property within your interface, such as:

interface LabelledValue {
    label: string;
    size?: number;
}

Answer 4

When it comes to the first scenario, typescript automatically converts an object with properties { size: number, label: string } to type LabelledValue, and this conversion goes smoothly without any issues.

However, in the second case, typescript interprets that you are attempting to construct an object of type LabelledValue. As a result, it throws an error because size is not a recognized property within that type definition.

If you were to declare a specific type for myObj in the first situation, like this:

var myObj: LabelledValue = {size: 10, label: "Size 10 Object"}; // this will trigger a compiler error

I'm not entirely sure about your objective here, but one potential solution could be to include size as an optional property within your interface, such as:

interface LabelledValue {
    label: string;
    size?: number;
}

Answer 5

Answer №3

Within Typescript, there are scenarios where potentially unsound operations that cannot be determined during compile-time are made secure.

displayLabel(myItem);  // operation with potential soundness issues

According to the Typescript handbook:

The guiding principle of TypeScript's structural type system is that x is considered compatible with y if y includes at least the same properties as x.

In this case, item is deemed type-compatible with LabeledValue because item possesses all the necessary attributes that LabeledValue demands (i.e., label: string).

Nevertheless, an error will occur in the following scenario as object literals can solely define recognized properties:

displayLabel({ height: 20, label: "Height 20 Object" });  // ERROR

To rectify this issue, you simply need to cast the object literal explicitly as <LabeledValue>:

displayLabel(<LabeledValue>{ height: 20, label: "Height 20 Object" });  // OK

Answer 6

Within Typescript, there are scenarios where potentially unsound operations that cannot be determined during compile-time are made secure.

displayLabel(myItem);  // operation with potential soundness issues

According to the Typescript handbook:

The guiding principle of TypeScript's structural type system is that x is considered compatible with y if y includes at least the same properties as x.

In this case, item is deemed type-compatible with LabeledValue because item possesses all the necessary attributes that LabeledValue demands (i.e., label: string).

Nevertheless, an error will occur in the following scenario as object literals can solely define recognized properties:

displayLabel({ height: 20, label: "Height 20 Object" });  // ERROR

To rectify this issue, you simply need to cast the object literal explicitly as <LabeledValue>:

displayLabel(<LabeledValue>{ height: 20, label: "Height 20 Object" });  // OK

What is the process of type checking in Typescript when passing arguments?

Answer №1

Answer №2

Answer №3

Similar questions

Passing a value from an HTML template to a method within an Angular 4 component

In the process of using SWRInfinite for React Infinite Scrolling, the initial call may be made

The outcome of array.splice is null

Share images and additional data in Nativescript using TypeScript and Angular without the need for FormData

What is the best way to integrate the Telegram login widget into an Angular application?

Angular 6's observable variable doesn't properly support Ng If functionality

Pass an object and a string variable using Jquery Ajax

Exploring the concept of inheritance and nested views within AngularJS

The code encountered an error with message TS2345 stating that the argument type '(a: Test, b: Test) => boolean | 1' cannot be assigned to a parameter type of '(a: Test, b: Test) => number'

Navigating to the main directory in Angular 2

What is the purpose of having multicharacter literals in the C and C++ programming languages?

JSX tags without any inner content should be self-closed

Simulating MatSnackBar in Angular 8 using Jasmine Testing

Is there a way to verify if an object adheres to a specified interface?

Transfer your focus to the following control by pressing the Enter key

Leveraging bespoke components for data within Ionic 2

Display responsive input field based on selected option in ionic2 dropdown menu

Issue with the Mat paginator items per page functionality not functioning properly in Angular 9

Apologies, but it seems there was an issue with the installation of the "@angular/compiler-cli" package

Can TypeScript interfaces be used with various types?