How can I use this javascript function by accessing it in an Angular event?

Question

In my .ts file inside the class itself, I set this class with different properties, like slides in the virtual object.

Question - I want to access and add more slides in my .ts file in both the ngOnInit and in some event, but I can't seem to figure out how to do it.

When I try and access

    this.memberSwiperConfig.virtual.slides

slides doesn't exist. So I get a red underline. I tried making it nullable but that didn't work.

    memberSwiperConfig: SwiperConfigInterface = {
      virtual: {
        slides: (function() {
          const slides = [];
          for (let i = 0; i < 600; i += 1) {
            slides.push(
              '<img src="https://picsum.photos/600/600/?image=' +
              (i + 1) +
              '"/><p>' +
              (i + 1) +
              "</p>"
            );
          }
          return slides;
        })()
      },
      preloadImages: false,
      lazy: true,
      slidesPerView: 1,
      spaceBetween: 10,
      watchOverflow: true,
      navigation: true,
      grabCursor: true,
      breakpoints: {
        568: {
          slidesPerView: 2,
          spaceBetween: 10,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 10,
        },
        1024: {
          slidesPerView: 2,
          spaceBetween: 10,
        }
      }
    }