Typescript narrowing facing difficulty in isolating property type

Question

Typescript narrowing facing difficulty in isolating property type

I encountered an issue with my code:

interface Wide {
  prop: string | undefined
}

interface Narrow {
  prop: string
}

class Foo {
  prop: string
  constructor({ prop }: Narrow) {
    this.prop = prop
  }
}

const array = [{ prop: undefined }, { prop: 'foo' }]

array.forEach((obj: Wide) => {
  if (obj.prop && typeof obj.prop === 'string' && obj.prop !== undefined) {
    console.log(new Foo({ ...obj }))
    // Type 'undefined' is not assignable to type 'string'.
  }
})

In normal circumstances, I would expect Typescript to infer that when the if condition is met, it implies that the current obj being iterated over has a defined property prop with the type string. However, I am unable to make it work as expected.

Playground

typescript

Answer 1

Answer №1

To achieve the desired outcome, it is recommended to implement a Type guard (type predicate)

interface Wide {
  prop: string | undefined
}

interface Narrow {
  prop: string
}

class Foo {
  prop: string
  constructor({ prop }: Narrow) {
    this.prop = prop
  }
}

const array = [{ prop: undefined }, { prop: 'foo' }]

function isNarrow(obj: Wide | Narrow): obj is Narrow {
  return typeof obj.prop === 'string';
}

array.forEach((obj: Wide) => {
  if (isNarrow(obj)) {
    console.log(new Foo({ ...obj }));
  }
})

Interactive Demo

Answer 2

To achieve the desired outcome, it is recommended to implement a Type guard (type predicate)

interface Wide {
  prop: string | undefined
}

interface Narrow {
  prop: string
}

class Foo {
  prop: string
  constructor({ prop }: Narrow) {
    this.prop = prop
  }
}

const array = [{ prop: undefined }, { prop: 'foo' }]

function isNarrow(obj: Wide | Narrow): obj is Narrow {
  return typeof obj.prop === 'string';
}

array.forEach((obj: Wide) => {
  if (isNarrow(obj)) {
    console.log(new Foo({ ...obj }));
  }
})

Interactive Demo

Answer 3

Answer №2

To resolve this issue, consider implementing a custom type predicate.

function isSpecific<T extends { prop: unknown }>(obj: T): obj is T & Narrow {
  return typeof obj.prop === 'string'
}

array.forEach((obj: Wide) => {
  if (obj.prop && isSpecific(obj)) {
    console.log(new Foo({ ...obj }))
  }
})

A couple of points to note:

Copying the object with spread syntax may not be necessary. Passing the original object to the constructor could suffice.
The condition involving obj.prop must include an additional check for empty string. Omitting obj.prop !== undefined is acceptable since a type of 'string' implies it cannot be undefined.

Alternatively, you can utilize type assertions as another solution.

array.forEach((obj: Wide) => {
  if (obj.prop && typeof obj.prop === 'string') {
    console.log(new Foo({ ...obj } as Narrow))
  }
})

Answer 4

To resolve this issue, consider implementing a custom type predicate.

function isSpecific<T extends { prop: unknown }>(obj: T): obj is T & Narrow {
  return typeof obj.prop === 'string'
}

array.forEach((obj: Wide) => {
  if (obj.prop && isSpecific(obj)) {
    console.log(new Foo({ ...obj }))
  }
})

A couple of points to note:

Copying the object with spread syntax may not be necessary. Passing the original object to the constructor could suffice.
The condition involving obj.prop must include an additional check for empty string. Omitting obj.prop !== undefined is acceptable since a type of 'string' implies it cannot be undefined.

Alternatively, you can utilize type assertions as another solution.

array.forEach((obj: Wide) => {
  if (obj.prop && typeof obj.prop === 'string') {
    console.log(new Foo({ ...obj } as Narrow))
  }
})

Answer 5

Answer №3

That's because the obj is of type Wide, even though it contains a value of type string (and not undefined). In this scenario, you have more knowledge than the TypeScript compiler, so you can perform a type assertion like so:

if (obj.prop && typeof obj.prop === 'string' && obj.prop !== undefined) {
    let narrow: Narrow = obj as Narrow;
    console.log(new Foo(narrow));
}

PlayGroundLink

Answer 6

That's because the obj is of type Wide, even though it contains a value of type string (and not undefined). In this scenario, you have more knowledge than the TypeScript compiler, so you can perform a type assertion like so:

if (obj.prop && typeof obj.prop === 'string' && obj.prop !== undefined) {
    let narrow: Narrow = obj as Narrow;
    console.log(new Foo(narrow));
}

PlayGroundLink

Answer 7

Answer №4

It seems like the compiler is able to correctly narrow the type of obj.prop:

if (obj.prop && typeof obj.prop === 'string' && obj.prop !== undefined) {
  console.log(new Foo({ prop: obj.prop }))
}

However, it lacks the intelligence to narrow down the type of the entire obj in this scenario. If you adjust Wide to be a union:

type Wide = Narrow | {prop: undefined}

then the second option will be filtered by the if statement.

Answer 8

It seems like the compiler is able to correctly narrow the type of obj.prop:

if (obj.prop && typeof obj.prop === 'string' && obj.prop !== undefined) {
  console.log(new Foo({ prop: obj.prop }))
}

However, it lacks the intelligence to narrow down the type of the entire obj in this scenario. If you adjust Wide to be a union:

type Wide = Narrow | {prop: undefined}

then the second option will be filtered by the if statement.

Typescript narrowing facing difficulty in isolating property type

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

invoke the next function a different privateFunction within rxjs

What is the process for transferring an existing collection or data in Firestore to a subcollection?

`How can default query parameters be configured for Routes in Angular 7?`

The NextJS image URL remains constant across various endpoints

Can discriminated unions solely be utilized with literal types?

Tips for concealing a react bootstrap modal while simultaneously executing the save function

Testing a click event in Angular that triggers only the navigateByUrl function, utilizing Jasmin and Karma

Creating personalized breakpoints in Material UI using TypeScript

Use the date-fns max function to identify the latest date in an array of date strings

What is the best way to link this to a function in AngularIO's Observable::subscribe method?

When implementing Swiper in TypeScript, an error is encountered: TypeError - Attempting to invoke the Swiper class constructor without using the 'new' keyword

Utilizing a forwardRef component in TypeScript to handle child elements

How can I incorporate TypeScript paths into Storybook with Webpack version 5?

Is there a way to automatically close the previous accordion when scrolling to a new one on the page?

Update each number in an array by appending a string within a table in an Angular component, rather than the

What is the process for creating a coverage report for a TypeScript extension in vscode?

Type for the key in array.reduce that is not specific or unique

What could be causing my code to fail in retrieving lists from the SharePoint site?

I am having trouble getting the bs-stepper to function properly within my Angular project

How can I define types for (const item of entries) in Typescript?