TypeScript의 연산자 활용 타입
TypeScript는 연산자를 이용해 타입을 정할 수 있다. Javascript에서도 보았던 || (OR) 연산자나 &&(AND)와 같은 연산자를 이용하여 만들 수 있다.
|연산자를 이용한 타입을 유니온(Union)타입&연산자를 이용한 타입은 인터섹션 (Intersection)타입
💡 유니온(Union)타입
유니온타입은 둘 이상의 타입을 합쳐서 만들어진 새로운 타입
|연산자를 이용, 자바스크립트의||(OR)연산자와 같이 "A이거나 B이다" 라는 의미의 타입number|string은 숫자 또는 문자열 타입을 의미
function printValue(value : number|string):void {
if(typeof value === "number") {
console.log(`The value is a number: ${value}`);
} else {
console.log(`The value is a string ${value}`);
}
}
printValue(10); // The value is a number: 10
printValue("hello"); // The value is a string: hello- 위 함수는 숫자 또는 문자열의 값을 입력받고 있음
- 이때, 유니온 타입을 사용해
number|string타입으로 지정하고 있음 - 이후 입력된 값의 타입을
typeof연산자를 사용하여 검사한 후 , 해당 값이 숫자인경우와 문자열인 경우 각각 다른 결과를 출력
➡️ 유니온 타입은 다양한 타입의 값을 처리해야 하는 경우 유용
유니온(Union) 타입의 장점
유니온 타입을 사용 ➡️ 타입을 추론할 수 있음 !
- 타입에 관련된 API를 쉽게 자동완성으로 얻어낼 수 있음
- but)
any타입을 사용하면 타입을 추론할 수 없어, 자동완성 기능을 사용하기 어려움
- but)
- 또한 코드의 가독성을 높일 수 있음
let value: string | number | boolean;이렇게 string | number | boolean 타입으로 선언된 변수는 문자열, 숫자, 불리언 타입 중 하나의 값을 가질 수 있다는 것이 명시적으로 표시되어 코드의 가독성↑
유니온(Union) 타입 사용 시 주의할 점
유니온 타입인 값이 있으면, 유니온에 있는 모든 타입에 공통인 멤버들에게만 접근 할 수 있음 !!
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}위와 같이 인터페이스를 사용하여 Developer와 Person을 정의
fujnction askSomeone(someone: Developer | Person) {
console.log(someone.name)
}실질적으로 askSomeone 함수 내부에서는 Developer와 Person 이 갖고 있는 공통 프로퍼티인 name 에만 접근할 수 있음
➡️ 공통되고 보장된 프로퍼티만 제공해야 하기 때문
- 만약 나머지 프로퍼티에도 접근하고 싶다면 ? 타입가드를 사용해야 한다
🤔 타입가드(Type Guard)란 ?
TypeScript에서 타입을 보호하기 위해 사용되는 기능 중 하나로, 특정코드블록에서 타입의 범위를 제한해 해당 코드블록 안에서 타입 안정성을 보장해줌
아래는 타입 가드를 적용한 예시
function askSomeone(someone: Developer | Person) {
if('skill' in someone) {
console.log(someone.skill);
}
if('age' in someone) {
console.log(someone.age);
}
}in연산자 : 타입스크립트에서 객체의 속성이 존재하는지를 체크하는 연산자in연산자는 객체의 속성이름과 함께 사용하여 해당 속성이 객체 내에 존재하는지 여부를 검사- TypeScript에서는
in연산자를 제공하고 있음
💡 인터섹션(Intersection) 타입
둘 이상의 타입을 결합하여 새로운 타입을 만드는 방법
➡️ & 연산자를 사용하여 표현
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
type User = Developer & Person;여기서 User변수는 Developer, Person 각각에 정의된 속성 모두를 받게 되는데, 여기서 type은 추후 나올 타입 별칭에서 배우게 될 것 !
- 인터섹션으로 타입을 연결해 User라는 하나의 단일 타입으로 표현할 수 있음
➡️ 타입 가드가 필요하지 않음
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone(someone: Developer & Person) {
console.log(someone.age);
console.log(someone.name);
console.log(someone.skill);
}위 코드는 인터섹션 타입을 사용하여 Developer와 Person을 하나의 타입으로 묶었기 때문에 askSomeone 함수 내에선 정의된 프로퍼티에 전부 접근할 수 있음
그러나 인터섹션 타입은 타입 가드가 필요없는 대신, 새로운 교집합을 만들어 낸 것이기 때문에 전달인자를 전달할 때 "모든 프로퍼티를 전부 보내줘야만 한다"
반대로 유니온 타입은 타입가드를 해줘야 하지만 전달인자를 전달할 때 "선택지가 생기게 됨"
interface Developer {
name: string;
skill: string;
}
interface Person {
name: string;
age: number;
}
function askSomeone( someone: Developer | Person ) {
// 타입가드 설정
if( 'skill' in someone) {
console.log(someone.skill);
}
if( 'age' in someone ) {
console.log(someone.age);
}
}
// 전달인자 전달 시, 선택지가 생김
askSomeone({name: '김코딩', skill: "웹개발"});
askSomeone({name: '김코딩', age: 20});
function askSomeone2(someone: Developer & Person) {
//타입가드를 사용하지 않아도 모든 프로퍼티에 접근 가능
console.log(someone.age);
console.log(someone.skill);
console.log(someone.name);
}
// 인터섹션 결합시, 전달인자를 전달할 때 선택지가 없음
askSomeone2({name: '김코딩', skill: '웹개발', age: 20});