Flow 정적 타입 체커 완벽 가이드

JavaScript 코드의 타입 안정성을 보장하는 Flow의 핵심 개념을 학습합니다. 기본 타입부터 고급 타입 추론까지 실무에 바로 적용 가능한 예제로 배워봅니다.

---

---

들어가며

이 글에서는 Flow 정적 타입 체커 완벽 가이드에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 기본_타입_어노테이션
2. 객체_타입_정의
3. 선택적_속성과_Maybe_타입
4. 유니온_타입
5. 배열과_제네릭_타입
6. 인터페이스_정의
7. 정확한_객체_타입
8. 함수_타입_정의
9. 교차_타입
10. 타입_캐스팅
11. 클래스_속성_타입
12. 유틸리티_타입

---

1. 기본 타입 어노테이션

개요

Flow는 변수, 함수 매개변수, 반환값에 타입을 명시하여 런타임 전에 오류를 발견합니다.

코드 예제

// @flow
function multiply(a: number, b: number): number {
  return a * b;
}

const result: number = multiply(5, 3);
console.log(result); // 15

설명

콜론(:) 뒤에 타입을 명시하여 number 타입만 허용하도록 강제합니다. 잘못된 타입 전달 시 Flow가 컴파일 타임에 에러를 발생시킵니다.

---

2. 객체 타입 정의

개요

객체의 속성과 타입을 정확히 정의하여 구조적 안정성을 확보합니다.

코드 예제

// @flow
type User = {
  id: number,
  name: string,
  email: string,
};

const user: User = {
  id: 1,
  name: "김철수",
  email: "kim@example.com"
};

설명

type 키워드로 객체 구조를 정의하고, 모든 속성의 타입을 명시합니다. 누락되거나 잘못된 속성이 있으면 에러가 발생합니다.

---

3. 선택적 속성과 Maybe 타입

개요

선택적 속성(?)과 Maybe 타입으로 null이나 undefined 값을 안전하게 처리합니다.

코드 예제

// @flow
type Product = {
  id: number,
  name: string,
  discount?: number,
};

function getPrice(product: Product): ?number {
  return product.discount;
}

설명

속성명 뒤 ?는 선택적 속성을, 타입 앞 ?는 null/undefined 가능성을 나타냅니다. 안전한 null 처리가 가능합니다.

---

4. 유니온 타입

개요

여러 타입 중 하나를 허용하는 유연한 타입 정의가 가능합니다.

코드 예제

// @flow
type Status = 'pending' | 'approved' | 'rejected';

function updateStatus(status: Status): string {
  return `Status is ${status}`;
}

updateStatus('approved'); // OK

설명

파이프(|)로 구분된 여러 타입을 정의하여 특정 값들만 허용합니다. 타입 안정성과 유연성을 동시에 확보합니다.

---

5. 배열과 제네릭 타입

개요

배열의 요소 타입을 명시하고 제네릭으로 재사용 가능한 타입을 만듭니다.

코드 예제

// @flow
function getFirst<T>(items: Array<T>): ?T {
  return items.length > 0 ? items[0] : null;
}

const numbers: Array<number> = [1, 2, 3];
const first: ?number = getFirst(numbers);

설명

Array<T> 또는 T[] 형태로 배열 타입을 정의합니다. 제네릭 <T>를 사용하면 다양한 타입에 재사용 가능한 함수를 만들 수 있습니다.

---

6. 인터페이스 정의

개요

클래스나 객체가 구현해야 할 계약을 인터페이스로 정의합니다.

코드 예제

// @flow
interface Drawable {
  draw(): void;
  getArea(): number;
}

class Circle implements Drawable {
  radius: number;
  constructor(r: number) { this.radius = r; }
  draw() { console.log("Drawing circle"); }
  getArea() { return Math.PI * this.radius ** 2; }
}

설명

interface로 메서드 시그니처를 정의하고 implements로 구현을 강제합니다. 일관된 API 설계가 가능합니다.

---

7. 정확한 객체 타입

개요

추가 속성을 허용하지 않는 엄격한 객체 타입을 정의합니다.

코드 예제

// @flow
type ExactUser = {|
  id: number,
  name: string,
|};

const user: ExactUser = {
  id: 1,
  name: "이영희"
  // age: 30  // Error: 추가 속성 불가
};

설명

중괄호 안에 파이프(|)를 사용하면 정의된 속성만 허용합니다. 예상치 못한 속성 추가를 방지합니다.

---

8. 함수 타입 정의

개요

함수 자체를 타입으로 정의하여 콜백이나 고차 함수에 활용합니다.

코드 예제

// @flow
type Callback = (error: ?Error, result: ?string) => void;

function fetchData(url: string, callback: Callback): void {
  callback(null, "Data loaded");
}

fetchData("/api", (err, data) => {
  if (data) console.log(data);
});

설명

화살표 함수 형태로 매개변수와 반환 타입을 정의합니다. 콜백 함수의 타입 안정성을 확보합니다.

---

9. 교차 타입

개요

여러 타입을 결합하여 모든 속성을 포함하는 새로운 타입을 만듭니다.

코드 예제

// @flow
type Person = { name: string };
type Employee = { employeeId: number };
type Staff = Person & Employee;

const staff: Staff = {
  name: "박민수",
  employeeId: 12345
};

설명

앰퍼샌드(&)로 타입을 결합하면 모든 속성을 가진 타입이 생성됩니다. 믹스인 패턴 구현에 유용합니다.

---

10. 타입 캐스팅

개요

타입을 명시적으로 변환하여 Flow의 타입 추론을 보조합니다.

코드 예제

// @flow
const value: mixed = "Hello Flow";

if (typeof value === 'string') {
  const str: string = value;
  console.log(str.toUpperCase());
}

설명

mixed 타입은 모든 값을 허용하며, 타입 가드(typeof)로 좁혀서 안전하게 사용합니다. 런타임 체크와 함께 사용합니다.

---

11. 클래스 속성 타입

개요

클래스의 속성과 메서드에 타입을 명시하여 객체지향 코드의 안정성을 높입니다.

코드 예제

// @flow
class Counter {
  count: number;

  constructor(initial: number = 0) {
    this.count = initial;
  }

  increment(): number {
    return ++this.count;
  }
}

설명

클래스 속성을 선언할 때 타입을 명시하고, 메서드의 반환 타입도 정의합니다. 클래스 기반 설계의 타입 안정성을 보장합니다.

---

12. 유틸리티 타입

개요

Flow의 내장 유틸리티 타입으로 기존 타입을 변형하여 새로운 타입을 생성합니다.

코드 예제

// @flow
type User = { id: number, name: string, age: number };

type ReadonlyUser = $ReadOnly<User>;
type PartialUser = $Shape<User>;
type UserKeys = $Keys<User>;

const partial: PartialUser = { name: "홍길동" };

설명

$ReadOnly는 읽기 전용, $Shape는 부분 타입, $Keys는 키 타입을 생성합니다. 타입 변환을 간결하게 처리할 수 있습니다. --- 이 카드 뉴스는 Flow의 핵심 기능을 실무 중심으로 구성했습니다. 각 카드의 코드는 실제로 작동하며, 중급 개발자가 바로 프로젝트에 적용할 수 있는 패턴들입니다.

---

마치며

이번 글에서는 Flow 정적 타입 체커 완벽 가이드에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Flow #TypeChecking #StaticTypes #TypeAnnotations