타입 추론과 타입 단언 – 자동으로 타입을 추론하는 TypeScript (11강)

타입 추론과 타입 단언 – 자동으로 타입을 추론하는 TypeScript

TypeScript는 **타입 안전성**을 제공하면서도 **자동으로 타입을 추론**할 수 있는 강력한 기능을 갖추고 있습니다. 이를 통해 개발자는 불필요하게 명시적으로 타입을 지정할 필요 없이, TypeScript가 제공하는 **타입 추론** 기능을 통해 코드를 더 간결하고 효율적으로 작성할 수 있습니다. 이번 강의에서는 TypeScript의 **타입 추론**과 **타입 단언**에 대해 자세히 살펴보겠습니다.

타입 추론이란?

**타입 추론(Type Inference)**은 TypeScript가 변수나 함수의 타입을 **자동으로 추론**하는 기능입니다. 즉, 개발자가 명시적으로 타입을 지정하지 않아도, TypeScript가 코드의 문맥을 분석하여 타입을 자동으로 유추합니다. 이로 인해 코드 작성이 간편해지고, 불필요한 타입 선언을 줄일 수 있습니다.

기본적인 타입 추론

TypeScript는 변수를 선언할 때 초기값을 제공하면, 해당 값의 타입을 **자동으로 추론**합니다. 예를 들어, 숫자 값을 할당하면 TypeScript는 해당 변수를 **number 타입**으로 추론합니다.

let num = 10; // num은 자동으로 number 타입으로 추론됩니다.
console.log(typeof num); // "number"

위 예제에서 num은 **10**이라는 숫자 값을 할당받았기 때문에, TypeScript는 이를 **number 타입**으로 자동 추론합니다. 이 경우에는 **`number` 타입을 명시하지 않아도** TypeScript가 이를 자동으로 처리합니다.

배열과 객체의 타입 추론

배열과 객체도 마찬가지로, **초기값**을 통해 타입을 추론할 수 있습니다. 배열에서 숫자 타입의 값들이 포함되면, TypeScript는 배열을 **number[]** 타입으로 추론하고, 객체에서도 각 프로퍼티의 타입을 추론합니다.

let arr = [1, 2, 3]; // arr은 number[] 타입으로 추론됩니다.
let person = { name: "John", age: 30 }; // person은 { name: string, age: number } 타입으로 추론됩니다.

이와 같이 TypeScript는 배열이나 객체의 각 요소나 프로퍼티의 타입을 자동으로 추론하여, 추가적인 타입 선언 없이도 안전하게 코드를 작성할 수 있게 해줍니다.

타입 단언이란?

**타입 단언(Type Assertion)**은 **TypeScript의 타입 추론이 정확하지 않거나, 타입을 명시적으로 지정하고 싶을 때** 사용하는 방법입니다. 타입 단언은 **강제적으로 특정 타입**을 지정할 때 사용되며, TypeScript에게 "이 값은 내가 지정한 타입이라고 확신한다"고 알려주는 역할을 합니다.

타입 단언 문법

타입 단언은 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 **`as` 키워드를 사용**한 방법이고, 두 번째는 **angle-bracket** 문법을 사용하는 방법입니다.

let someValue: any = "Hello, TypeScript!";
let strLength: number = (someValue as string).length; // as 키워드를 사용한 타입 단언
// 또는
let strLength2: number = (someValue).length; // angle-bracket 문법을 사용한 타입 단언

위 예제에서 **`someValue`**는 **`any`** 타입으로 선언되었고, TypeScript는 **문자열(string)** 타입으로 추론할 수 없습니다. 이때 **`as`**나 **``**을 사용하여 타입을 **명시적으로 단언**할 수 있습니다.

타입 단언을 사용하는 상황

타입 단언은 주로 **타입을 정확히 알고 있지만 TypeScript가 이를 추론하지 못하는 경우**에 사용됩니다. 예를 들어, **DOM 요소**를 다룰 때, TypeScript는 기본적으로 DOM 요소의 타입을 정확히 추론하지 못하므로, 타입 단언을 사용해 명시적으로 타입을 지정해야 할 수 있습니다.

