DAY09 인터페이스와 클래스

2025-02-28T04:34:27.148Z

정예은

✔오늘의 학습 체크✔

섹션 강의 학습여부 6. 클래스 자바스크립트의 클래스 소개 ✅ 6. 클래스 타입스크립트의 클래스 ✅ 6. 클래스 접근제어자 ✅ 6. 클래스 인터페이스와 클래스 ✅

타입스크립트의 클래스

1⃣클래스

객체 표현

const employee = {
  name: "정예은",
  age: 28,
  position: "취준생",
  work() {
    console.log("사람을 미워하자");
  },
};

우리가 만들고자 하는 클래스가 , 어떤식으로 표현될지 알아보기 위해 먼저 객체부터 생성 하였다.

클래스 생성

//-  클래스 생성 
class Employee{
  name;
  age;
  position;
  
}

💣오류발생!

클래스 필드의 타입이 정해져 있지 않아서 오류남
객체 필드가 자동으로 any타입이 포함된다.

💣해결방법!

tsconfig.json 에서 설정 바꾸기

    "noImplicitAny": false

💣그러나 !

해당 방법은 사용하지 않는게 좋다 !
any타입은 워낙 위험하니깐, 그냥 경고 떠도 타입 너가 설정하렴…

클래스 오류 발생

기껏, 클래스 필드의 타입 선언 하였더니 또 오류 발생
이니셜라이저가(초기값) 없고, 생성자에 할당되지 않았다 라는 문구가 있다.
- 즉, 초기값도 없는데 이거 왜 넣었니? 어차피 undefined들어갈텐데…. 라는 경고문

[ 해결방법 ]

그냥 생성자 만들어버렷!
생성자 만들때, this로 값 선언해주기

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

클래스 타입 오류 해결

//-  클래스 생성
class Employee {
  name: string;
  age: number;
  position: string;

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

  work() {
    console.log("사람을 미워하자.");
  }
}

→ 재정비한 타입클래스를 새로운 객체로 만들어보자.

→ 객체타입이니, 생성시 new 클래스명 호출하기

const employeeB = new Employee("정예은", 28, "취준생");
console.log(employeeB);

결과확인

PS C:\\Users\\admin\\OneDrive\\문서\\onebite-typescript\\section03> tsx src/chapter11.ts
Employee { name: '정예은', age: 28, position: '취준생' }

Employee 라는 클래스의 객체가 생성 되었고,
그 객체의 프로퍼티로는 name과 age 그리고 position이 있다.

2⃣타입클래스는 자바클래스도 가능하다.

타입클래스 → 타입으로 사용 가능

이제 employeeC는 클래스인 Employee를 사용하므로써, 객체타입이 되었다.
이때 필드값은 클래스인 Employee에 맞춰야 한다.

const employeeC:Employee={
  
}

const employeeC: Employee = {
  name: "",
  age: 0,
  position: "",
  work() {},
};

3️⃣클래스 상속

Employee클래스 상속

//* 클래스 상속 Employee
class ExecutiveOfficer extends Employee{
 //필드
  officeNumber: number;
}

부모인 Employee클래스의 필드값과 메서드가 기본으로 들어있음
여기에 ExecutiveOfficer 만의 필드만 더 추가.

생성자 생성

이때, 부모클래스의 생성자도 같이 불러와야함
매개변수 타입도 부모클래스 생성자의 매개변수
호출부도 부모클래스의 super타입으로 가지고 와야함.

//생성자
  constructor(
    name: string,
    age: number,
    position: string,
    officeNumber: number
  ) {
    super(name, age, position)
    this.officeNumber=officeNumber;
  }

🧩오늘의 퀴즈

⏳문제풀이

⏳질문

접근제어자 선택시 readonly 하나만 사용해도 되는지 , public 생략해도 되는지 궁금해
그리고 접근제어자 선택하고 생성자 생성시, 생략가능한 부분은 생략해도 된다고 하는데!

아래 첨부한 코드처럼 생성자의 매개변수에 접근제어자 다 때려박아도 되는 걸까?

class Pokemon {
  constructor(public name:string, public skill:string, readonly type:string){
  }

  getName(){
    return this.name; //변화하지 않은 그냥 name의 필드값만 반환
  }

  setSkill(skill:string){
return skill; //매개변수로 받은 skill의 값을 고대로 출력
  }
}

프론트엔드 한입챌린지 이정환 한입타입스크립트 타입스크립트

답변 0