TypeScript - 타입 어노테이션: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! ? TypeScript와 타입 어노테이션의 세계로 이끄는 흥미로운 여정에 환영합니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 이 모험을 안내해 드리는 것을 기쁜 마음으로 생각합니다. 프로그래밍에 새로운 분이라면 걱정하지 마세요 - 우리는 가장 기초적인 것부터 함께 올라갈 것입니다. 그러니 가상의 등짐을 챙기고, 함께 뛰어들어 보세요!

TypeScript - Type Annotations

타입 어노테이션은 무엇인가요?

여러분이 여행을 준비할 때, 다양한 물건들을 위한 다른 가방들을 가지고 있을 것입니다 - 한 개는 옷을 위한 것이고, 한 개는 위생용품을 위한 것이고, 또 한 개는 전자제품을 위한 것입니다. TypeScript에서의 타입 어노테이션은 이러한 가방에 붙은 레이블과 같습니다. 이는 우리와 컴퓨터에게 우리가 어떤 종류의 "것" (데이터)을 다루고 있는지 알려줍니다.

TypeScript의 세계에서, 타입 어노테이션은 변수, 함수 매개변수,或者是 객체 프로퍼티가 가지는 값을 명시적으로 알려주는 방법입니다. 이는 컴퓨터에게 예상치 못한 값을 받지 않도록 미리 알려주는 것입니다.

타입 어노테이션을 사용하는 이유는 무엇인가요?

오류를 빨리 발견: 코드를 실행하기 전에 실수를 발견할 수 있습니다.
코드 문서화 개선: 코드를 더 쉽게 이해할 수 있게 합니다.
개발 경험 향상: 코드 에디터에서 더 나은 자동 완성과 인텔리센스를 제공합니다.

이제 타입 어노테이션을 다양한 방법으로 사용해 보겠습니다.

변수 타입 어노테이션

TypeScript에서 변수를 생성할 때, 우리는 타입 어노테이션을 추가하여 어떤 종류의 값을 가지도록 지정할 수 있습니다.

기본 문법

let 변수이름: 타입 = 값;

다음은 몇 가지 예제입니다:

let myName: string = "Alice";
let myAge: number = 30;
let isStudent: boolean = true;

이 예제들에서 우리는 TypeScript에게 다음을 알립니다:

myName은 텍스트(문자열)만을 포함해야 합니다
myAge은 숫자만을 포함해야 합니다
isStudent은 true 또는 false(불리언)만을 포함해야 합니다

만약 나중에 다른 종류의 값을 할당하려고 시도하면 TypeScript는 경고를 보여줍니다:

myName = 42; // 오류: Type 'number' is not assignable to type 'string'

배열과 특수 타입

우리는 또한 배열을 어노테이션하고 특수 타입을 사용할 수 있습니다:

let favorites: string[] = ["pizza", "coding", "cats"];
let anything: any = "I can be anything!";
let maybe: unknown = 4;

string[]은 문자열 배열을 의미합니다
any은 무엇이든 될 수 있는 특수 타입입니다 (sparingly 사용하세요!)
unknown은 any에 비해 더 안전한 대안입니다

함수 타입 어노테이션

함수는 매개변수와 반환 값에 타입 어노테이션을 가질 수 있습니다.

기본 문법

function 함수이름(매개변수1: 타입1, 매개변수2: 타입2): 반환타입 {
// 함수 본문
}

다음은 몇 가지 예제입니다:

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

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

function logMessage(message: string): void {
console.log(message);
}

이 예제들에서:

greet은 문자열을 입력받아 문자열을 반환합니다
add은 두 개의 숫자를 입력받아 숫자를 반환합니다
logMessage은 문자열을 입력받아 아무것도 반환하지 않습니다 (void)

화살표 함수

화살표 함수도 타입 어노테이션을 가질 수 있습니다:

const multiply = (a: number, b: number): number => a * b;

객체 프로퍼티 타입 어노테이션

객체를 다루는 경우, 우리는 그 프로퍼티에 타입 어노테이션을 추가할 수 있습니다.

기본 문법

let 객체이름: { 프로퍼티1: 타입1; 프로퍼티2: 타입2 } = {
프로퍼티1: 값1,
프로퍼티2: 값2
};

다음은 예제입니다:

let user: { name: string; age: number; isAdmin: boolean } = {
name: "Bob",
age: 25,
isAdmin: false
};

이제 우리는 특정 프로퍼티 타입을 정의하고 있습니다.

인터페이스를 사용한 복잡한 객체

더 복잡한 객체의 경우, 우리는 인터페이스를 사용할 수 있습니다:

interface Person {
name: string;
age: number;
hobbies: string[];
greet: () => void;
}

let employee: Person = {
name: "Charlie",
age: 30,
hobbies: ["reading", "gaming"],
greet: () => console.log("Hello!")
};

인터페이스는 우리가 재사용 가능한 객체 형태를 정의하는 데 도움을 줍니다.

모든 것을 통합하다

이제 다양한 타입 어노테이션에 대해 배운 것을 더 복잡한 예제로 통합해 보겠습니다:

interface Book {
title: string;
author: string;
pages: number;
isPublished: boolean;
}

function createBookList(books: Book[]): string[] {
return books.map(book => `${book.title} by ${book.author}`);
}

const myBooks: Book[] = [
{ title: "TypeScript 101", author: "Code Wizard", pages: 200, isPublished: true },
{ title: "JavaScript Adventures", author: "JS Ninja", pages: 150, isPublished: false }
];

const bookTitles: string[] = createBookList(myBooks);
console.log(bookTitles);

이 예제는 우리가 배운 여러 개념을 결합한 것입니다:

우리는 Book 인터페이스를 정의합니다
우리는 createBookList 함수를 정의하여 Book 객체 배열을 입력받아 문자열 배열을 반환합니다
우리는 Book 객체 배열을 생성합니다
우리는 함수를 호출하고 결과를 적절한 타입 어노테이션을 가진 변수에 저장합니다

결론

축하합니다! 여러분은 TypeScript 타입 어노테이션의 세계로 첫 걸음을 내디뎠습니다. 이 어노테이션들은 여러분과 여러분의 코드를 안전하게 이끄는 친절한 안내판처럼 생각하시면 됩니다. 처음에는 약간 혼란스러울 수 있지만, 연습을 통해 익숙해질 것입니다.

코딩 여정을 계속하면서 다양한 타입과 어노테이션을 실험해 보세요. 실수를 두려워하지 마세요 - 그것이 우리가 배우고 성장하는 방법입니다!

여기서 배운 타입 어노테이션을 요약한 표를 제공합니다:

타입 어노테이션	예제	설명
기본 타입	`let name: string = "Alice";`	간단한 값에 대한 타입 어노테이션
배열 타입	`let numbers: number[] = [1, 2, 3];`	특정 타입의 배열
함수 타입	`function add(a: number, b: number): number`	함수 매개변수와 반환 타입
객체 타입	`let user: { name: string; age: number }`	객체 프로퍼티 타입
인터페이스	`interface Person { name: string; age: number }`	복잡한 객체 형태 정의

계속 코딩하고, 호기심을 유지하며, 기억하세요 - 모든 마스터는 한 번은 초보자였습니다. 행복한 TypeScripting! ??‍??‍?

Credits: Image by storyset