undefined value 처리법

Method #1: IF 구문 활용하기

설명

💡 이 코드는 에러 없이 정상적으로 작동하는데 이유는 우리가 최초에 token 변수는 string type 또는 undeifined이        될 수 있다고 선언을 해두었기 때문
      (if문을 통해서 타입 추론이 이루어 졌고, 이에 따라서 token은 undefined을 제외한 string으로 추론이 된 것)

예시

• 변수 token이 falsy한 값인지 혹은 truthy한 값인지를 체크하는 코드

if (token) {
    validateToken(token);
}

• 되도록이면 아래와 같이 typeof keyword를 활용하여 정확한 javascript의 value type을 확인 하는 것을 추천합니다.

if (typeof token === 'string'){
    validateToken(token);
}

타입 추론에 대한 개념 정리 (https://joshua1988.github.io/ts/guide/type-inference.html#타입-추론-type-inference)

Method #2: 논리 연산자 OR 활용하기

설명

💡 token이 validateToken() 함수의 매개변수 타입에 맞지 않을 때, 대체 값을 전달해 주는 방식

 

예시

token의 값이 undefined이면 "default-token" 문자열이 대체 값으로 사용 될 것입니다.

validateToken(token || 'default-token');

Method #3: as 키워드 사용하기

설명

💡 as는 어떤 경우가 되었던 간에 값의 type을 강제 지정

 

예시

validateToken(token as string)

위의 예시에서 저는 token을 매개변수로 건내주었고, TypeScript에게 token 변수가 undefined 일지라도 token은 문자열이 될 것임을 강제로 알려주었습니다. 이러한 이유로 undefined를 변수로 넘기는 것에 대한 문제를 해결할 수 있습니다.

Method #4: non-null assertion 연산자 ! 사용하기

설명

💡 이 방법은 3번 방법과 유사 typescript 컴파일러는 특정 순간에 변수의 value의 타입을 결정할 수 없을 때가              있는데 끝에 느낌표를 붙임으로써 Typescript 컴파일러에게 변수는 undefined 또는 null이 될 수 없음을 강제로        알림

예시

변수를 쓰고 나서, 변수 뒤에 !를 붙이는 방법

validateToken(token!);

Method #5: 널 병합 연산자 ?? 사용하기

설명

💡 이 방법은 OR 연산자를 사용하는 2번 방법과 유사 2번 방식과 유일하게 다른 점은 OR 연산자는 falsy value를        체크한다는 것

• falsy value에는 false, undefined, null, 0, NaN, []
• 반면에 Nullish coalescing operator (??) 연산자는 오직 undefined와 null만 체크

예시

validateToken(token ?? 'default-token');