typescript에서 undefined value 처리하기

5 min readJul 2, 2021

Typescript로 개발 하다보면, type이 맞지 않아 컴파일 에러가 자주 발생하곤 합니다. 그래서 여러 글들을 찾아보던 중 괜찮은 글이 있어서 번역을 해보았습니다. 번역이 매끄럽지 않더라도, 많은 이해 부탁드립니다. 잘못된 내용은 언제든 댓글로 알려주세요.

원글: How to solve TypeScript possibly undefined value

객체의 프라퍼티에 접근하다 보면, 아래와 같은 메시지를 본 적이 있을 겁니다.

TS2532: Object is possibly 'undefined'.

또는 변수를 함수에 넘기고자 할 때

function validateToken(token: string) {   
    return token; 
}  const token = 'kjadj' as string | undefined;  validateToken(token);

아래와 같은 Typescript 에러 메시지가 발생한 적이 있지 않나요?

TS2322: Type 'string | undefined' is not assignable to type 'string'.  Type 'undefined' is not assignable to type 'string'.

이러한 에러가 발생하는 이유는 typescript가 예상하고 있는 특정한 type이 아닌, 다른 type을 넘겨줬을 때 발생하게 됩니다. 만약에 javascript의 value type에 대해 잘 모른다면 아래의 아티클을 참고해 주세요. “JavaScript data types: Intro“

이 번 글에서는 5가지 형태로 이 상황들을 다루는 방법에 대해서 알아볼 예정입니다.

Method #1: IF 구문 활용하기

if (token) {   
    validateToken(token); 
}

위 예시는 변수 token이 falsy한 값인지 혹은 truthy한 값인지를 체크하는 코드입니다.

이 코드는 에러 없이 정상적으로 작동하는데 이유는 우리가 최초에 token 변수는 string type 또는 undeifined이 될 수 있다고 선언을 해두었기 때문입니다.

(if문을 통해서 타입 추론이 이루어 졌고, 이에 따라서 token은 undefined을 제외한 string으로 추론이 된 것입니다. 번역하면서 내용이 부족한 것 같아 추가합니다.)

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

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

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

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

또 다른 방법은 OR 연산자를 사용하는 방법입니다.

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

token이 validateToken() 함수의 매개변수 타입에 맞지 않을 때, 대체 값을 전달해 주는 방식입니다. 위의 예시에서는 token의 값이 undefined이면 "default-token" 문자열이 대체 값으로 사용 될 것입니다.

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

키워드 as는 어떤 경우가 되었던 간에 값의 type을 강제로 지정하여 typescript에 알려줄 때 사용됩니다.

여기 예시가 있습니다.

validateToken(token as string)

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

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

변수를 쓰고 나서, 변수 뒤에 !를 붙이는 방법이 있습니다.

validateToken(token!);

이 방법은 3번 방법과 비슷합니다. typescript 컴파일러는 특정 순간에 변수의 value의 타입을 결정할 수 없을 때가 있습니다. 끝에 느낌표를 붙임으로써 Typescript 컴파일러에게 변수는 undefined 또는 null이 될 수 없음을 강제로 알릴 수 있습니다.

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

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

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

falsy value에는 false, undefined, null, 0, NaN, []가 있습니다. 반면에 Nullish coalescing operator (??) 연산자는 오직 undefined와 null만 체크합니다.