Search

undefined value 처리법

대분류
언어
소분류
TypeScript
유형
IF
OR
AS
주요 레퍼런스
https://blog.toycrane.xyz/typescript%EC%97%90%EC%84%9C-undefined-value-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0-181035b5ee47
최종 편집 일시
2024/10/30 02:16
생성 일시
2024/02/08 00:56
14 more properties

Method #1: IF 구문 활용하기

설명

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

예시

변수 token이 falsy한 값인지 혹은 truthy한 값인지를 체크하는 코드
if (token) { validateToken(token); }
Plain Text
복사
되도록이면 아래와 같이 typeof keyword를 활용하여 정확한 javascript의 value type을 확인 하는 것을 추천합니다.
if (typeof token === 'string'){ validateToken(token); }
Plain Text
복사

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

설명

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

예시

token의 값이 undefined이면 "default-token" 문자열이 대체 값으로 사용 될 것입니다.
validateToken(token || 'default-token');
Plain Text
복사

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

설명

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

예시

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

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

설명

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

예시

변수를 쓰고 나서, 변수 뒤에 !를 붙이는 방법
validateToken(token!);
Plain Text
복사

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

설명

💡
이 방법은 OR 연산자를 사용하는 2번 방법과 유사 2번 방식과 유일하게 다른 점은 OR 연산자는 falsy value를 체크한다는 것
falsy value에는 false, undefined, null, 0, NaN, []
반면에 Nullish coalescing operator (??) 연산자는 오직 undefined와 null만 체크

예시

validateToken(token ?? 'default-token');
Plain Text
복사