Union Type ( 유니온 타입 ) 과 Intersection Type
12167 단어 typescripttypescript
Union Type ( 유니온 타입 ) 과 Intersection Type
파라미터 또는 변수에 하나의 타입 이상을 사용할 수 있게 해주는 것 입니다.
Union Type 예시
function logMessage(value: string){
console.log(value)
}
logMessage('hello');
logMessage(100); // number 타입이 들어오기에 오류
// 숫자를 포함시키고 싶으면 string -> any 로 바꾸면 된다. <- 타입의 장점이 없어 집니다.
- 유니온 타입을 사용하면 ?
function Message(value: string | number){
console.log(value);
}
Message('hello');
Message(100) // 두 가지 타입 모두 받을 수 있습니다.
사용법
-
|
키워드 사용 -
~ 이거나, 아래를 보면 셋 중에 하나
let hyunho: string | number | boolean;
유니온 타입 장점
- 타입 가드 효과
타입 가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정
function Message(value: string | number){
if(typeof value === 'number'){
value.toLocaleString
// 각 타입에 맞게 추론이 되기 떄문에 해당 타입의 API 를 사용할 수 있게 됩니다.
// 타입 가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링 하는) 과정
}
if(typeof value === 'string'){
value.toString();
}
throw new TypeError('value must be string or number');
}
Message('hello');
Message(100)
유니온 타입 특징
interface Developer{
name: string;
skill: string;
}
interface Person{
name: string;
age: number;
}
function askSomeone(someone: Developer | Person){
someone.name
// someone.skill 불가능
}
-
Developer 와 Person 이 가지고 있는 모든 속성을 사용할 수 있다고 생각 할 수 있습니다.
-
실제로는
name
만 사용할 수 있습니다. -
이유는, someone 에 어떤 값이 들어올지 모르기 때문에 Developer 도 되야하고, Person 도 되어야 합니다.
-
즉, 타입스크립트에서 코드 상 에러가 발생할 수 있다고 생각하기 때문에,
인터페이스나 특정 구조체를 유니온 타입으로 사용하면 보장된 속성만 제공 합니다.
Intersection Type
-
&
키워드 사용 -
~ 이면서, 아래를 보면 세 개의 타입을 전부 만족하는
let capt: stirng & number & boolean;
인터섹션 타입 특징
interface Developer{
name: string;
skill: string;
}
interface Person{
name: string;
age: number;
}
function askSomeone(someone: Developer & Person){
someone.name;
someone.skill;
someone.age;
}
-
Developer 와 Persone 의 속성을 모두 포함한 someone 입니다.
-
공통된 속성만 사용이 가능한 유니온 타입과의 차이점
유니온과 인터섹션의 차이점 ( 호출하는 관점 )
Union Type
function askSomeone(someone: Developer | Person){
}
askSomeone({name: '디벨로퍼', skill: '웹 개발'})
askSomeone({name: '캡틴', age: '100'})
- askSomeone 에 들어가는 인자로, Developer 나 Perosn 이기 때문에 둘 중 하나의 데이터를 주면 됩니다.
Intersection Type
function askSomeone(someone: Developer & Person){
}
// 에러
askSomeone({name: '디벨로퍼', skill: '웹 개발'})
// 이유는 Developer 의 속성과 Persone 의 속성을 모두 넘겨야 합니다.
// 아래와 같이 사용
askSomeone({name: '디벨로퍼', skill: '웹 개발', age: 34})
참고
Author And Source
이 문제에 관하여(Union Type ( 유니온 타입 ) 과 Intersection Type), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoho_0815/Union-Type-유니온-타입-과-Intersection-Type저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)