TypeScript/기초

타입스크립트[기초] 타입 가드(Type guard )

뿌비 2022. 5. 22. 22:26
728x90

타입 가드란? 

typeof 말고도 여러 방법의 타입 가드가 있다 사이트 참고 하기 
[참고]  https://radlohead.gitbook.io/typescript-deep-dive/type-system/typeguard
[참고] https://www.typescriptlang.org/docs/handbook/advanced-types.html

  • 유니언 타입을 사용하면 하나의 변수에 다양한 타입을 지정할 수 있지만 그 타입들 중 어느 타입을 사용할지 확실히 정해줘야 할 때가 있다. 이때 해당 코드의 타입에 대한 확신과 검증을 하는 역할을 타입 가드라고 한다.
  • Type guard를 사용하면 조건문에서 객체의 타입을 좁혀나갈 수 있다.

// 오류가 나는 코드
type strOrNum = string | number; 
let pri = number;

const setTotal=(val:strOrNum):void => {
	pri = val;
};
setTotal(10);

 오류가 나게 되는 이유 

위 코드를 보면 val 매개변수는 string 타입과 number 타입을 둘 다 가질 수 있고 pri 변수는 number 타입만 가질 수 있다 

setTotal 함수를 실행하면서 10을 매개 인자로 넣어주는데 이때 pri 변수에서 타입 에러가 발생하게 된다 

이유는 var 매개변수가 string 이 될 수도 있고 number가 될 수도 있기 때문에 number 타입만 가질 수 있는 pri 변수에서 타입 에러가 나타나게 된다 


typeof Operator를 사용한 해결 방법 

  • typeof Operator와 조건문을 사용한다  ☆ typeof Operator 란? 변수의 데이터 타입을 반환하는 연산자이다 
// 수정된 코드
type strOrNum = string | number; 
let pri = number;

const setTotal=(val:strOrNum):void => {
	if(typeof val === 'string'){
		pri = 0;
    }else{
    	pri = val;
    }
};
setTotal(10);

 

728x90