📘 타입스크립트 개념 정리10

📌 1. 클래스(class) 왜 쓰는가?

❗ 문제 상황

let studentA = { name: 'army', age: 2, grade: 'A+' };
let studentB = { name: 'tan', age: 3, grade: 'B+' };

👉 이렇게 계속 만들면?

• 코드 반복 ❌
• 유지보수 어려움 ❌

✅ 해결: 클래스

👉 "틀(설계도)"을 만들어서 객체를 찍어내기

class Student {}

👉 이건 “학생을 만드는 기계”라고 생각하면 쉬움

📌 2. 클래스 기본 구조

✅ 클래스 사용

class Character {
  name;
  level;
  job;

  constructor(name, level, job) {
    this.name = name;
    this.level = level;
    this.job = job;
  }

  attack() {
    console.log(`${this.name} 공격!`);
  }

  introduce() {
    console.log(`나는 ${this.job} ${this.name}`);
  }
}

❌ 객체 여러 개 만들기 (비효율)

let characterA = {
  name: 'Hero',
  level: 1,
  job: 'Warrior',
  attack() {
    console.log('공격!');
  },
};

let characterB = {
  name: 'Mage',
  level: 1,
  job: 'Wizard',
  attack() {
    console.log('마법 공격!');
  },
};

👉 반복됨 😢

🔥 핵심 개념 3개

1) 필드 : 객체의 속성

name;
level;
job;

👉 객체가 가질 데이터

2) 생성자 (constructor) : 객체 생성 시 실행

constructor(name, level, job)

👉 객체 만들 때 자동 실행됨 (객체 생성 시 값 세팅)

new Character('Hero', 1, 'Warrior');

👉 이 순간 constructor 실행됨

3) this : 현재 생성 중인 객체

this.name = name;

👉 "지금 만들어지고 있는 객체"

📌 3. 인스턴스 생성

let char1 = new Character('Hero', 1, 'Warrior');

class로 만든 객체

👉 결과:

{
  name: 'Hero',
  level: 2,
  job: 'Warrior'
}

👉 이걸 인스턴스(instance)라고 부름

📌 4. 상속 (extends)

👉 기능 재사용 + 확장

✅ 개념

👉 "기존 클래스 기능 그대로 가져오고 + 추가"

👉 “마법사 캐릭터” 만들기

class MageCharacter extends Character {
  mana;

  constructor(name, level, job, mana) {
    super(name, level, job); // 부모 호출
    this.mana = mana;
  }

  castSpell() {
    console.log(`${this.name}가 마법 사용!`);
  }
}

📌 사용

let mage = new MageCharacter('Gandalf', 10, 'Wizard', 100);

mage.attack();      // 부모 메서드
mage.castSpell();   // 자식 메서드

🔥 핵심

1) extends : 기존 클래스 기능 재사용

👉 부모 클래스 상속

2) super() : 부모 생성자 호출 필수

super(name, level, job);

👉 부모 constructor 호출

👉 ❗ 상속에서는 반드시 써야 함

⚠️ 중요한 실수 포인트
super(name, job, level);

👉 ❌ 순서 틀림
👉 부모는 name, level, job)

📌 5. TypeScript 클래스

JS vs TS 차이

• 타입 지정 가능
• 타입처럼 사용 가능

JS

name;

TS

name: string;

👉 타입을 명확하게 지정

코드

class Character {
  name;
  level;
  job;

🔥 핵심 포인트

👉 TypeScript 클래스는 "타입 역할도 가능"

const charA: Character= {
  name: '',
  level:2
  job: '',
  
};

👉 클래스 = 타입처럼 사용 가능

📌6. 접근 제어자 (Access Modifier)

3가지 핵심

키워드	의미
public	누구나 접근 가능
private	클래스 내부만 가능
protected	자식 클래스까지 가능

class Character {
  private name: string;
  protected level: number;
  job: string;

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

🔥 차이

const char = new Character('Hero', 1, 'Warrior');

char.name ❌
char.level ❌
char.job ⭕

상속에서는?

class Warrior extends Character {
  showLevel() {
    console.log(this.level); // ⭕ protected
    // console.log(this.name); ❌ private
  }
}

📌 7. 인터페이스 + 클래스

• implements로 구현
• 구조 강제

인터페이스

👉 "이 구조 반드시 따라!"

interface GameCharacter {
  name: string;
  speed: number;
  move(): void;
}

구현

👉 인터페이스 규칙 강제

class Player implements GameCharacter {
  constructor(
    public name: string,
    public speed: number,
    private skill: string
  ) {}

  move() {
    console.log(`${this.speed} 속도로 이동`);
  }
}

👉 반드시 다 구현해야 함

생성자 단축 문법 ⭐ (중요)

→ 자동으로 필드 + this 생성

constructor(public name: string, public speed: number, private skill: string)

👉 이거 쓰면 자동으로:

this.name = name;
this.moveSpeed = moveSpeed;

👉 ❗ 엄청 많이 쓰임

🎯 한 줄 핵심 정리

👉 클래스 = 객체 찍어내는 공장
👉 constructor = 초기값 세팅
👉 extends = 복사 + 확장
👉 super = 부모 호출
👉 TS는 타입까지 관리