Type 'undefined' cannot be used as an index type. Partial<Class> undefined?

Question

I searched a lot but couldn't find. My Codes as below.

I created one alertify Service but I get the following error: "Type 'undefined' cannot be used as an index type. Partial<Class> undefined ?"

I don't understand why the code is detecting my index type as 'undefined'.

import { Injectable } from '@angular/core';
declare let alertify: any;

@Injectable({
   providedIn: 'root'
})
export class AlertifyService {

  constructor() { }

  message(message: string, options: Partial<AlertifyOptions>) {
    alertify.set('notifier', 'position', options.position);
    alertify.set('notifier', 'delay', options.delay);
    alertify[options.messageType](message);

  }
}

export class AlertifyOptions {
  messageType: AlertifyMessageType = AlertifyMessageType.Success;
  position: AlertifyPositions = AlertifyPositions.BottomRightCenter;
  delay: number = 3;
  dismissOthers: boolean = false;
}
export enum AlertifyMessageType {
  Success = "success",
  Warning = "warning",
  Message = "message",
  Error = "error",
  Notifier = "notifier"
}

export enum AlertifyPositions {
  TopRight = "top-right",
  TopCenter = "top-center",
  Topleft = "top-left",
  BottomRight = "bottom-right",
  BottomRightCenter = "bottom-center",
  BottomRightBottom = "bottom-right"
}

enter image description here

Answer 1

tl;dr make sure you null check properties from a Partial type before trying to use them

---

When you use the Partial type in TypeScript, you effectively take an existing type and mark each property as optional. An optional type in TypeScript is for most intents and purposes equivalent to the key being capable of being undefined.

For example:

interface SomeObject {
    key1: string;
    key2: number;
}

type PartialSomeObject = Partial<SomeObject>
// equivalent to
interface PartialSomeObject {
    key1?: string;
    key2?: number;
}
// or
interface PartialSomeObject {
    key1: string | undefined;
    key2: number | undefined;
}

Because all keys are optional, in essence that means none of them are mandatory. A completely valid assignment of PartialSomeObject is as follows:

const somePartialObject: PartialSomeObject = {} // all optional keys are missing

---

Back to your example, you have the following:

message(message: string, options: Partial<AlertifyOptions>) {
  alertify.set('notifier', 'position', options.position);
  alertify.set('notifier', 'delay', options.delay);
  alertify[options.messageType](message);
}

In this case you are passing in your options property as Partial<AlertifyOptions> which means (as stated above) that this value of options may not contain any of the keys which you are using within the block. So in order for TypeScript to allow you to use any options information downstream, you need to prove that the key you are interested is actually present

As you are trying to use options.messageType as an index on the alertify class/object, TypeScript is saying that if this value were to be undefined, it would not be possible to be used as an index. i.e. alertify[undefined] is invalid syntax.

You need to make sure that options.messageType is not undefined before using it. This can be achieved by simply null checking:

message(message: string, options: Partial<AlertifyOptions>) {
  // ...
  if (options.messageType) {
    alertify[options.messageType](message);
  }
}

// or one-liner
message(message: string, options: Partial<AlertifyOptions>) {
  // ...
  options.messageType && alertify[options.messageType](message);
}

Note: I am assuming that the type of options.messageType is a union of possible keys on the alertify class/object. If this is not the case, the operation would be invalid with or without the null check above

Answer 2

I solved this problem by replacing
Partial<AlertifyOptions> to Required<AlertifyOptions>. Thanks For your attantions..