The object may be perceived as being `undefined` despite not actually being so

Question

The object may be perceived as being `undefined` despite not actually being so

After reviewing other responses, it seems that the issue may lie in how Typescript statically analyzes the code. If anyone can provide further explanation, that would be greatly appreciated.

Below is my code. I am unable to see how it could result in being undefined. While you can call foo({}) or foo({ algorithm: undefined }), it will still be merged with default and the resulting object will always contain algorithm.

type Options = {
    algorithm?: string;
    identifier?: string;
}

const defaults: Options = {
    algorithm: 'sha256',
    identifier: 'Fizz',
}

function foo(options: Options = defaults) {
    options = { ...defaults, ...options };

    if (!(options.algorithm in someOtherObj)) { // Object is possibly 'undefined'.

    }

    if (Object.prototype.hasOwnProperty.call(someOtherObj, options.algorithm)) {
      /**
        Argument of type 'string | undefined' is not assignable to parameter of type 'PropertyKey'.
          Type 'undefined' is not assignable to type 'PropertyKey'.
      **/
    }

    if (someOtherObj[options.algorithm]) { // Type 'undefined' cannot be used as an index type.
                
    }
}

foo();

Playground link: https://www.typescriptlang.org/play?ssl=27&ssc=7&pln=1&pc=1#code/C4TwDgpgBA8mwEsD2A7AzlAvFA3gKCkKgEMAbAcyQCcFgALAWwH4AuKNYGlcgbgKIQATCCkQAzBBCqt2nBNz4BfPHgDGqDlGFjiAV1LA0bOIg1Zc-QmUo16DNgHI0dYgCYArADYHAGktQhEXFJKkcAMQQAL0jfPGU8MV0UVVMUKDEkJAAKJHhkdGM8s2xtPQM0AEoLIihc1IxsHCgAOlbS-UMfFta6-IxFPn8EMSgsgEIcovRm62paRgC03o0Kqvx-eJrh0ZgAIwArCBTmlzQYAHcUAAUqXKlQZtUyUkn6ruXp2dtGVYsNlS2I1efQA2h80DMKHM7ABdNb+GqIoj-eIZbIVHhAA

typescript

Answer 1

Answer №1

The issue lies in the declaration of the options type as Options. When you assign a new value to this type, it remains as type Options, which can have undefined properties.

The same applies to defaults. It is also of type Options, so the fact that you have assigned strings to its properties does not affect its type. It is still considered to be of type Options because you have explicitly specified it to be so.

In essence, by specifying the type of a variable or constant, you are overriding TypeScript's inferred type.

A different approach would be to model this differently.

Define the Options type to require all properties.

type Options = {
    algorithm: string;
    identifier: string;
}

Now, you can make defaults use this type, ensuring that all properties have values.

const defaults: Options = {
    algorithm: 'sha256',
    identifier: 'Fizz',
}

Then, your function can specify that it only requires a Partial<Options>, meaning that all properties are considered optional. Merge the defaults with the options to ensure that no value could be undefined because one of the merged types does not allow undefined properties.

function foo(options: Partial<Options> = {}) {
    const optionsNotNull = { ...defaults, ...options };
    //...
}

Alternatively, you can use destructuring for a more concise syntax:

function foo(options: Partial<Options> = {}) {
    const { algorithm, identifier } = { ...defaults, ...options };
    //...
}

Playground

Lastly, the statement if (options[options.algorithm]) will not work because Options is not indexable by string. In other words, sha256 is not a property of options, so TypeScript will not allow this. None of the mentioned solutions will change this behavior.

Answer 2

The issue lies in the declaration of the options type as Options. When you assign a new value to this type, it remains as type Options, which can have undefined properties.

The same applies to defaults. It is also of type Options, so the fact that you have assigned strings to its properties does not affect its type. It is still considered to be of type Options because you have explicitly specified it to be so.

In essence, by specifying the type of a variable or constant, you are overriding TypeScript's inferred type.

A different approach would be to model this differently.

Define the Options type to require all properties.

type Options = {
    algorithm: string;
    identifier: string;
}

Now, you can make defaults use this type, ensuring that all properties have values.

const defaults: Options = {
    algorithm: 'sha256',
    identifier: 'Fizz',
}

