The shape-matching subset functionality in Typescript is experiencing issues

Question

The shape-matching subset functionality in Typescript is experiencing issues

One of the key principles of TypeScript is that type checking focuses on the structure of values, a concept known as duck typing or structural typing. This means that only a subset of an object's fields needs to match for it to be considered compatible.

For instance, in TypeScript, the following code is valid:

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

const rect = { x: 33, y: 3, width: 30, height: 80 };
logPoint(rect); // logs "33, 3"

However, if you directly call the logPoint function with an object literal, TypeScript will raise a warning:

logPoint({ x: 33, y: 3, width: 30, height: 80 }); // error

So, why does subset type-matching work in the first case but not in the second?

Links:

Reference on structural type system

First example

Second example

typescript

Answer 1

Answer №1

Typescript's strictness levels vary depending on the context in which you are working.

When you define an object with explicit types, Typescript enforces strict rules and does not allow any additional properties to be added. This explains why your second example triggers an error: in the given context, the object can only be of type Point, but you have included extra properties which violate this rule.

Another instance of this strict checking is demonstrated below. Even though I have specified that a Point object is being created, it includes unnecessary details:

const rect: Point = { x: 33, y: 3, width: 30, height: 80 };

In contrast, your first example does not face the same level of strictness. Since the object creation line lacks a specific type declaration, Typescript assigns a generic type

{ x: number, y: number, width: number, height: number }

. Consequently, when passing this object as an argument, Typescript focuses on whether the types match rather than strictly adhering to the predefined structure.

Answer 2

Typescript's strictness levels vary depending on the context in which you are working.

When you define an object with explicit types, Typescript enforces strict rules and does not allow any additional properties to be added. This explains why your second example triggers an error: in the given context, the object can only be of type Point, but you have included extra properties which violate this rule.

Another instance of this strict checking is demonstrated below. Even though I have specified that a Point object is being created, it includes unnecessary details:

const rect: Point = { x: 33, y: 3, width: 30, height: 80 };

In contrast, your first example does not face the same level of strictness. Since the object creation line lacks a specific type declaration, Typescript assigns a generic type

{ x: number, y: number, width: number, height: number }

. Consequently, when passing this object as an argument, Typescript focuses on whether the types match rather than strictly adhering to the predefined structure.

Answer 3

Answer №2

@jonrsharpe is absolutely correct

This concept is referred to as: excess property check

When assigning object literals to variables or passing them as arguments, they undergo special treatment known as excess property checking. If an object literal contains properties not present in the "target type," an error will occur:

If you still prefer using references, there is a workaround available:

interface Point {
  x: number;
  y: number;
}

type IsPoint<T> = T extends Point ? Point extends T ? T : never : never;

function logPoint<T>(p: IsPoint<T>) {
  console.log(`${p.x}, ${p.y}`);
}

const rect = { x: 33, y: 3, width: 30, height: 80 };
const rect2 = { x: 33, y: 3};

logPoint(rect); // This will result in an error, as Point does not include width and height properties

logPoint(rect2) // This is fine 

logPoint({ x: 33, y: 3, width: 30, height: 80 }); // Will also generate an error

Playground

Answer 4

@jonrsharpe is absolutely correct

This concept is referred to as: excess property check

When assigning object literals to variables or passing them as arguments, they undergo special treatment known as excess property checking. If an object literal contains properties not present in the "target type," an error will occur:

If you still prefer using references, there is a workaround available:

interface Point {
  x: number;
  y: number;
}

type IsPoint<T> = T extends Point ? Point extends T ? T : never : never;

function logPoint<T>(p: IsPoint<T>) {
  console.log(`${p.x}, ${p.y}`);
}

const rect = { x: 33, y: 3, width: 30, height: 80 };
const rect2 = { x: 33, y: 3};

logPoint(rect); // This will result in an error, as Point does not include width and height properties

logPoint(rect2) // This is fine 

logPoint({ x: 33, y: 3, width: 30, height: 80 }); // Will also generate an error

Playground

The shape-matching subset functionality in Typescript is experiencing issues

Answer №1

Answer №2

Similar questions

The creation of the Angular project was unsuccessful due to the outdated circular-json dependency

NestJS: Specify the data type for @Body()

Building a React Typescript service with axios functionality

Backend communication functions seamlessly within the service scope, yet encounters obstacles beyond the service boundaries

Ways to simulate a dependent class in TypeScript & JEST without modifying constructor parameters to optional

Is subtyping causing issues in TypeScript's inheritance model?

Give it a little time before uploading a widget onto the page

Having trouble extracting a list of matches using a Regular Expression?

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

DeActivation only occurs once per route

Why am I encountering this rendering issue when passing data to the ReactTable component?

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

Angular 2: Enhancing User Experience with Pop-up Dialogs

Does the React memo function modify the component's prop type?

What are some strategies for enhancing TypeScript/Node speed in VSCode with the help of WSL2 and Docker?

Steps for referencing a custom JavaScript file instead of the default one:

The type string[] cannot be assigned to type 'IntrinsicAttributes & string[]'

Avoiding the use of reserved keywords as variable names in a model

Using JSDoc with "T extending Component"

Centralize all form statuses in a single component, conveniently organized into separate tabs