같은 종류의 함수는 반환 타입 통일하기 | Frontend Fundamentals

[giscus[bot]]

같은 종류의 함수는 반환 타입 통일하기 | Frontend Fundamentals

변경하기 쉬운 프론트엔드 코드를 위한 지침서

https://frontend-fundamentals.com/code/examples/use-user.html

[student513]

코드 예시 2: checkIsValid에서는 함수의 반환타입을 타입스크립트로 정의해서 사용한다면 일관적인 반환타입을 보장하는 의도에 더 부합하는 코드가 될 것 같습니다

type ValidationCheckReturnType = {
  ok: boolean;
  reason?: string
}

function checkIsAgeValid(age: number): ValidationCheckReturnType {
  ...
}

[KNHui]

더불어서 다음과 같이 reason이 존재하는 상황을 한정 지어 주면, ok의 값에 따라 reason의 존재 유무를 결정할 수 있습니다:

type ValidationCheckReturnType = {
  ok: true;
} | {
  ok: false;
  reason: string
};

이제 컴파일러를 통해 불필요한 접근을 예방할 수 있습니다:

const isAgeValid: ValidationCheckReturnType = checkIsAgeValid(1);

if (isAgeValid.ok) {
  isAgeValid.reason; // Error: Property 'reason' does not exist on type '{ ok: true; }'.
} else {
  isAgeValid.reason;
}

[milooy]

Discriminated Union 예시 좋네요! 👍

@KNHui 원본 문서에 TIP 으로 추가해주시면 어떨까요?
Custom container 형태로 넣어주시면 좋을 것 같아요.

::: tip
내용
:::

[KNHui]

@milooy 오 기여도 할 수 있군요. 오늘 중으로 추가하겠습니다. 💪

[KNHui]

@milooy #149 로 PR 생성했습니다.

[teawon]

유효성 검사 함수와 같이 동일한 맥락의 로직에서 반환 타입을 일관되게 관리한다는 측면에서
클래스를 사용하는 것도 괜찮은 접근 방식이 될 수 있을 것 같습니다!

type ValidationCheckReturnType = { ok: true } | { ok: false; reason: string };

abstract class Validator {
  abstract validate(value: unknown): ValidationCheckReturnType;

  protected success(): ValidationCheckReturnType {
    return { ok: true };
  }

  protected failure(reason: string): ValidationCheckReturnType {
    return { ok: false, reason };
  }
}

class AgeValidator extends Validator {
  validate(age: number): ValidationCheckReturnType {
    if (!Number.isInteger(age)) {
      return this.failure("나이는 정수여야 해요.");
    }

    if (age < 18) {
      return this.failure("나이는 18세 이상이어야 해요.");
    }

    if (age > 99) {
      return this.failure("나이는 99세 이하이어야 해요.");
    }

    return this.success();
  }
}

특히 필드값 변경에 조금 더 유연하게 대처할 수 있는 장점이 있을 것 같아요