TypeScript possibly undefined value 해결 하는 법(+번역)

원본글 : https://linguinecode.com/post/how-to-solve-typescript-possibly-undefined-value

object에 접근해서 아마 아래 에러를 보셨을 겁니다

//console.
Object is possibly 'undefined'.

또는 당신은 변수 하나를 함수내에서 전달하길 원합니다.

function validateToken(token: string){
	return token;
}

const token = 'kjadj' as string | undefined;

validateToken(token);

결국 아래와 같은 타입스크립트 에러메시지가 뜹니다

// console
Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.

이 오류가 일어나는 이유는 타입스크립트는 구체적인 value type을 예상하는데, 당신이 부정확한 value type을 제공하기 때문입니다.
여기 기사에서, 이 상황을 해결할 수 있는 5까지 다른 방법들을 보여드릴게요.

방법 1. IF 조건문 사용하기

if(token){
	validateToken(token);
}

이 케이스는 그 변수 token이 falsy 하거나 truthy 한 value이면 체킹 합니다.
우리는 token 을 아마 string value 또는 undefined 으로 말했기 때문에 이것은 작동합니다.
전 당신이 약간 구체적으로 체크했으면 합니다. 올바른 JS value type을 확실히 하기 위해 typeof 를 사용하세요

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

방법 2. OR 논리 연산자 사용하기

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

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

만약 token이 validateToken()을 충족시키지 않는다면, 대체값을 전달합니다. 위의 예에서
만약 토큰 value가 undefined이라면 "default-token" 이 대체값으로 전달 됩니다.

방법 3. keyword as 사용하기

keyword as는 타입스크립트가 당신이 어떠한 자료형이 들어올지 안다는 것을 인식시켜 줍니다.
예를 들면,

validateToken(token as string);

위의 예에서, 전 token을 던졌고, 그 앱의 이 시점에서 변수가 아마 undefined 일지라도, 그것은 String이 될 것이라고 타입스크립트에게 알려 줍니다. 그래서 우려할게 없어요.

방법 4. non-null assertion 연산자 ! 사용하기

한개의 변수가 사용된 후, 당신은 느낌표 !를 그 변수 뒤에 사용할수 있습니다.

validateToken(token!);

3번째 방법과 유사합니다. 때때로 타입스크립트 컴파일러는 어느 시점에서 확실한 자료형인지 결정할수 없습니다.

느낌표를 마지막에 추가함으로써, 방법이 없는 타입스크립트 컴파일러에게 이 변수가 undefined이나 null 일 것이라는 걸 알려줍니다.

방법 5. nullish coalescing 연산자 ?? 사용하기

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

이 방법은 방법2. 의 OR 논리 연산자와 아주 유사합니다. (||)
차이점은 OR 연산자는 falsy value들을 체크한다는 점입니다.
Falsy value 들이란 false,undefined,null, 0, NaN 과 빈 값입니다.
반면, Nullish coalescing operator ?? 는 오직 undefined 와 null 만 체크합니다.