属性“slidesPerView”的类型不兼容

Question

考虑一个带有NGX包装插件的角形6应用程序.

在SwiperComponent模板文件中调用Swiper插件：

<swiper [config]="customConfig">
...
</swiper>

为了保持组件文件的可读性，可以从服务中获取swiper配置：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
...
export class SwiperComponent implements OnInit {
  customConfig: SwiperConfigInterface;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.customConfig = this.dataService.getCustomConfig();
  }

}

以下是服务：

import { Injectable } from '@angular/core';
...
export class DataService {

  constructor() { }

  getCustomConfig() {
    return {
      observer: true,
      direction: 'vertical',
      slidesPerView: 'auto',
      freeMode: true,
      ...
    };
  }

  // Lots of other configs here
  ...

}

这里出现了一个错误：

错误TS2322:键入{.slidesPerView: string；…‘不能指定键入“SwiperConfigInterface”。属性'slidesPerView‘的类型是不兼容的。键入'string‘不能指定键入'number \“auto’‘。

可以以一种残酷的方式省略此错误，只需将customConfig变量的类型从SwiperConfigInterface更改为any。但有谁知道解决这个问题的更好方法吗？

Answer 1

slidesPerView属性SwiperConfigInterface需要一个number类型的值或一个'auto'类型的值

slidesPerView?: number | 'auto',

根据错误消息，类型记录认为'auto'是此对象中的string类型：

return {
  observer: true,
  direction: 'vertical',
  slidesPerView: 'auto',
  freeMode: true,
  ...
};

您可以强制编译器将其视为'auto'类型的值，方法是：

slidesPerView: 'auto' as 'auto',