What's the method for validating the spread operator in Typescript?

Question

What's the method for validating the spread operator in Typescript?

Is it possible to prevent this code from compiling? (since it currently does...)

const bar: { a: string } = {
    a: '',
    ...{b: ''}
}

typescript typescript-typings

Answer 1

Answer №1

It was surprising to discover that this code successfully passed the type checker!

After some investigation, I have a strong suspicion as to why this is happening, though I haven't found any official confirmation yet. Therefore, instead of providing an answer, consider this more of a discussion starter that exceeds the length of a simple comment. In essence, take the following information with a grain of salt.

I believe that TypeScript's "ascription"/"annotation" feature allows for flexibility based on subtypes. Essentially, when we use the syntax:

const foo: Foo = bar;

If the type of bar is a subtype of Foo, it appears to satisfy the type checker without issues. Here's a specific example:

class Foo {
  public a: string;
}

// `Bar` is a subtype of `Foo`
class Bar extends Foo {
  public b: string;
}

const foo: Foo = new Bar();
//         ^^^       ^^^ This works perfectly fine!

Additionally, due to TypeScript's structural subtyping, the following scenario is also valid:

class Foo {
  a: string;
}

// `Quux` is structurally identical to (and therefore a subtype of) `Foo`
class Quux {
  a: string;
}

const foo: Foo = new Quux();

Considering this explanation, your particular example may be accepted because { a: string; b: string } is a subtype of { a: string }.

To sum up, assuming this theory is correct, there may not be a way to compel the type checker to disapprove of your example.

Edit: However, there are some missing pieces to this theory. As noted by @apflieger, this explanation doesn't account for why

const foo: { a: string } = {
  a: 'test',
  b: 'test',
};

gets rejected. It seems like the spreading operation plays a crucial role in this case.

It's possible that the type of

{
  a: 'test',
  ...{ b: 'test' }
}

is inferred as something along the lines of

{ a: string } & { b: string }

, whereas in the previous example it is inferred as { a: string; b: string }.

Answer 2

It was surprising to discover that this code successfully passed the type checker!

After some investigation, I have a strong suspicion as to why this is happening, though I haven't found any official confirmation yet. Therefore, instead of providing an answer, consider this more of a discussion starter that exceeds the length of a simple comment. In essence, take the following information with a grain of salt.

I believe that TypeScript's "ascription"/"annotation" feature allows for flexibility based on subtypes. Essentially, when we use the syntax:

const foo: Foo = bar;

If the type of bar is a subtype of Foo, it appears to satisfy the type checker without issues. Here's a specific example:

class Foo {
  public a: string;
}

// `Bar` is a subtype of `Foo`
class Bar extends Foo {
  public b: string;
}

const foo: Foo = new Bar();
//         ^^^       ^^^ This works perfectly fine!

Additionally, due to TypeScript's structural subtyping, the following scenario is also valid:

class Foo {
  a: string;
}

// `Quux` is structurally identical to (and therefore a subtype of) `Foo`
class Quux {
  a: string;
}

const foo: Foo = new Quux();

Considering this explanation, your particular example may be accepted because { a: string; b: string } is a subtype of { a: string }.

To sum up, assuming this theory is correct, there may not be a way to compel the type checker to disapprove of your example.

Edit: However, there are some missing pieces to this theory. As noted by @apflieger, this explanation doesn't account for why

const foo: { a: string } = {
  a: 'test',
  b: 'test',
};

gets rejected. It seems like the spreading operation plays a crucial role in this case.

It's possible that the type of

{
  a: 'test',
  ...{ b: 'test' }
}

is inferred as something along the lines of

{ a: string } & { b: string }

, whereas in the previous example it is inferred as { a: string; b: string }.

What's the method for validating the spread operator in Typescript?

Answer №1

Similar questions

I'm facing an issue with SSRProvider in my NextJs application

problem encountered while attempting to drag and drop list elements on a web application utilizing dhtmlx 5.0 and wijmo grid

Maintain the nullability of object fields when casting

In TypeScript, encountering an unanticipated intersection

Perform TypeScript type checks exclusively on a Next.js project

Refresh Angular component upon navigation

Add the specified HTML tag to the existing document. An error has occurred: HierarchyRequestError - The action would result in an invalid node

Tips on Identifying the Category

Send a variable from a next.js middleware to an API request

The attribute 'disabled' is originally defined as a characteristic within the class 'CanColor & CanDisableRipple & HasTabIndex & MatChipBase'. However, it is replaced in the current context of 'MatChip' as an attribute

Postgres Array intersection: finding elements common to two arrays

Preventing the display of the login page for an authenticated user in Angular

Enforce boundaries by constraining the marker within a specified polygon on a leaflet map

Different methods to prompt TypeScript to deduce the type

What is the best way to run tests on this method using Jest?

Concealing a VueJs component on specific pages

Executing the Angular 2 foreach loop before the array is modified by another function

Encountering a PropertyTypeError while attempting to process a payment via Stripe in conjunction with use-shopping-cart on Next.js

Conflicting TypeScript enum types: numbers and numbers in NestJS/ExpressJS

TS2322: Subclass missing property, yet it still exists