My Boundary As Much As I Experienced

TIL: 타입스크립트 is란 무엇인가? / 객체 타입 단언 시 특정 속성만 단언해도 된다? 본문

FrontEnd/TypeScript

TIL: 타입스크립트 is란 무엇인가? / 객체 타입 단언 시 특정 속성만 단언해도 된다?

Bumang 2024. 5. 19. 22:38

타입스크립트 is란 무엇인가? 

API를 짜면서 try-catch문으로 에러처리를 할때 catch(error) { ... } 에서 error의 타입은 보통 unknown이다.

이럴 땐 unknown 타입인 error객체에 제대로 된 타입을 찾아줘야한다.

그런데 이런 상황에서 isAxiosError라는 함수를 만들어 타입 검사를 하는 예시 하나를 발견했다.

import axios, { AxiosError } from 'axios';
import { Alert } from 'react-native';

// 타입 가드 함수
function isAxiosError(error: any): error is AxiosError {
  return error.isAxiosError === true;
}

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    if (isAxiosError(error)) {
      if (error.response) {
        Alert.alert("알림", error.response.data.message);
      }
    } else {
      console.error("Unexpected error:", error);
    }
  }
}

 

위 isAxiosError함수를 보면서 신기한 문법 하나를 찾았다.

function isAxiosError(error: any): error is AxiosError { ... }

와우 error is AxiosError가 반환값이다. 신기하다.

 

- error is AxiosError를 반환한다는게 무슨 소리지?

- error가 AxiosError이며 true를 반환하나?

- error 자체를 반환하나?

등등의 궁금증이 있어서 찾아보았다.

 

아래 예시도 비슷한 타입검사 유틸함수인데 return값이 typeof 체크문이다.

function isString(test: any): test is string{
    return typeof test === "string";
}

 

 

여기서 반환값에 test is string는 이 함수가 true를 반환할 경우

입력 매개변수 error가 AxiosError 타입임을 컴파일러에게 알리는 역할을 한다.

이렇듯 'A is B'를 반환값으로 같는 함수는 '패러미터(A)의 타입이 B인가?'를 체크한다고 보면 된다.

 

그리고 맞다면, A의 타입은 B로 확정나게 되고

아니라면, A의 기존 타입 그대로 유지된다. (만약 unknown이었다면 계속 unknown.)

 

타입 단언 시 특정 속성만 단언해도 된다?

아래 코드를 보고 또 의문점이 들었다.

"궁금한게, message말고도 다른 속성들도 errorResponse에 있을텐데 message만 써줘도 괜찮은건가?"

라는 생각이 들어서 찾아봤다.

 

try {
  // 요청 코드
} catch (error) {
  const errorResponse = (error as AxiosError).response;
  if (errorResponse) {
    const errorMessage = (errorResponse.data as { message: string }).message;
    Alert.alert("알림", errorMessage);
  }
}

 

그 결과, "원하는 속성만 명시해도 전혀 상관없다."는 것을 알 수 있다.

지피티 왈:

  1. 특정 속성만 명시: 만약 message 속성만 필요하고 다른 속성들은 무시해도 되는 경우, message 속성만 포함하는 타입을 정의해도 됩니다. 이 경우 다른 속성들은 무시되지만, 필요한 속성은 안전하게 사용할 수 있습니다.
  2. 전체 오류 응답 타입 정의: 여러 속성을 사용할 가능성이 있다면, 전체 오류 응답 타입을 정의하는 것이 더 바람직합니다.