[TypeScript] 타입 관리: 선언, 표기, 추론까지 완벽 가이드 🌏

TypeScript의 타입 톺아보기! 🌏

 

TypeScript는 정적 타입 시스템을 제공해 코드의 안정성과 가독성을 높이는 데 중요한 역할을 합니다. 이 글에서는 타입 선언, 표기, 추론의 모든 것을 다루며, TypeScript 타입의 세계를 깊이 탐구해 보겠습니다. 타입을 명확히 이해하면 더 안전하고 효율적인 코드를 작성할 수 있어요!

---

1. TypeScript의 기본 타입과 선언 🗄️

TypeScript는 JavaScript의 타입 없는 자유로움을 보완하기 위해 타입 선언을 제공합니다. 변수, 함수, 객체 등에 타입을 지정해 코드의 의도를 명확히 표현할 수 있습니다.

1.1 기본 타입

숫자(Number)

let age: number = 25; // 숫자 타입

 

문자열(String)

let name: string = "Alice"; // 문자열 타입

 

불리언(Boolean)

let isHappy: boolean = true; // 참/거짓 타입

 

배열(Array)

let numbers: number[] = [1, 2, 3]; // 숫자의 배열
let strings: Array<string> = ["a", "b", "c"]; // 제네릭 배열 표현

 

객체(Object)

let person: { name: string; age: number } = {
  name: "Bob",
  age: 30,
};

 

유니언(Union)

여러 타입을 허용할 때 사용합니다.

 

---

2. 타입 표기 (Type Annotations) 🗂️

타입 표기는 변수를 선언하거나 함수를 작성할 때 변수나 매개변수의 타입을 명시적으로 지정하는 방식입니다.

 

2.1 변수 타입 표기

let price: number = 100; // number 타입 지정
let username: string = "Charlie"; // string 타입 지정

 

2.2 함수 타입 표기

함수의 매개변수와 반환값에 타입을 지정할 수 있습니다.

function add(a: number, b: number): number {
  return a + b;
}

 

2.3 옵셔널 매개변수

매개변수를 선택적으로 받을 수 있습니다.

function greet(name?: string): string {
  return name ? `Hello, ${name}` : "Hello!";
}

---

3. 타입 추론 (Type Inference) 📋

TypeScript는 타입을 명시적으로 지정하지 않아도 값을 기준으로 타입을 추론합니다.

3.1 변수 타입 추론

let score = 99; // TypeScript가 score를 number로 추론

3.2 함수 반환 타입 추론

function multiply(a: number, b: number) {
  return a * b; // 반환 타입을 number로 추론
}

3.3 컨텍스트 기반 추론

컨텍스트에 따라 타입을 자동으로 추론합니다.

document.addEventListener("click", (event) => {
  console.log(event.target); // 이벤트 객체 타입 추론
});

---

4. 고급 타입 🗃️

4.1 튜플(Tuple)

고정된 길이와 타입을 가진 배열입니다.

let tuple: [string, number] = ["Alice", 25];

 

4.2 열거형(Enum)

값의 집합을 정의할 때 사용합니다.

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let move: Direction = Direction.Up;

 

4.3 타입 별칭(Type Alias)

복잡한 타입에 별칭을 부여할 수 있습니다.

type User = {
  name: string;
  age: number;
};

let user: User = { name: "Alice", age: 30 };

 

4.4 인터페이스(Interface)

객체 타입을 정의합니다.

interface Car {
  brand: string;
  year: number;
}

let myCar: Car = { brand: "Toyota", year: 2020 };

 

4.5 제네릭(Generic)

타입을 매개변수로 받을 수 있습니다.

function identity<T>(value: T): T {
  return value;
}

let output = identity<string>("Hello");

---

5. 타입 가드 (Type Guards) 📚

TypeScript에서 런타임에 타입을 좁히는 방법입니다.

 

5.1 typeof

function isNumber(value: string | number): value is number {
  return typeof value === "number";
}

let data: string | number = 123;

if (isNumber(data)) {
  console.log(data.toFixed(2)); // data가 number 타입으로 좁혀짐
}

 

5.2 instanceof

class Dog {
  bark() {
    console.log("Woof!");
  }
}

class Cat {
  meow() {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

---

6. TypeScript에서 자주 마주치는 에러와 해결법 📝

6.1 Type 'X' is not assignable to type 'Y'

• 원인: 타입 불일치.

let str: string = 123; // ❌ 에러: number는 string에 할당할 수 없음

 

• 해결: 타입을 맞추거나 변환해야 합니다.

let str: string = String(123); // ✅

 

6.2 Property 'X' does not exist on type 'Y'

• 원인: 존재하지 않는 속성에 접근.

let obj: { name: string } = { name: "Alice" };
console.log(obj.age); // ❌ 에러: age 속성이 없음

 

• 해결: 타입 정의에 속성을 추가하거나, 옵셔널 속성을 사용하세요.

type User = {
  name: string;
  age?: number; // 옵셔널 속성
};

---

마무리: TypeScript, 타입의 마스터가 되자! 🛡️

TypeScript의 타입 선언, 표기, 추론은 코드의 안정성과 유지보수성을 대폭 높여줍니다. 다양한 타입과 고급 기능을 활용해 실수를 줄이고, 협업에서 더 명확한 의사소통을 이끌어 보세요. TypeScript를 제대로 이해하면 당신도 전설적인 타입 마스터가 될 수 있습니다! 🚀

 

🌷전설의 개발자가 되어봅시당! 🌷