[TypeScript] 자바스크립트의 클래스 소개

🎯 자바스크립트의 클래스 소개

let student1 = {
  name: "kjy",
  grade: "B+",
  age: 27,
  introduce() {
    console.log("hi");
  },
};

let student2 = {
  name: "a",
  grade: "B+",
  age: 27,
  introduce() {
    console.log("hi");
  },
};

• 먼저 해당 코드에서 학생을 추가하기 위해서는 많은 중복코드가 발생하게 된다.
• 이 떄 사용되는 것이 자바스크립트의 클래스이다.

✅ 사용방법

class Student {
  // 필드
  name;
  grade;
  age;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }
}

• 먼저 클래스 내부에 사용할 속성을 필드(Class Field) 형태로 선언할 수 있다.
• 하지만 자바스크립트에서는 생성자에서 바로 this로 할당해도 되기 때문에 필드 선언은 선택 사항이다.
• 그 다음 constructor를 작성하여 객체가 생성될 때 초기값을 설정한다.
• 생성자의 매개변수로 전달받은 값을 this를 사용해 인스턴스의 속성에 할당한다.
• this는 생성되는 해당 인스턴스(객체 자신) 를 의미한다.
• 추가로 이제 클래스를 생성하였다면, 인스턴스를 아래 코드와 같이 생성

let student3 = new Student("홍길동", "C", 40);

• 다음으로 메서드를 생성해보겠다.
• 생성 방법은 클래스 내부에 메서드를 정의하면 된다

// 메서드
// 메서드
  introduce() {
    console.log(`안녕하세요. ${this.name}입니다.`);
  }

• 아래 코드를 실행

class Student {
  // 필드
  name;
  grade;
  age;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }

  // 메서드
  introduce() {
    console.log(`안녕하세요. ${this.name}입니다.`);
  }
}

let student3 = new Student("홍길동", "C", 40);

• 위 사진을 보면 Sutent 인스턴스가 잘 실행된 것을 볼 수 있다.

console.log(student3.introduce());

• 위 코드를 통해 introduce() 메서드도 호출이 가능
• 그리고 StudentDeveloper 클래스에 필드 중 겹치는 부분이 많을 시 사용하는 것이 바로 spuer이다.

class StudentDeveloper extends Student {
  //필드
  favoriteSkill;

  constructor(name, grade, age, favoriteSkill) {
    super(name, grade, age);
    this.favoriteSkill = favoriteSkill;
  }

  introduce() {
    console.log(`안녕하세요. ${this.name}입니다.`);
  }
  programming() {
    return console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

• 먼저, 타입 확장을 위해 extends를 설정하여 확장하고자 하는 타입을 명시
• 다음으로 constructor 내부에 super를 사용하여 소괄호 안에 각각의 필드를 작성하면 중복 코드를 줄일 수 있다.

---

출처

한 입 크기로 잘라먹는 타입스크립트
https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard