[Vue3] property 'reduce' does not exist on type ~ 해결방법

문제상황

fetch 받아온 배열을 reduce 돌고 싶은데, reduce에 밑줄이 생기며 에러가 뜬다. reduce 뿐만 아니라 this.charData[0]와 같이 인덱스에 접근하는 곳에도 모두 타입에러가 떴다. 아마 map을 돌았어도 에러가 떴을 것이다.

  computed: {
    isChartDataEmpty(): boolean {
      return (
        this.chartData.reduce((acc: number, cur: any) => acc + cur.y, 0) === 0
      );
    },
  },

Property 'reduce' does not exist on type '(state: DashboardStateI) => ChartDataI[] | undefined'.

 

해결방안

chartData가 undefined일 경우도 있기 때문에 발생하는 타입에러다. 따라서 해당 컴포넌트가 렌더링되는 조건을 부모 컴포넌트에 v-if 으로 정해주고, setup에서 chartData가 undefined일 경우 빈 array가 되도록 만들어준다.

 

수정 전

// SampleChart.vue
  setup() {
    const chartData = computed(
      () => store.getters['dashboardStore/chartData']
    ) as unknown as ChartDataType;
    ...

 

수정 후

<!-- Dashboard.vue -->
      <div>
        <SampleChart v-if="chartData" />
      </div>

// SampleChart.vue
  setup() {
    const chartData =
      computed(
        (): ChartItemI[] =>
          store.getters['dashboardStore/chartData']
      ) ?? [];
    ...

 

결과

클린하게 해결 완.

참고문서: 타입스크립트 공홈 https://www.typescriptlang.org/ko/docs/handbook/2/everyday-types.html

Documentation - Everyday Types