타입스크립트에서 union 타입 데이터형을 사용 하는 방법에 대해 알아보겠습니다.
union 타입
TypeScript 에서는 union 타입을 사용할 수 있습니다.
union 타입은 하나의 변수에 여러 타입을 지정할 수 있습니다.
여러 타입을 지정하고 싶은 경우에는 | 을 사용합니다.
let value: string | number = 'foo';
value = 100;
value = 'bar';
// 에러: Type 'true' is not assignable to type 'string | number'.
value = true;
변수 value에 string | number 타입을 지정하여 string 타입 또는 number 타입의 값을 대입할 수 있습니다.
지정한 타입이 아닌 값을 대입할 경우에는 에러가 발생합니다.
오브젝트에도 union 타입을 사용할 수 있습니다.
interface Hoge {
foo: string;
bar: number;
}
interface Piyo {
foo: number;
baz: boolean;
}
type HogePiyo = Hoge | Piyo;
const obj: HogePiyo = {
foo: 'hello',
bar: 0,
};
예제에서 type이라는 문법을 사용했습니다.
type문은 TypeScript의 문법으로 새로운 타입을 정의하고 이름을 붙여주는 문법입니다.
예제에서 HogePiyo라는 타입을 Hoge | Piyo라고 정의하였습니다.
union 타입 추출
union 타입으로 선언한 변수나 오브젝트로 사용해야할 경우 그대로 사용하게 되면 조금 복작해질 수도 있습니다.
위 예제에서 HogePiyo 타입 오브젝트는 bar 프로퍼티를 참조할 수 없습니다.
이유는 HogePiyo 타입의 값은 Hoge일수도 있고 Piyo일수도 있습니다.
bar프로퍼티는 Hoge 이지만 Piyo는 아니기 때문에 참조가 안됩니다.즉 해당하지 않을 가능성이 있는 프로퍼티이기 때문에 참조할 수 없습니다.
이런 경우에는 우선 값이 어느쪽에 해당하지는 판정을 해줘야 합니다.
TypeScript에는 판정을해서 적절한 타입을 추출해주는 기능이 있습니다.
interface Hoge {
foo: string;
bar: number;
}
interface Piyo {
foo: number;
baz: boolean;
}
function useHogePiyo(obj: Hoge | Piyo): void {
// obj가 Hoge 타입인지 Piyo 타입인지 판단
if ('bar' in obj) {
// bar 프로퍼티는 Hoge 타입
console.log('Hoge', obj.bar);
} else {
// bar 프로퍼티는 Piyo 타입
console.log('Piyo', obj.baz);
}
}
적절한 타입을 추출하기 위해 in 연선자를 사용하였습니다.
‘bar’ in obj 는 bar 프로퍼티가 obj에 존재하는 경우에는 true를 반환하고 존재하지 않는 경우에는 false를 반환합니다.
in 연사자를 사용하여, if문의 then 부분과 else 부분에서 Hoge인지 Piyo인지 나눠서 처리를 하고 있습니다.
in 연산자는 오브젝트만이 아닌 변수 타입을 추출할 수도 있습니다.
typeof를 사용한 추출
string | number 라는 union 타입을 예로, typeof를 사용 하여 추출하는 방법을 보겠습니다.
function func(value: string | number): number {
// value는 string 타입이기 때문에 if 조건을 처리
if ('string' === typeof value) {
return value.length;
// string 타입이 아닌 경우 else 조건을 처리
} else {
// value는 number타입
return value;
}
}
null 체크
union 타입을 자주 사용하는 경우로 nullable 값을 설정하는 경우입니다.
문자열의 값이 존재하는 경우도 있지만 존재하지 않는 경우도 있습니다.
이러한 경우는 string | null 이라고 union 타입으로 지정할 수 있습니다.
string | null 타입은 값이 null일 경우도 있기 때문에, 문자열로써 사용할 수 없는 경우도 있습니다.
또는 null이 아닌 경우에만 처리를 하고 싶은 경우도 있습니다.
예를 들어 if 문을 사용하여 value != null 이라는 조건식을 사용해 null이 아닌 경우에만 처리를 하도록 하는 경우입니다.
TypeScript에서는 이러한 null 체크를 사용하여 적절한 타입을 추출할 수 있습니다.
function func(value: string | null): number {
// value가 null이 아닌 경우 string 타입으로 사용
if (value != null) {
return value.length;
} else {
return 0;
}
}
위의 샘플을 간단하게 줄이면 아래처럼 사용할 수 있습니다.
function func(value: string | null): number {
return value != null && value.length || 0;
}
댓글