TypeScript - Types: A Beginner's Guide

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 TypeScript의 타입에 관해 흥미로운 세상으로 뛰어들어 보겠습니다. 코드를 한 줄도 작성해 본 적이 없으신 분들도 걱정 마세요 - 이 흥미로운 여정에서 여러분의 친절한 안내자가 되겠습니다. 이 튜토리얼이 끝나면 여러분이 얼마나 많이 배웠는지 놀라게 될 것입니다. 그럼 시작해 보겠습니다!

TypeScript에서 타입이란?

深淵으로 뛰어들기 전에, 타입이 무엇이고 왜 중요한지에 대해 이야기해 보겠습니다. 타입은 우리의 데이터에 붙이는 레이블이라고 생각해 보세요. 우리가 옷장을 셔츠, 바지, 신발 등으로 나누어 정리하는 것처럼, 타입은 우리의 코드를 정리하고 우리가 메타포리카하게 양말을 셔츠 통에 넣지 않도록 방지하는 역할을 합니다.

TypeScript는 선택적 정적 타입을 추가한 JavaScript의 확장집합입니다. 이는 우리가 TypeScript에 데이터의 유형을 정확히 알려줄 수 있어서, 코드가 실행되기 전에 오류를 잡을 수 있다는 뜻입니다. 이는 친절한 친구가 어깨에 기대어 우리가 실수를 하기 전에 잠재적인 실수를 지적해 주는 것과 같습니다.

The Any Type: TypeScript의 와일드 카드

TypeScript에서 가장 유연한 타입으로 시작해 보겠습니다: any. 이는 덱의 조커와 같아서, 무엇이든 될 수 있습니다!

let myVariable: any = 42;
myVariable = "Hello, World!";
myVariable = true;

이 예제에서 myVariable은 숫자, 문자열, 브루션 중 하나가 될 수 있습니다. 매우 유연하지만, 강력한 권력은 큰 책임을 동반합니다. any를 너무 자주 사용하면 TypeScript를 사용하는 목적을 무의미하게 만들 수 있으므로, 신중하게 사용하세요!

내장 타입: TypeScript의 기본 블록

TypeScript는 대부분의 우리 필요를 충족시키는 여러 가지 내장 타입을 제공합니다. 이제 하나씩 탐구해 보겠습니다:

1. Number

let age: number = 30;
let price: number = 9.99;

TypeScript의 숫자는 정수 또는 부동소수점 값을 가질 수 있습니다. 다른 언어에서와 같이 다양한 숫자 타입에 대해 염려할 필요가 없습니다!

2. String

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

문자열은 단일引号, 이중引号, 백틱으로 정의할 수 있습니다. 백틱은 ${}를 사용하여 표현식을 내장할 수 있습니다.

3. Boolean

let isStudent: boolean = true;
let hasPassedExam: boolean = false;

브루션은 참 또는 거짓일 수 있습니다. 코드에 대한 예스/노问道로 생각해 보세요.

4. Array

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: Array<string> = ["apple", "banana", "orange"];

배열은 동일한 타입의 여러 값을 가질 수 있습니다. 정사각括弧 또는 Array<T> 문법을 사용하여 정의할 수 있습니다.

5. Tuple

let person: [string, number] = ["Alice", 30];

튜플은 고정된 수의 요소를 가진 배열로, 각 요소는 다른 타입을 가질 수 있습니다. 이는 각 아이템에 대해 특정 컴파트먼트가 있는 작은, 정리된 상자와 같습니다.

6. Enum

enum Color {
  Red,
  Green,
  Blue
}
let favoriteColor: Color = Color.Blue;

열거형은 이름이 지정된 상수 집합을 정의할 수 있습니다. 고정된 옵션을 나타내는 데 매우 유용합니다.

7. Void

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

void은 함수가 아무것도 반환하지 않음을 나타냅니다. 편지를 보내고 답장을 기대하지 않는 것과 같습니다.

8. Null과 Undefined

let notDefined: undefined = undefined;
let empty: null = null;

이 타입은 값이 없음을 나타냅니다. 이는 하나는 의도적으로 비어 있고 (null), 다른 하나는 아직 채워지지 않았음을 나타냅니다 (undefined).

다음은 우리가 다루었던 내장 타입을 요약한 표입니다:

