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으로 추론이 된 것입니다. 번역하면서 내용이 부족한 것 같아 추가합니다.)
되도록이면 아래와 같이 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만 체크합니다.
