[타입스크립트] 블리언 타입

타입스크립트에서 블리언 타입(boolean)**은 true 또는 false 두 가지 값만 가질 수 있는 가장 간단한 타입입니다. 마치 컴퓨터가 "예" 또는 "아니오"로 질문에 답하는 것과 같다고 생각하면 됩니다.

왜 블리언 타입이 중요할까요?

• 명확한 코드 작성: 변수에 어떤 종류의 값이 들어갈지 명확하게 지정하여 코드의 가독성을 높이고 예상치 못한 오류를 방지합니다.
• 조건문 활용: if, else if, else 문과 같은 조건문에서 true 또는 false에 따라 코드의 실행 흐름을 제어합니다.
• 함수의 반환값: 함수가 특정 조건을 만족하는지 여부를 boolean 값으로 반환하여 다른 함수에서 활용할 수 있습니다.

다양한 예시

// 변수 선언
let isDone: boolean = false;
let lightOn: boolean = true;

// 조건문
if (isDone) {
    console.log('작업이 완료되었습니다.');
} else {
    console.log('작업이 아직 진행 중입니다.');
}

// 함수
function isEven(num: number): boolean {
    return num % 2 === 0;
}

console.log(isEven(2));  // true
console.log(isEven(3));  // false

// 배열
let booleanArray: boolean[] = [true, false, true];

• 변수 선언: isDone과 lightOn 변수는 각각 boolean 타입으로 선언되어 true 또는 false 값만 가질 수 있습니다.
• 조건문: if 문에서 isDone 변수의 값이 true인지 false인지에 따라 다른 코드 블록이 실행됩니다.
• 함수: isEven 함수는 주어진 숫자가 짝수인지 아닌지를 판단하여 boolean 값을 반환합니다.
• 배열: booleanArray 배열은 boolean 값만 저장할 수 있는 배열입니다.

더 자세히 알아보기

• null과 undefined: boolean 타입은 null이나 undefined 값을 가질 수 없습니다.
• truthy와 falsy: 자바스크립트에서는 모든 값이 boolean으로 변환될 수 있는데, 이때 true로 변환되는 값을 truthy, false로 변환되는 값을 falsy라고 합니다. 예를 들어, 0, null, undefined, ""(빈 문자열)은 falsy 값입니다.
• 타입 추론: 타입스크립트는 변수에 처음 할당되는 값을 보고 타입을 추론할 수 있습니다. 즉, let isDone = false;와 같이 초기값을 할당하면 타입스크립트는 자동으로 isDone 변수의 타입을 boolean으로 인식합니다.

다양한 방식으로 탐구하기

타입스크립트에서 블리언 타입을 선언하는 가장 기본적인 방법은 boolean 타입을 사용하는 것입니다. 하지만 이 외에도 다양한 방식으로 블리언 타입을 표현하고 활용할 수 있습니다.

1. 기본 boolean 타입

let isFinished: boolean = false;

가장 일반적이고 직관적인 방법입니다. boolean 타입은 true 또는 false 두 가지 값만 가질 수 있습니다.

2. Boolean 객체

let isReady: Boolean = new Boolean(true);

Boolean 객체는 boolean의 wrapper 객체로, true 또는 false 값을 감싸서 객체 형태로 만들 수 있습니다. 하지만 일반적으로 boolean 타입을 더 선호하며, Boolean 객체는 불필요한 오버헤드를 발생시킬 수 있으므로 주의해야 합니다.

3. Type Alias

type IsDone = boolean;
let taskCompleted: IsDone = true;

type 키워드를 사용하여 boolean 타입에 별칭을 부여할 수 있습니다. 이렇게 하면 코드의 가독성을 높이고, 더 복잡한 타입을 정의할 때 유용하게 활용할 수 있습니다.

4. Interface

interface IHasCompleted {
  isCompleted: boolean;
}

let myTask: IHasCompleted = {
  isCompleted: false
};

interface를 사용하여 객체의 구조를 정의하고, isCompleted 속성을 boolean 타입으로 지정할 수 있습니다. 이는 객체 지향 프로그래밍에서 자주 사용되는 방식입니다.

5. Enum

enum TrafficLight {
  Red,
  Green,
  Yellow
}

let isGreen: boolean = TrafficLight.Green === TrafficLight.Green; // true