타입	설명	예시
number	숫자 값 (정수 또는 부동소수점)	let age: number = 30;
string	텍스트 데이터	let name: string = "Alice";
boolean	참 또는 거짓 값	let isStudent: boolean = true;
array	동일한 타입의 값의 모음	let numbers: number[] = [1, 2, 3];
tuple	고정된 길이의 배열, 각 요소는 특정 타입	let person: [string, number] = ["Alice", 30];
enum	이름이 지정된 상수 집합	enum Color { Red, Green, Blue }
void	함수의 반환값이 없음	function logMessage(message: string): void { ... }
null	어떤 객체 값도 아닌 의도적인 값	let empty: null = null;
undefined	값이 할당되지 않은 변수	let notDefined: undefined = undefined;

사용자 정의 타입: 자신만의 도구 제작

이제 내장 타입을 다루었으므로, 자신만의 커스텀 타입을 만드는 방법에 대해 이야기해 보겠습니다. 이는 TypeScript가 진짜 빛나는 부분입니다!

1. Interfaces

인터페이스는 객체의 구조를 정의할 수 있습니다. 이는 객체의 블루프린트라고 생각할 수 있습니다.

interface Person {
  name: string;
  age: number;
  greet(): void;
}

let alice: Person = {
  name: "Alice",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

이 예제에서 우리는 Person 인터페이스를 정의하고, 이 구조를 따르는 객체를 만들었습니다. 이는 사람들이 동일한 정보를 제공해야 하는 양식을 작성하는 것과 같습니다.

2. Classes

클래스는 재사용 가능한 컴포넌트를 만드는 방법입니다. 이는 쿠키를 자를 도구와 같아서, 한 번 정의하고 여러 개의 쿠키(객체)를 만들 수 있습니다!

class Student {
  name: string;
  grade: number;

  constructor(name: string, grade: number) {
    this.name = name;
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying hard!`);
  }
}

let bob = new Student("Bob", 10);
bob.study(); // 출력: "Bob is studying hard!"

여기서 우리는 Student 클래스를 만들었고, 속성 (name과 grade)와 메서드 (study)를 정의했습니다. 이 클래스를 사용하여 여러 학생을 만들 수 있습니다.

3. Type Aliases

타입 별칭은 타입에 새로운 이름을 지정할 수 있습니다. 이는 복잡한 타입을 만들거나 기존 타입에 더 의미 있는 이름을 주는 데 유용합니다.

type Point = {
  x: number;
  y: number;
};

let center: Point = { x: 0, y: 0 };

이 예제에서 우리는 2D 공간의 점을 나타내는 Point 타입을 만들었습니다. 관련 속성을 그룹화하는 간단한 방법입니다.

4. Union Types

유니온 타입은 값이 여러 타입 중 하나일 수 있음을 나타냅니다. 이는 "이것이든 그것이든"이라고 말하는 것과 같습니다.

type Result = number | string;

function getResult(value: boolean): Result {
  return value ? "Success" : 404;
}

여기서 Result은 숫자이거나 문자열이 될 수 있습니다. 특정 조건에 따라 값이 다른 타입일 수 있는 경우 이는 유용합니다.

5. Intersection Types

교차 타입은 여러 타입을 하나로 결합합니다. 이는 "이것이고 그것이기도"라고 말하는 것과 같습니다.

interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

type ColorfulCircle = Colorful & Circle;

let myCircle: ColorfulCircle = {
  color: "red",
  radius: 5
};

이 예제에서 ColorfulCircle은 Colorful이고 Circle입니다. 그것은 color과 radius를 모두 가지고 있어야 합니다.

그리고 이렇게 되었습니다! 우리는 TypeScript 타입의 기본을 다루었고, 유연한 any 타입에서 내장 타입과 사용자 정의 타입에 이르기까지 다루었습니다. 타입은 TypeScript의 코딩 슈퍼파워처럼, 깨끗하고 신뢰할 수 있는 코드를 작성하는 데 도움을 주고, 오류를 문제가 되기 전에 잡을 수 있게 합니다.

TypeScript 여정을 계속하면서 이러한 타입들을 다양한 방법으로 결합해 보고, 실수를 두려워하지 마세요 - 그것이 우리가 배우는 방법입니다! 곧 여러분은 프로처럼 타이핑을 하고, 강력하고 오류가 없는 코드를 만들 수 있을 것입니다.

행복하게 코딩하시고, 여러분의 타입이 항상 강력하길 바랍니다!

Credits: Image by storyset