[TypeScript] Union Types

Union Types

OR, 모든 가능한 케이스 중에 발생할 수 있는 딱 하나의 타입만 담고 싶을 때
TypeScript에서 활용도가 굉장히 높은 타입

let age: string | number = 1;
age = "1";

type Direction = "left" | 'right' | 'up' | 'down';
function move(direction: Direction) {
	console.log(direction)
}
move('left')

type TilseSize = 8 | 16 | 32;
const title: TilseSize = 16;

// function: login -> success, fail
type SuccessState = {
	response: {
		body: string;
	};
};

type FailState = {
	reason: string;
};

type LoginState = SuccessState | FailState

function login(): SuccessState | FailState {
	return {
		response: {
			body: "logged in!",
		},
	}
}

function login1(): LoginState {
	return {
		response: {
			body: "logged in!",
		},
	}
}

function login2(id: string, password: string): Promise<LoginState> {
	return {
		response: {
			body: "logged in!",
		},
	}
}

// printLoginState(state: LoginState)
// success -> body 🎉
// fail -> reason 😥
function printLoginState(state: LoginState): void {
	if ('response' in state) {
		console.log(`🎉 ${state.response.body}`)
	} else {
		console.log(`😥 ${state.reason}`)
	}
}

Discriminated Union

Union 타입의 차별이 되는, 이름이 동일한 타입을 둠으로써 간편하게 구분할 수 있음

// function: login -> success, fail
type SuccessState = {
	result: 'success';
	response: {
		body: string;
	};
};

type FailState = {
	result: 'fail';
	reason: string;
};

type LoginState = SuccessState | FailState

function login3(): LoginState {
	return {
		result: 'success',
		response: {
			body: "logged in!",
		},
	}
}

// printLoginState(state: LoginState)
// success -> body 🎉
// fail -> reason 😥
function printLoginState2(state: LoginState): void {
	if (state.result === 'success') {
		console.log(`🎉 ${state.response.body}`)
	} else {
	console.log(`😥 ${state.reason}`)
	}
}