1

Работаю по необходимости в версиях node v14.17.0, npm 6.14.13
Пытаюсь в работе использовать методы includes, map, push. Все приводит к ошибке
Property 'includes' does not exist on type 'IprivilegeDatа' При этом советы по изменению lib и target в tsconfig ни к чему не приводят:

{
  "compilerOptions": {
    "target": "es2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es2017",
      "es7"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Мой package.json

{
  "name": "rv-privilege",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.68",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.6",
    "node-sass": "6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.41.0",
    "@typescript-eslint/parser": "^5.41.0",
    "eslint": "^8.26.0",
    "eslint-plugin-react": "^7.31.10"
  }
}

Описание IprivilegeDate

interface Idocument {
  nameDoc?: string,
  url?: string
}
interface Icontacts {
  fio?: string,
  number?: string,
  email?: string
}

interface IprivilegeDatа {
  key?: string
  id: string,
  name: string,
  description: string,
  dateStop: string,
  category: string,
  term: string,
  img: string,
  docs: Idocument[],
  contacts?: Icontacts[],
  turnOn: boolean
}

export default IprivilegeDatа;  

Сама ошибка возникает при попытке прогнать массив через редьюс:

import { useEffect, useState } from "react";
import cardData from "../../data/cards";
import FilterButton from "../FilterButton/FilterButton";
import IprivilegeDatа from "../../interfaces/models";

interface FilterBarProps {
  filterValue(e: string): void
}

const FilterBar = ({filterValue}: FilterBarProps) => {

  const uniqFiltersArr = cardData.reduce((acc, elem) => {
    const result = acc.includes(elem.category) || acc.push(elem.category);
    return result;
  });


  const [activeElement, setActiveElement] = useState(uniqFiltersArr[0]);

  useEffect(() => {
    filterValue(activeElement);
  },[activeElement]);


  const handleClick = (id: string) => {
    if (activeElement !== id) {
      setActiveElement(id);
    }
  };

  return (
    <div className='filter-bar'>
      <ul className='filter-bar__list'>
        {uniqFiltersArr.map((item) => {
          return <FilterButton
            key={item}
            id={item}
            activeElement={activeElement}
            handleClick={handleClick}
          />;
        })}
      </ul>
    </div>
  );
};

export default FilterBar;
5
  • Покажите, как вы описываете тип IprivilegeDatа и как пытаетесь обратиться к переменной с данным типом
    – SwaD
    31 окт 2022 в 7:42
  • Добавил. Подчеркивается именно includes и push. Т.е. то, что не является методами интерфейса. Это же методы массива JS и я ожидал поведения, что описание для данных методов не требуется. Я новичок в ts, так что если вы поясните, почему такое поведение сейчас - буду очень благодарен!
    – elarri
    31 окт 2022 в 8:00
  • @elarri, проблема в том, что у тебя не массив
    – Grundy
    31 окт 2022 в 9:01
  • Можете пояснить? Я когда навожу на cardData в cardData.reduce(()=>{}) я вижу следующую подсказку vsCode: (alias) const cardData: IprivilegeDatа[] import cardData.
    – elarri
    31 окт 2022 в 9:09
  • @elarri, да, но подчеркивают тебе не cardData, а acc - наведи на него
    – Grundy
    31 окт 2022 в 9:10

2 ответа 2

1

Ваша переменная cardData должна иметь тип IprivilegeDatа[]

const cardData: IprivilegeDatа[] = [{
    ...IprivilegeDatаType
  }, {
    ...IprivilegeDatаType
  }];

Так же надо указать в методе reduce тип acc(аккумулятора значений) acc: string[]
И метод reduce должен возвращать значение аккумулятора.

  const uniqFiltersArr = cardData.reduce((acc: string[], elem) => {
    if (!acc.includes(elem.category)) acc.push(elem.category);
    return acc; // Возвращаем значение
  }, []);
4
  • условие неправильное в uniqFiltersArr
    – Grundy
    31 окт 2022 в 8:58
  • Точно! Поправил
    – SwaD
    31 окт 2022 в 9:00
  • const data: IprivilegeDatа[] = [{}] я делаю непосредственно во временном файле, который симулирует данные. Прописал acc: string[]. Теперь ошибка стала Argument of type '(acc: string[], elem: IprivilegeDatа) => string[]' is not assignable to parameter of type '(previousValue: IprivilegeDatа, currentValue: IprivilegeDatа, currentIndex: number, array: IprivilegeDatа[]) => IprivilegeDatа'. Types of parameters 'acc' and 'previousValue' are incompatible. Type 'IprivilegeDatа' is missing the following properties from type 'string[]': length, pop, push, concat, and 29 more.ts(2345)
    – elarri
    31 окт 2022 в 9:33
  • @elarri Подозреваю, что вы не заменили переменную в return внутри reduce, как указано в ответе
    – SwaD
    31 окт 2022 в 9:40
1

метод reduce принимает два параметра.

Если второй параметр отсутствует, его значением считается первый элемент массива.

В примере в вопросе, второй параметр отсутствует, таким образом тип переменной acc - просто IprivilegeDatа, у которой нет методом массива.

Для исправления достаточно добавить второй параметр у reduce, и указать тип

например:

cardData.reduce<IprivilegeDatа[]>((acc, elem) => {
    ...
}, []); // устанавливаем начальное значение

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.