打字稿：具有“n”次具有動態名稱的屬性

Question

我有一個課程，我想對其進行類型檢查
這是它的代碼：

class FlightFilter implements Filter {
  get filters() {
    return {
      departTime: { name: 'زمان رفت', type: FilterTypes.Range },
      price: { name: 'بازه قیمتی', type: FilterTypes.Range },
      flightType: { name: 'نوع پرواز', type: FilterTypes.CheckboxList },
      flightClass: { name: 'کلاس پروازی', type: FilterTypes.CheckboxList },
      airline: { name: 'شرکت هواپیمایی', type: FilterTypes.CheckboxList },
      airports: { name: 'فرودگاه ها', type: FilterTypes.CheckboxList }
    };
  }

  fillData() {
    for (const filter of this.filters) {
      console.log(filter);
    }
  }

  departTime(ticket) {
    return true;
  }

  departTimeDataGenerator() {}

  departTimeModel = null;

  price(ticket) {
    return true;
  }

  priceDataGenerator() {}

  priceModel = null;

  flightType(ticket) {
    return true;
  }

  flightTypeDataGenerator() {}

  flightTypeModel = null;

  flightClass(ticket) {
    return true;
  }

  flightClassDataGenerator() {}

  flightClassModel = null;

  airline(ticket) {
    return true;
  }

  airlineDataGenerator() {}

  airlineModel = null;

  airports(ticket) {
    return true;
  }

  airportsDataGenerator() {}

  airportsModel = null;
}

我試圖為它制作一個接口，但我不知道如何讓一個具有動態名稱的屬性“n”次
像這樣：

interface Filter {
    filters(): Object;
    fillData(): void;

    // Here is the part that i want multiple of
    [name: String](ticket: Object): Boolean;
    [name: String]DataGenerator(): void;
    [name: String]Model: any
}

請記住，我有來自我的 javascript 項目的上述代碼，我想切換到打字稿

Answer 1

感謝打字稿不和諧社區中的“BobobUnicorn”，我現在有了答案
這太棒了！

type Filter<T extends { filters: unknown }> = {
  filters: T['filters'];
  fillData(): void;
} & {
    [K in keyof T['filters']]: (ticket: unknown) => boolean;
  } & {
    [K in keyof T['filters']as `${K & string}DataGenerator`]: () => void;
  } & {
    [K in keyof T['filters']as `${K & string}Model`]: any;
  }

enum FilterTypes {
  Range = 1,
  CheckboxList = 2
}

class FlightFilter implements Filter<FlightFilter> {
  get filters() {
    return {
      departTime: { name: 'زمان رفت', type: FilterTypes.Range },
      price: { name: 'بازه قیمتی', type: FilterTypes.Range },
      flightType: { name: 'نوع پرواز', type: FilterTypes.CheckboxList },
      flightClass: { name: 'کلاس پروازی', type: FilterTypes.CheckboxList },
      airline: { name: 'شرکت هواپیمایی', type: FilterTypes.CheckboxList },
    };
  }

  fillData() {
    // for (const filter of this.filters) {
    //   console.log(filter);
    // }
  }

  departTime(ticket: any) {
    return true;
  }

  departTimeDataGenerator() { }

  departTimeModel = null;

  price(ticket: any) {
    return true;
  }

  priceDataGenerator() { }

  priceModel = null;

  flightType(ticket: any) {
    return true;
  }

  flightTypeDataGenerator() { }

  flightTypeModel = null;

  flightClass(ticket: any) {
    return true;
  }

  flightClassDataGenerator() { }

  flightClassModel = null;

  airline(ticket: any) {
    return true;
  }

  airlineDataGenerator() { }

  airlineModel = null;

}