728x90
서로소 유니온 타입
- 아래 코드에서, tag 프로퍼티는 리터럴 타입이기 때문에 중복될 수 없다 -> 구별용으로 굿
(지금은 엎어졌지만 예전에 높은 연차를 가지신 개발자분들과 프로젝트를 했을 때, 이 타입의 코드를 많이 본 기억이 있다. 그만큼 유용하게 쓸 수 있는 타입 방식이 아닐까싶다.)
type Admin = {
tag: "ADMIN";
name: string;
kickCount: number;
};
type Member = {
tag: "MEMBER";
name: string;
point: number;
};
type Guest = {
tag: "GUEST";
name: string;
visitCount: number;
};
type User = Admin | Member | Guest;
// 방법 1 if문 사용
function login(user: User) {
if (user.tag === "ADMIN") {
console.log(`${user.name}님 현재까지 ${user.kickCount}명 추방했습니다`);
} else if (user.tag === "MEMBER") {
console.log(`${user.name}님 현재까지 ${user.point}모았습니다`);
} else {
console.log(`${user.name}님 현재까지 ${user.visitCount}번 오셨습니다`);
}
}
// 방법 2 switch문 사용
function login(user: User) {
switch (user.tag) {
case "ADMIN": {
console.log(`${user.name}님 현재까지 ${user.kickCount}명 추방했습니다`);
break;
}
case "MEMBER": {
console.log(`${user.name}님 현재까지 ${user.point}모았습니다`);
break;
}
case "GUEST": {
console.log(`${user.name}님 현재까지 ${user.visitCount}번 오셨습니다`);
break;
}
}
}
++ 비동기 작업시에도 사용가능 하다.
type LoadingTask = {
state: "LOADING";
};
type FaildTask = {
state: "FAILED";
error: {
message: string;
};
};
type SuccessTask = {
state: "SUCCESS";
response: {
data:string;
};
};
type AsyncTask = {
state: "LOADING" | "FAILED" | "SUCCESS";
error?: {
message: string;
};
response?: {
data: string;
};
};
// 로딩중 -> 콘솔에 로딩중 출력
// 실패 -> 실패 : 에러메시지 출력
// 성공 -> 성공 : 데이터를 출력
function processResult(task: AsyncTask) {
switch (task.state) {
case "LOADING": {
console.log("로딩 중");
break;
}
case "FAILED": {
console.log(`에러 발생 : ${task.error?.message}`);
break;
}
case "SUCCESS": {
console.log(`성공 : ${task.response?.data}`);
break;
}
}
}
const loading: AsyncTask = {
state: "LOADING",
};
const faild: AsyncTask = {
state: "FAILED",
error: {
message: "오류 발생 원인은~~",
},
};
const success: AsyncTask = {
state: "SUCCESS",
respones: {
data: "데이터 ~~",
},
};
728x90
반응형
'TypeScript' 카테고리의 다른 글
제네릭 | 한 입 크기로 잘라먹는 타입스크립트 (1) | 2024.03.12 |
---|---|
TypeError: Cannot read properties of undefined (reading 'length') 의 원인과 해결 방안 (0) | 2024.03.09 |
타입단언 (value as typeName) | 한 입 크기로 잘라먹는 타입스크립트 (0) | 2024.03.03 |
타입스크립트의 기본 중, 잘 몰랐던 부분 정리 | 한 입 크기로 잘라먹는 타입스크립트 (0) | 2024.02.27 |