본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


TypeScript

Typescript 유니언(Union)

야근없는 행복한 삶을 위해 ~
by 마샤와 곰 2019. 4. 26.

 

 

자료형을 선언하는 경우 n개의 형식을 갖기 위해서는 union을 사용하면된다.

var val:string|number|boolean; //union타입 선언, 파이프(|)를 통해 이어나갈 수 있다.
val = 1004; 
console.log(val, typeof val);
val = "text"; 
console.log(val, typeof val);
val = true;
console.log(val, typeof val);

만약 선언된 자료형에 다른값이 대입되면 컴파일 오류가 난다.

var val:string|number; //자료형은 숫자, 문자
val = 1004; 
console.log(val, typeof val);
val = "text"; 
console.log(val, typeof val);
val = true;  //boolean 선언, 컴파일 오류
console.log(val, typeof val);

컴파일 오류모습

이러한 유니언 타입은 함수에서도 사용 가능하다.

function unionParamMethod(text:string|string[]) { //union 타입 파라미터
   if(typeof text == "string") { 
      console.log(text); 
   } else { 
	for(let i in text){
	    console.log(text[i]);
	}
   } 
} 

unionParamMethod("single"); ;
unionParamMethod(['a','b','c','d','e']);

자바스크립트의 장점이자 단점은 자료형태를 "var 변수 = 데이터" 형식으로 전부 받을 수 있다는 점이다.

이러한 점은 나중에 어떠한 계산식이나 함수에서 문자가 와야할 곳에 숫자가 온다던지, 숫자가 와야할 곳에 문자가 온다던지 등의 오류를 발생하게 된다.

이에 타입스크립트에서는 이러한 오류를 대비하고자 여러 자료형과 union타입을 제공하여 조금 더 엄격하게 구성하여 놓았다.

반응형

'TypeScript' 카테고리의 다른 글

Typescript 클래스  (5) 2019.04.26
Typescript 인터페이스  (0) 2019.04.26
Typescript 배열  (0) 2019.04.26
Typescript 함수  (0) 2019.04.26
Typescript 자료형  (0) 2019.04.25
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)

댓글