function logMessage(text: string | number) {
// ...
}
|
를 이용해 원하는 타입을 한개 이상 사용할수 있다.// any를 사용하는 경우
function logMessage(value: any){
console.log(value);
}
logMessage('hello');
logMessage(100);
// union type을 사용하는 경우
function logMessage(value: string | number){
console.log(value);
}
logMessage('hello');
logMessage(100);
logMessage(true); // error
any
를 사용하면 다양한 타입을 사용할수 있지만 타입스크립트를 사용하는게 무의미 하다.(유니온타입 사용시 타입스크립트의 이점을 살려 코딩할수 있다.)interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
function introduce(someone: Person | Developer) {
someone.name; // O 정상 동작
someone.age; // X 타입 오류
someone.skill; // X 타입 오류
}
introduce()
함수의 파라미터를 Person
, Developer
인터페이스의 유니온 타입으로 정의했다.
위에서 정의한 유니온타입을 기반으로 생각 한다면 Person
이거나 Developer
도 될수 있어 각 인터페이스들의 속성에 접근할수 있다고 생각할수 있지만 타입스크립트 관점에서는 introduce()
함수를 호출하는 시점에 Person
타입이 올지 Developer
타입이 올지 알 수가 없기 때문에 어느 타입이 들어오든 간에 오류가 안 나는 방향으로 타입을 추론하게 된다.(둘다 공통적으로 가지고 있는 속성을 반환해준다.)
결과 적으로 introduce()
함수 안에서는 별도의 타입 가드를 이용하여 타입의 범위를 좁히지 않는이상 오류만 발생시킨다.
Type Guard
function logMessage(value: string | number){ if(typeof value === 'number'){ value.toLocaleString(); } else if(typeof value === 'string'){ value.toString(); } throw new TypeError('VALUE MUST BE STRING OR NUMBER') }
&
연산자를 이용한다.interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: number;
}
function askSomeone(someone: Developer & Person){
someone.age;
someone.skill;
someone.name;
}
위의 코드와 같이 intersection type으로 정의 하면 해당 인터페이스들의 속성에 전부 접근할수 있다.
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
skill: string;
}
Union Type
function askSomeone(someone: Developer | Person) {
//...
}
askSomeone({ name: 'developer', skill:'web'})
askSomeone({name:'young',age:100})
Intersection Type
function askSomeone(someone: Developer & Person) {
//...
}
askSomeone({ name: 'developer', skill: 'web', age:100})
askSomeone({ name: 'developer', skill: 'web'})
이와같이 일부만 불러올 경우 에러가난다.참고
타입스크립트 핸드북
캡틴판교_타입스크립트 입문