let a: number = 10;
let b: string = 'hi';
b=a; //에러 발생. 호환되지 않음
Q. 이 코드에서 에러가 발생하는데 그 이유는?
A.a는 number 타입으로 선언되어 숫자 값인 10을 가지고 있는데, b는 string 타입으로 선언되어 문자값인 'hi'를 가지고 있다.
즉,a변수와 b변수의 타입이 다르기 때문에 발생하는 에러이다.
자바스크립트의 OR 연산자(||)와 같이 'A' 이거나 'B'이다 라는 의미의 하나 이상의 타입이 될 수 있는 값을 표현함.
타입호환성 관점에서보면, 유니온 타입은 가각가의 타입 중 하나라도 맞으면 호환될 수 있음.
function logText(text: string | number) {
// ...
}
Q. 유니온 타입을 사용해야 하는 이유는?
A. 유니온 타입을 사용하면 하나의 변수나 함수가 여러 타입을 받을 수 있음.
예를 들어, number와 string 타입을 모두 처리해야 할 때 유니온 타입이 유용함.
function getAge(age: number | string) {
if(typeof age == ‘number’) {
return age.toFixed(); // 정상 동작, age의 타입이 ‘number’로 추론되기 때문에 number 관련된 API를 쉽게 자동완성 할 수 있음
}
if(typeof age == 'string') {
return age; // 문자열 그대로 반환
}
return new TypeError('age must be number of string'); // 타입에러 코드
이처럼 유니온 타입을 사용하면 타입스크립트의 장점을 살릴 수 있음.
➕ 타입에러 코드란?
JavaScript와 TypeScript에서 발생하는 오류 중 하나로, 값이나 연산이 올바른 데이터 타입이 아닐 때 발생하는 오류임.TypeScript에서는 주로 타입 안정성을 보장하기 위해 사용되기도 함.
주로 다음과 같은 경우에 사용됨
- 함수에 잘못된 타입의 인자가 전달되었을 때.
- 객체에서 존재하지 않는 속성이나 메서드를 호출하려고 할 때.
null또는undefined에 대해 프로퍼티에 접근하려고 할 때.
// number나 string이 아닌 타입이 들어온 경우
return new TypeError('age must be number or string');
}
age가 number 또는 string일 때는 문제가 없지만, boolean, object, undefined 등의 타입이 잘못 들어왔을 때는 TypeError가 발생함.
Q. 타입에러 코드를 사용하였을때의 장점은?
A. 함수가 올바른 타입의 값을 받지 못했을 경우에 경고할 수 있음.
명시적 오류 메시지를 통해 문제를 쉽게 추적하고 해결할 수 있게 도와줌.
인터섹션 타입(Intersection Type)은 여러 타입을 모두 만족하는 하나의 타입을 의미함. 즉, 인터섹션 타입은 여러 타입의 모든 속성을 합친 타입임.
타입 호환성 관점에서 보면, 인터섹션 타입은 두 타입의 공통 부분을 만족해야만 호환 가능함.
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: number;
}
type Capt = Person & Developer;
위의 예시 코드에서는 Person 인터페이스의 타입 정의와 Developer 인터페이스의 타입 정의를 & 연산자를 이용하여 합친 후 Capt 라는 타입에 할당하였음.
결과적으로 Capt의 타입은 아래와 같음.
{
name: string;
age: number;
skill: string;
}
이처럼 & 연산자를 이용해 여러 개의 타입 정의를 하나로 합치는 방식을 인터섹션 타입을 정의할 수 있음.
- 유니온 타입은 여러 타입 중 하나를 허용하는 방식으로 타입 호환이 유연함.
- 인터섹션 타입은 여러 타입의 속성을 모두 가져야 하므로 더 엄격함.