Refining Interface Properties by Eliminating Null Options

Question

Refining Interface Properties by Eliminating Null Options

I am facing an issue with an interface property that can be null. I need to ensure it's not null before passing the object into a typesafe object.

While narrowing works when assigning the property to a variable, it seems to fail when trying to use the object as a whole.

Using casting is not an option as it goes against design time type checking principles.

interface Person
{
  middle:string | null
}

interface MiddleNamePerson
{
  middle:string
}

function DoWork(person:Person) {
  if(person.middle)
  {
    const middleName:string = person.middle; // works
    const middle : MiddleNamePerson = person // Error: Type of 'Person' not Assignable to 'MiddleNamePerson' 
    DoStuff(person) // Error: the argument of 'Person' is not Assignable to parameter
  }

}

function DoStuff(value:{middle:string}) {}

typescript

Answer 1

Answer №1

Solution

Instead of using this basic check:

if(person.midddle)

Try implementing a more robust type guard:

if(hasDefined(person, ['midddle']) {

This particular type guard can be described as:

const hasDefined = <T, K extends keyof T>(argument: T | Defined<T, K>, keys: K[]): argument is Defined<T, K> =>
  keys.every(key => argument[key] != null)

type Defined<T, K extends keyof T = keyof T> = {
  [P in K]-?: Exclude<T[P], undefined | null>
}

Explanation

In TypeScript, control flow does not propagate upwards. By simply checking if(person.midddle), we only confirm the truthiness of the middle name without affecting the definition of Person. The object still remains where the property named middle could potentially be null.

By enhancing the type guard to verify the entire object instead of just a single field, we ensure that within the code block, person truly represents a well-defined instance of Person.

Answer 2

Solution

Instead of using this basic check:

if(person.midddle)

Try implementing a more robust type guard:

if(hasDefined(person, ['midddle']) {

This particular type guard can be described as:

const hasDefined = <T, K extends keyof T>(argument: T | Defined<T, K>, keys: K[]): argument is Defined<T, K> =>
  keys.every(key => argument[key] != null)

type Defined<T, K extends keyof T = keyof T> = {
  [P in K]-?: Exclude<T[P], undefined | null>
}

Explanation

In TypeScript, control flow does not propagate upwards. By simply checking if(person.midddle), we only confirm the truthiness of the middle name without affecting the definition of Person. The object still remains where the property named middle could potentially be null.

By enhancing the type guard to verify the entire object instead of just a single field, we ensure that within the code block, person truly represents a well-defined instance of Person.

Answer 3

Answer №2

At the moment, TypeScript does not automatically widen types based on control flow analysis (to the best of my knowledge). It could be a valuable addition in the future.

Currently, you can utilize typeguards for this purpose, although it may require more effort.

function hasMiddle(person: Person): person is { middle: string } {
  return !!person.middle // note that your condition will also pass with an empty string.
}

function DoWork(person: Person) {
  if (hasMiddle(person)) {
    const middleName: string = person.middle;
    const middle: MiddleNamePerson = person
    DoStuff(person)
  }
}

To enhance the readability of the typeguard, you have the option to use ExcludePropType from the library type-plus:

function hasMiddle(person: Person): person is ExcludePropType<Person, null> {
  return !!person.middle
}

Answer 4

At the moment, TypeScript does not automatically widen types based on control flow analysis (to the best of my knowledge). It could be a valuable addition in the future.

Currently, you can utilize typeguards for this purpose, although it may require more effort.

function hasMiddle(person: Person): person is { middle: string } {
  return !!person.middle // note that your condition will also pass with an empty string.
}

function DoWork(person: Person) {
  if (hasMiddle(person)) {
    const middleName: string = person.middle;
    const middle: MiddleNamePerson = person
    DoStuff(person)
  }
}

To enhance the readability of the typeguard, you have the option to use ExcludePropType from the library type-plus:

function hasMiddle(person: Person): person is ExcludePropType<Person, null> {
  return !!person.middle
}

Answer 5

Answer №3

One way to quickly solve the issue is by confidently affirming that the type is correct and then casting it to the desired interface.

const middle : MiddleNamePerson = person as MiddleNamePerson;

A better approach would be to implement a Type Guard. This way, the type will automatically be identified as the narrowed type after usage. Here's how you can use a type guard in your code:

export interface Person {
  midddle: string | null;
}

export interface MiddleNamePerson {
  midddle: string;
}

// type guard function
function isMiddleNamePerson(person: Person): person is MiddleNamePerson {
  return person != null && person.midddle != null;
}

export function DoWork(person: Person) {
  if (isMiddleNamePerson(person)) {
    DoStuff(person); // person is automatically recognized as MiddleNamePerson because of the type guard
  }

}

function DoStuff(value: {midddle: string}) { }

Answer 6

One way to quickly solve the issue is by confidently affirming that the type is correct and then casting it to the desired interface.

const middle : MiddleNamePerson = person as MiddleNamePerson;

A better approach would be to implement a Type Guard. This way, the type will automatically be identified as the narrowed type after usage. Here's how you can use a type guard in your code:

export interface Person {
  midddle: string | null;
}

export interface MiddleNamePerson {
  midddle: string;
}

// type guard function
function isMiddleNamePerson(person: Person): person is MiddleNamePerson {
  return person != null && person.midddle != null;
}

export function DoWork(person: Person) {
  if (isMiddleNamePerson(person)) {
    DoStuff(person); // person is automatically recognized as MiddleNamePerson because of the type guard
  }

}

function DoStuff(value: {midddle: string}) { }

Refining Interface Properties by Eliminating Null Options

Answer №1

Answer №2

Answer №3

Similar questions

Organizing Angular models and interfaces

Implementing Angular's Advanced Filtering Across Multiple Data Fields

Guidance on installing only TypeScript dependencies for building from package.json using npm, ensuring a leaner build without unnecessary 150MB of additional dependencies

Is there a way to modify the antd TimePicker to display hours from 00 to 99 instead of the usual 00 to 23 range?

Utilizing Lodash in TypeScript to merge various arrays into one cohesive array while executing computations on each individual element

There was an unhandled exception that occurred due to a missing file or directory with the lstat error on 'D:a1s ode_modulesquill'

What is the correct way to handle the return value of an useAsyncData function in Nuxt 3?

Different types of TypeScript interface keys being derived from an enum

Creating seamless compatibility between the elliptic library in JavaScript and the ecdsa library in Golang for efficient cross-platform operations

I continue encountering the Server Error message: "Error: The default export on page "/products/all" is not a React Component."

The JSONP request failed with an error stating: ReferenceError: document is not defined

Checking constructor arguments and code style issues

Exploring Function Overriding in TypeScript

Guide on generating a video thumbnail using JavaScript Application

ngx-datatables in Angular is experiencing issues with its filtering options

Verify if TypeScript object contains a specific key dynamically without the need for a custom type guard

AG-GRID-ANGULAR - Is there a way to automatically check or uncheck a checkbox in the header component based on the status of checkboxes in the cell renderers?

Differences Between JavaScript and TypeScript Classes

When is the right time to develop a Node.js application using Typescript with dockerization

Next.js (TypeScript) - Error: Property 'req' is not recognized on the type 'GetServerSideProps'