let element = document.getElementById("myElement") as HTMLDivElement;
element.innerHTML = "Hello, TypeScript!";

위 예제에서는 **`document.getElementById`**의 반환값이 기본적으로 **`HTMLElement | null`** 타입인데, 우리는 **`HTMLDivElement`** 타입이라고 확신할 수 있기 때문에, 이를 **`as`** 키워드로 단언하여 사용합니다.

타입 추론과 타입 단언의 차이점

**타입 추론**과 **타입 단언**은 비슷해 보일 수 있지만, 그 목적과 사용 방식에서 중요한 차이가 있습니다.

• 타입 추론: TypeScript가 변수나 함수의 타입을 **자동으로 추론**하는 기능입니다. 개발자는 타입을 명시하지 않아도 TypeScript가 문맥을 분석하여 타입을 자동으로 결정합니다.
• 타입 단언: TypeScript가 타입을 정확히 추론하지 못할 때, 개발자가 **타입을 명시적으로 지정**하는 기능입니다. 개발자는 코드가 실행되는 맥락을 잘 알고 있을 때, 타입을 강제로 선언할 수 있습니다.

타입 추론과 타입 단언 활용 예제

타입 추론과 타입 단언을 함께 사용하면 더 안전하고 효율적인 코드를 작성할 수 있습니다. 다음은 **실제 코드**에서 두 기능을 어떻게 활용할 수 있는지에 대한 예제입니다.

타입 추론을 활용한 함수 반환값 추론

function calculateArea(radius: number) {
  return Math.PI * radius * radius; // TypeScript는 반환값을 자동으로 number로 추론합니다.
}

let area = calculateArea(5);
console.log(area); // 78.53981633974483

위 예제에서 **`calculateArea`** 함수는 **`number`** 타입의 값을 반환하지만, TypeScript는 자동으로 **`number` 타입**을 추론하여 별다른 타입 선언 없이도 안전하게 사용할 수 있습니다.

타입 단언을 활용한 DOM 처리

let inputElement = document.getElementById("inputField") as HTMLInputElement;
inputElement.value = "TypeScript is great!";
console.log(inputElement.value); // "TypeScript is great!"

이 예제에서는 **`getElementById`**를 사용하여 **`input` 요소**를 가져옵니다. TypeScript는 기본적으로 **`HTMLElement | null`** 타입으로 반환하지만, 우리는 **`HTMLInputElement`**로 단언하여 `value` 속성을 안전하게 사용할 수 있습니다.

타입 추론과 타입 단언의 장점

TypeScript에서 **타입 추론**과 **타입 단언**은 코드의 안정성과 가독성을 크게 향상시키는 중요한 도구입니다. 이 두 기능을 잘 활용하면:

• 불필요한 타입 선언을 줄일 수 있어 코드가 더 간결해집니다.
• 타입 안전성을 유지하면서도 유연하게 타입을 관리할 수 있습니다.
• 타입 추론과 타입 단언을 통해 타입 에러를 미리 방지할 수 있습니다.

마무리: 타입 추론과 타입 단언을 잘 활용하자

타입 추론과 타입 단언은 TypeScript의 강력한 기능으로, 코드 작성 시 **불필요한 타입 선언**을 줄이고, **더 안전**하고 **효율적인 코드**를 작성할 수 있게 도와줍니다. 이 두 기능을 적절히 활용하면, TypeScript의 타입 시스템을 더욱 효과적으로 사용할 수 있습니다.

타입 추론과 타입 단언을 잘 활용하여 더욱 **유지보수성** 높은 코드를 작성해 보세요. 다음 강의에서는 TypeScript에서 **제네릭(Generic)**을 활용한 **재사용 가능한 타입**을 정의하는 방법을 배워보겠습니다.