TypeScript - 유형 추론: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 TypeScript의 세계로 흥미로운 여정을 떠나고, 그 중에서도 가장 멋진 기능 중 하나인 유형 추론을 탐구해볼 것입니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요; 저는 당신의 친절한 안내자가 되겠습니다. 우리는 단계별로 이를 탐구할 것입니다. 이 튜토리얼의 끝을 맞아서, TypeScript가 얼마나 지능적일 수 있는지 놀라게 될 것입니다!

유형 추론이란?

들어가기 전에, 유형 추론이 무엇을 의미하는지 이해해 보겠습니다. 상상해 보세요. 당신의 생각을 단순히 당신을 보는 것만으로 추측할 수 있는 마법의 친구가 있다면 어떨까요? TypeScript는 코드에 대해 이와 같은 일을 합니다. 코드를 보고, 변수들이 어떤 유형이어야 하는지 명확히 알려주지 않아도 추론해 보려고 합니다. 멋지지 않나요?

이제 TypeScript가 그 마법의 추론 능력을 어떻게 사용하는지 탐구해 보겠습니다!

변수 또는 멤버 초기화

기본 개념

변수를 생성하고 즉시 값을 부여할 때, TypeScript는 해당 변수가 어떤 유형이어야 하는지 추론할 수 있습니다. 몇 가지 예제를 보겠습니다:

let myName = "Alice";
let myAge = 25;
let isStudent = true;

이 코드에서 TypeScript는 다음을 추론합니다:

• myName은 string 유형
• myAge는 number 유형
• isStudent는 boolean 유형

let myName: string = "Alice"; 이라고 쓰지 않아도 되는 이유는 TypeScript가 충분히 지능적해서 이를 추론할 수 있기 때문입니다!

더 복잡한 예제

TypeScript는 더 복잡한 유형도 처리할 수 있습니다:

let myFavoriteNumbers = [1, 2, 3, 4, 5];
let myPet = { name: "Fluffy", type: "Cat", age: 3 };

여기서 TypeScript는 다음을 추론합니다:

• myFavoriteNumbers는 숫자 배열 (number[])
• myPet는 특정 속성을 가진 객체 (TypeScript는 우리가 부르는 "객체 리터럴 유형"을 생성합니다)

함수 기본 매개변수

TypeScript는 함수의 기본 매개변수에서도 유형을 추론할 수 있습니다. 예제를 보겠습니다:

function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}

이 함수에서 TypeScript는 name이 string 유형으로 추론됩니다. 기본 값이 문자열이기 때문입니다.

이 함수는 다양한 방법으로 호출할 수 있습니다:

greet(); // 출력: Hello, Guest!
greet("Alice"); // 출력: Hello, Alice!

함수 반환 유형

TypeScript는 함수가 반환하는 유형을 코드에서 반환하는 것을 기반으로 추론할 수 있습니다. 몇 가지 예제를 보겠습니다:

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

function isEven(num: number) {
return num % 2 === 0;
}

TypeScript는 다음을 추론합니다:

• add 함수는 number를 반환
• isEven 함수는 boolean을 반환

function add(a: number, b: number): number 이라고 쓰지 않아도 되는 이유는 TypeScript가 이를 추론하기 때문입니다!

최선 공통 유형: 연합 유형

occasionally, TypeScript needs to infer types from multiple expressions. In these cases, it uses what we call the "Best Common Type" algorithm. Let's look at an example:

let mixedArray = [1, "two", 3, "four", 5];

여기서 TypeScript는 mixedArray가 (string | number)[] 유형으로 추론됩니다. 이는 문자열과 숫자를 모두 포함할 수 있는 배열을 의미합니다.

문맥 타입

문맥 타입은 TypeScript가 코드의 문맥을 사용하여 유형을 추론하는 것입니다. 콜백 함수와 함수 매개변수에서 특히 유용합니다. 예제를 보겠습니다:

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
console.log(num.toFixed(2));
});

이 예제에서 TypeScript는 forEach가 숫자 배열에서 숫자를 콜백 함수에 전달한다는 것을 알고 있습니다. 따라서 num이 숫자로 추론되어 toFixed() 메서드를 사용할 수 있도록 합니다.

결론

이제, 친구들이! 우리는 TypeScript의 유형 추론의 마법의 세계를 여행했습니다. 간단한 변수 할당에서 복잡한 함수 반환 유형과 문맥 타입에 이르기까지, TypeScript는 항상 코드를 이해하고 당신의 생활을 더 쉽게 만들기 위해 노력하고 있습니다.

유형 추론은 칭찬하는 지능형 어시스턴트처럼 당신을 도와 더 깨끗하고, 더 많은 오류가 없는 코드를 작성하는 데 도움이 됩니다. 완벽하지는 않지만, 대부분의 시간 동안 당신을 지원해 줄 것입니다!

계속 연습하고, 코딩을 계속하면 곧 TypeScript 마법사가 될 것입니다! 행복하게 코딩하고, 유형이 항상 당신의 편에 서길 바랍니다!

Credits: Image by storyset