[TS] 2. TypeScript 문법 (열거형, 타입 별칭, 타입 추론, 클래스)

이전 포스트

[TS] 1. TypeScript 환경설정

 

Enum

• 열거형(Enum)은 특정 값의 집합을 정의할 때 사용합니다.
• JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원합니다.
• 열거형은 문자형, 숫자형 이 둘의 조합으로도 정의 가능합니다.
• 열거형은 일반적으로 상수값을 대신하여 사용합니다.
• 코드의 가독성과 개발자의 오타와 같은 실수를 방지할 수 있습니다.

숫자형 열거

• 각 값은 자동으로 0부터 1씩 증가합니다.
• 아래의 코드와 같이 수동으로 값을 지정하는 것도 가능합니다.

/* 값을 지정하지 않으면 자동으로 할당됨
enum Color {
  Red, // 0
  Green, // 1
  Blue, // 2
}
*/
// 수동으로 값을 지정
enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;

console.log(c);          // 출력: 2
console.log(greenValue);  // 출력: 2
console.log(blueValue);   // 출력: 4

 

문자형 열거

문자형 열거는 특정 문자 또는 다른 열거형 값으로 초기화해야 합니다.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

 

문자열 기반의 열거형은 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해서 사용되기도 합니다. 예를 들어, HTTP 요청 방식을 나타내는 열거형을 정의할 수 있습니다.

 

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function makeRequest(url: string, method: HttpMethod) {
  // ...
}

makeRequest("/api/data", HttpMethod.Post);

역매핑(Reverse Mappings)

역 매핑은 숫자형 열거형에만 존재하는 특징입니다. 열거형의 키(key)로 값(value)을 얻을 수 있고 값(value)으로 키(key)를 얻을 수도 있습니다.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

인터페이스

TypeScript에서 변수를 선언할 때 인터페이스를 아래와 같이 사용할 수 있습니다. TypeScript에서 인터페이스는 객체(Object)의 구조를 정의하기 위해 주로 사용되는 예약어입니다.

interface User {
	name: string;
	age: number;
}

// 정상적으로 선언됩니다.
const user: User = {
	name: "anna",
	age: 20
}

// 프로퍼티의 순서를 지키지 않아도 정상적으로 선언됩니다.
const user: User = {
	age: 20,
	name: "anna"
}

// 정의된 프로퍼티보다 적게 작성했기 때문에 에러가 납니다.
const user: User = {
	name: "anna"
}

// 정의된 프로퍼티보다 많이 작성했기 때문에 에러가 납니다.
const user: User = {
	name: "anna",
	age: 20,
	job: "developer"
}

interface User {
	name: string;
	age?: number;
}

// 정상적으로 선언됩니다.
const user: User = {
	name: "anna"
}

 

함수와 인터페이스

interface User {
	name: string;
	age: number;
	job: string;
}

interface Greeting {
	(user: User, greeting: string): string;
}

const greet: Greeting = (user, greeting) => {
	return `${greeting}, ${user.name}! Your job : ${user.job}.`;
}

const user: User = {
	name: "anna",
	age: 30,
	job: "developer"
};

const message = greet(user, "Hi");

console.log(message);

 

클래스와 인터페이스

interface Calculator {
	add(x: number, y: number): number;
	substract(x: number, y: number): number;
}

class SimpleCalculator implements Calculator {
	add(x: number, y:number) {
		return x + y;
	}

	substract(x: number, y: number) {
		return x - y;
	}
}

const caculator = new SimpleCalculator();

console.log(caculator.add(4, 9)); //13
console.log(caculator.substract(10, 5)); //5

 

인터페이스와 상속

extends라는 키워드를 사용하여 기존에 존재하던 인터페이스를 상속해 확장이 가능합니다.

interface Person {
    name: string;
    age: number;
}

interface Developer extends Person {
    language: string;
}

const person: Developer = {
    language: "TypeScript",
    age: 20,
    name: "Anna",
}

 

여러 인터페이스를 받아 상속받아 확장할 수도 있습니다.

interface FoodStuff {
    name: string;
}

interface FoodAmount {
    amount: number;
}

interface FoodFreshness extends FoodStuff, FoodAmount {
	   isFreshed: boolean;
}

const food = {} as FoodFreshness;

food.name = "egg";
food.amount = 2;
food.isFreshed = true;

 

타입별칭(Type Aliases)

type 키워드를 이용해 타입의 새로운 이름을 정의해줄 수 있습니다.

type Person = {
  id: number;
  name: string;
  email: string;
}

const me: Person = {
	id: 1,
    name: 'gill dong',
    email: abc@naver.com,
}

기존에 타입 별칭으로 정의한 타입을 상속하여 새로운 인터페이스를 정의할 수 있습니다.

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

interface Students extends Person {
    className: string;  
}

인터페이스 vs 타입 별칭

• 인터페이스는 상속이 가능하므로 확장이 가능합니다.
• 인터페이스는 개발자가 정의된 타입을 모를 때 알려주지 않습니다.
• 확장이 가능한 구조라면 인터페이스로, 해당 스코프 내에서만 사용되는 타입의 경우 타입 별칭으로 타입을 정의하는게 좋습니다.

 

타입 추론(Type Interface)

타입 추론(Type Inference)은 변수나 함수의 타입을 선언하지 않아도 TypeScript가 자동으로 유추하는 기능입니다.

let isNumber = 123; // 타입스크립트는 자동으로 number 타입으로 추론합니다.

문맥상의 타이핑

타입을 추론하는 또 하나의 방식은 바로 문맥상으로 타입을 결정하는 것입니다. 이 문맥상의 타이핑(타입 결정)은 코드의 위치(문맥)를 기준으로 일어납니다. 다음과 같은 함수를 살펴보겠습니다.

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

add 함수는 두 개의 매개변수를 받아 더한 값을 반환합니다. 하지만 매개변수의 타입이 명시되어 있지 않습니다. 이 경우, 타입스크립트는 매개변수 a와 b의 타입을 자동으로 추론했습니다. 만약 매개변수 a와 b가 모두 숫자(Number) 타입이라면, add 함수의 반환 값도 숫자(Number) 타입으로 추론됩니다.

 

타입 추론의 장점

• 코드 가독성 향상
• 개발 생산성 향상
• 오류 발견 용이성

타입 추론의 단점

• 타입 추론이 잘못될 경우 코드 오류 발생
• 명시적인 타입 지정이 필요한 경우가 있음(복잡한 함수나 객체)

 

TypeScript에서의 클래스

TypeScript에서는 클래스의 속성과 메서드에 대한 타입을 명시할 수 있습니다. 그리고 자바, c# 등과 같은 언어처럼 public, private 접근자를 제공합니다.

class Person {
  public name: string;
  private age: number;

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

  greet(): void {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, ${this.age}살 입니다.`);
  }
}

JavaScript의 클래스와 약간 다른점이 있다면 TypeScript에서 클래스를 정의할 때, constructor를 이용하여 초기화하는 멤버들은 전부 상단에서 정의를 해줘야 한다는 것입니다.

 

 

readonly 키워드

readonly 키워드를 사용하여 프로퍼티를 읽기 전용으로 만들 수 있습니다. 읽기 전용 프로퍼티들은 선언 또는 생성자에서 초기화해야 합니다.

class Mydog {
    readonly name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}
let spooky = new Mydog("스푸키");
spooky.name = "멋진 스푸키"; // 에러