enum은 특정 값들의 집합을 나타내는 타입입니다. 위 예시에서는 TrafficLight enum을 정의하고, isGreen 변수에 TrafficLight.Green 값이 TrafficLight.Green 값과 일치하는지를 비교하여 boolean 값을 할당했습니다.

6. Conditional Types

type IsString<T> = T extends string ? true : false;

let isString: IsString<string> = true;

Conditional Types는 조건에 따라 다른 타입을 반환하는 고급 타입입니다. 위 예시에서는 IsString 타입을 정의하여 주어진 타입이 string인지 확인하고, boolean 값을 반환합니다.

어떤 방식을 선택해야 할까요?

• 가장 일반적인 경우: boolean 타입을 사용합니다.
• 코드의 가독성을 높이고 싶을 때: type alias 또는 interface를 사용합니다.
• 특정 값들의 집합을 나타내고 싶을 때: enum을 사용합니다.
• 고급 타입 활용: Conditional Types를 사용하여 복잡한 타입을 정의할 수 있습니다.

주의할 점:

• Boolean 객체는 일반적으로 사용하지 않는 것이 좋습니다.
• enum은 특정 값들의 집합을 나타낼 때 유용하지만, 과도하게 사용하면 코드가 복잡해질 수 있습니다.
• Conditional Types는 고급 기능이므로, 필요한 경우에만 사용하는 것이 좋습니다.

다양한 방식으로 탐구하기 (심화)

앞서 블리언 타입을 선언하는 기본적인 방법들을 살펴보았습니다. 이번에는 조금 더 심화된 내용과 실제 개발에서 유용하게 활용할 수 있는 다양한 기법들을 알아보겠습니다.

1. Generic 타입 활용

interface IsType<T> {
    isType: T;
}

function isTrue<T>(value: IsType<T>): value is IsType<true> {
    return value.isType === true;
}

• Generic 타입: T를 통해 다양한 타입을 받아들일 수 있는 유연성을 제공합니다.
• Type Guard: value is IsType<true>와 같이 특정 타입인지 확인하는 문법입니다. 이를 통해 더 안전한 타입 체크를 수행할 수 있습니다.

2. Mapped Type

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

type MyReadOnlyPerson = Readonly<{ name: string; age: number }>;

• Mapped Type: 기존 타입의 프로퍼티를 변형하여 새로운 타입을 만드는 방식입니다. readonly 키워드를 사용하여 모든 프로퍼티를 읽기 전용으로 만들 수 있습니다.

3. Conditional Types (심화)

type IfEquals<X, Y> = (<T>() => T extends X ? 1 : 2) extends
    (<T>() => T extends Y ? 1 : 2)
    ? true
    : false;

type A = number;
type B = string;

type AreEqual = IfEquals<A, B>; // false

• Conditional Types: 더욱 복잡한 조건을 표현하고, 타입 레벨에서 계산을 수행할 수 있습니다. 위 예시에서는 두 타입이 같은지 비교하는 IfEquals 타입을 정의했습니다.

4. Intersection Types

type Person = { name: string; age: number };
type Developer = { skills: string[] };

type FullstackDeveloper = Person & Developer;

• Intersection Types: 여러 타입의 모든 프로퍼티를 합쳐 새로운 타입을 만듭니다.

5. Union Types

type Value = string | number | boolean;

코드를 사용할 때는 주의가 필요합니다.

 

• Union Types: 여러 타입 중 하나의 타입을 가질 수 있는 타입입니다.

실제 예시: React 컴포넌트의 Props 타입

interface Props {
  children?: React.ReactNode;
  onClick?: (event: React.MouseEvent) => void;
}

function MyButton(props: Props) {
  // ...
}

• React 컴포넌트: 컴포넌트에 전달되는 props의 타입을 정의하여 안전하고 예측 가능한 코드를 작성할 수 있습니다.

핵심 개념 요약

• Generic 타입: 다양한 타입을 다룰 수 있는 유연성을 제공합니다.
• Type Guard: 특정 타입인지 확인하여 안전한 타입 체크를 수행합니다.
• Mapped Type: 기존 타입을 변형하여 새로운 타입을 만듭니다.
• Conditional Types: 복잡한 조건을 표현하고, 타입 레벨에서 계산을 수행합니다.
• Intersection Types: 여러 타입의 모든 프로퍼티를 합칩니다.
• Union Types: 여러 타입 중 하나의 타입을 가질 수 있습니다.