null/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을 넘겨줬을 때 발생하게 된다.

 

 

해결법1: if 구문 활용하기

if (token) {   
    validateToken(token); 
}

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

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

(if문을 통해서 타입 추론이 이루어 졌고, 이에 따라서 token은 undefined을 제외한 string으로 추론이 된 것.

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

 

해결법2: 논리 연산자 OR 활용하기

OR 연산자를 사용하는 방법.

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

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

위의 예시에서는 token의 값이 undefined이면 "default-token" 문자열이 대체 값으로 사용 될 것이다.

 

 

해결법3: as 키워드 사용하기

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

validateToken(token as string)

위의 예시에서 저는 token을 매개변수로 건내주었고, 

TypeScript에게 token 변수가 undefined 일지라도 token은 문자열이 될 것임을 강제로 알려주었다.

 

 

해결법4: non-null assertion 연산자 ! 사용하기

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

validateToken(token!);

이 방법은 3번 방법과 비슷하며 끝에 느낌표를 붙임으로써 Typescript 컴파일러에게 변수는 undefined 또는 null이 될 수 없음을 강제로 알린다.

 

 

해결법5: 널 병합 연산자 ?? 사용하기

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

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

falsy value에는 false, undefined, null, 0, NaN, []가 있으나

Nullish coalescing operator (??) 연산자는 오직 undefined와 null만 체크한다.