reduce 타입을 만들다가 질문이 생겼습니다.

reduce 타입을 만들면서 initialValue는 옵션값이기때문에 값을 ?: 를 이용해서 만들었습니다.

그래서 있을때 없을때 모두 제대로 타입추론을 하는 것을 확인하였습니다.

interface Arr<T> {
  reduce(callBackFn: (a: T, b: T) => T, init?: T): T;
  reduce<S>(callBackFn: (a: S, b: T) => S, init?: S): S;
}

const a: Arr<number> = [1, 2, 4, 5, 3];

const myReduce1 = a.reduce((a, b) => (a += b)); // 15
const myReduce2 = a.reduce((a, b) => (a += b), 10); // 25

const b: Arr<number | string> = [1, 2, "4", "5", 3];
const myReduce3 = b.reduce<number>((a, b) => {
  return typeof b === "number" ? (a += b) : a;
}); // 6
const myReduce4 = b.reduce<number>((a, b) => {
  return typeof b === "number" ? (a += b) : a;
}, 10); // 16

빌트인 reduce로 검사를 해보았는데 빌트인 reduce에서는 accumulator의 타입이 다른 경우 reduce 오버로딩되면서 init이 꼭 있어야 하는 타입으로 이해 했습니다.

  //   정답
  // reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T): T;
  // reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: readonly T[]) => T, initialValue: T): T;
  // reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: readonly T[]) => U, initialValue: U): U;


const c = [1, 2, "4", "5", 3];

const solReduce1 = c.reduce<number>((a, b, idx, arr) => {
  return typeof b === "number" ? (a += b) : a;
}, 10); // 16


// error
const solReduce2 = c.reduce<number>((a, b, idx, arr) => {
  return typeof b === "number" ? (a += b) : a;
}); // 6

하지만 JS에서는 accumulator타입이 달라도 초기값없이 정상 작동하는 반면 TS에서는 초기값을 꼭 있어야 하는것인지 제가 잘못 이해하고 있는것인지 궁금해서 질문 남깁니다.

error msg : TS2554: Expected 2 arguments, but got 1. lib.es5.d.ts(1480, 103): An argument for 'initialValue' was not provided.

질문 정리

1. 제가 작성한 reduce 타입이 올바르게 작성된 것인지

2. TS에서는 빌트인 reduce를 사용할 떄 accumulator타입이 다를경우 init 값 없이 사용할 수 있는지

입니다.

감사합니다.

const solReduce2 = c.reduce((a, b, idx, arr) => {
  if (typeof a !== 'number') {
    return parseInt(a);
  }
  return typeof b === "number" ? (a += b) : a;
}); // 6