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) => {
    ...
}, []); // устанавливаем начальное значение

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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