Then, your function can specify that it only requires a Partial<Options>, meaning that all properties are considered optional. Merge the defaults with the options to ensure that no value could be undefined because one of the merged types does not allow undefined properties.

function foo(options: Partial<Options> = {}) {
    const optionsNotNull = { ...defaults, ...options };
    //...
}

Alternatively, you can use destructuring for a more concise syntax:

function foo(options: Partial<Options> = {}) {
    const { algorithm, identifier } = { ...defaults, ...options };
    //...
}

Playground

Lastly, the statement if (options[options.algorithm]) will not work because Options is not indexable by string. In other words, sha256 is not a property of options, so TypeScript will not allow this. None of the mentioned solutions will change this behavior.

Answer 3

Answer №2

The options parameter in foo is specified as Options, which is defined as containing optional properties, regardless of how the variable is assigned.

However, the foo function assumes that a function exists on the options object itself, which is not explicitly typed. To enhance type safety and designate the options variable as the container for the actual functions, you can implement the following:

type Algorithms = 'sha256';

type Options = {
    algorithm?: Algorithms;
    identifier?: string;
}

type AlgorithmFns = {
    [key: string]: string | Function;
}

const defaults: Required<Options> & AlgorithmFns = {
    algorithm: 'sha256',
    identifier: 'Fizz',
    sha256: () => {}
}

function foo(options?: Options) {
    const opts: Required<Options> & AlgorithmFns = { ...defaults, ...options };

    if (!(opts.algorithm in opts)) {

    }

    if (Object.hasOwnProperty.call(opts, opts.algorithm)) {

    }

    if (typeof opts[opts.algorithm] === 'function') {
                
    }
}

foo();

On the playground

Answer 4

The options parameter in foo is specified as Options, which is defined as containing optional properties, regardless of how the variable is assigned.

However, the foo function assumes that a function exists on the options object itself, which is not explicitly typed. To enhance type safety and designate the options variable as the container for the actual functions, you can implement the following:

type Algorithms = 'sha256';

type Options = {
    algorithm?: Algorithms;
    identifier?: string;
}

type AlgorithmFns = {
    [key: string]: string | Function;
}

const defaults: Required<Options> & AlgorithmFns = {
    algorithm: 'sha256',
    identifier: 'Fizz',
    sha256: () => {}
}

function foo(options?: Options) {
    const opts: Required<Options> & AlgorithmFns = { ...defaults, ...options };

    if (!(opts.algorithm in opts)) {

    }

    if (Object.hasOwnProperty.call(opts, opts.algorithm)) {

    }

    if (typeof opts[opts.algorithm] === 'function') {
                
    }
}

foo();

On the playground

The object may be perceived as being `undefined` despite not actually being so

Answer №1

Answer №2

Similar questions

The tsconfig within the module directory fails to supersede the extended tsconfig properties present in the parent directory

Having troubles with *ngFor in Angular 8? Learn how to use ng-template effectively

Emphasize x-axis heading in a Highcharts graph

Creating an RxJS observable stream from an event emitted by a child element in an Angular 2 component template

Typescript is facing an issue locating the declaration file

NeedValidation.required, Validation.emailCheck

The quantity of elements remains constant in the EventEmitter

Upon refreshing the page, Vuex encounters an issue where it is unable to read

Potential null object in React/TypeScript

Learn the process of typing a property that will be displayed as a dynamic HTML element component

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

Tips for retrieving corresponding values from a TypeScript dictionary object?

I'm interested in learning how to implement dynamic routes in Nexy.js using TypeScript. How can I

Display "No Results Found" in Angular and Ionic 4 when the observable is empty

The NestJs project fails to display the updates when using the "tsc" command before running either "npm run start" or "npm run start:dev"

Adding an object with a composite key to an IndexedDB object store is not permitted as the key already exists within the store. This limitation occurs when attempting to add an entry

Having trouble executing the typescript build task: Command 'C:Program' is not valid as an internal or external command

Creating an observer for a multiple selection dropdown in Aurelia: step by step tutorial

What to do when the 'image' property in Next.js next/image has an implicit 'any' type and needs fixing?

Implementing Global Value Assignment Post Angular Service Subscription