TIL. TypeScript 클래스

chloe·2021년 3월 21일
0

Typescript

목록 보기
6/8
post-thumbnail

객체지향 프로그래밍 OOP

연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍 스타일
ex) 손님, 물건,장바구니,주문,결재
객체지향 프로그래밍에서 잠재적으로 객체가 될 수 있는 것들.

어플리케이션을 실제 세상에 존재하는 객체와 같은 단위로 쪼개고 객체들이 서로 상호작용함으로써 시스템이 동작하는 것이 바로 객체지향 프로그래밍!

클래스 vs 객체

객체들은 클래스를 통해서 만들어 질 수 있고 클래스는 객체의 뼈대, 설계도, 생산틀을 말한다.
클래스 속에서 정의된 함수들은 클래스 내 정의된 변수들에 접근가능하기에 상대적으로 적은 매개변수를 가진다. 매개변수가 적을수록 더욱 더 쉽게 함수를 사용할 수 있고 유지보수도 더 쉽다.

클래스 내에 정의된 변수: 프로퍼티
클래스 내에 정의된 함수: 메소드

클래스의 인스턴스 즉 객체를 만들어보자!

let employee1=new Employee();
employee1.printEmployeeDetails();

employee1객체는 Employee 클래스를 토대로 삼아 만들어진 객체
employee클래스 안에 선언된 프로퍼티와 메소드를 그대로 객체 자신의 프로퍼티와 메소드로 가지게 된다.

Constructor(생성자)

모든 클래스는 Constructor라고 불리는 메소드가 있다.
생성자(Constructor)는 클래스로부터 객체를 생성할 때 호출되는 함수다.
"객체의 초기화를 담당"

class Employee{
  private _fullName:string;
  age:number;
  jobTitle:string;
  hourlyRage:number;
  workingHoursPerWeek:number;
  
  //constructor는 매개변수 즉 파라미터를 가질 수 있다.
  constructor(fullName:string, age:number, jobTitle:string,
               hourlyRate:number, workingHoursPerWeek:number)//<= 전달되는 매개변수를 강제하고 있다. ?를 붙이면 선택적 매개변수가 된다!
  {
    this.fullName=fullName;
    this.age=age;
    this.jobTitle=jobTitle;
    this.hourlyRate=hourlyRate;
    this.workingHoursPerWeek=workingHoursPerWeek;
  }
  // 이렇게 전달된 매개변수를 객체 생성시 멤버변수의 프로퍼티로 초기화 할 수 있음
  //this뒤 있는 아이들은 상단class의 멤버변수들을 가르킨다.
  //= 뒤 아이들은 전달된 매개변수를 나타낸다.
  
  get fullName (){
    return this._fullName;
  }
  set fullName(value:string){
    this._fullName=value;
    //괄호안에 전달될 매개변수와 타입을 전달해준다. 그리고 중괄호안에 전달된 매개변수의 값을 비공개 fullName매개변수에 값으로 재할당
  }
  
  printEmployeeDetails=():void=>{
    console.log(`${this._fullName}의 직업은 ${this.jobTitle}이고 일주일의 수입은 ${this.hourlyRate*this.workingHoursPerWeek}달러이다.`)
  }
}
let employee1:Employee=new Employee('클로이',22,'주니어 개발자',40,35);
employee1.fullName='헤나'; // 할당된 초기값을 다른 값으로 쉽게 바뀔 수 있다. 클래스에서 private으로 설정하면 이렇게 직접적으로 바꿀 수 없다. 그러나 set으로 설정해주면 setter로 새로운 이름값 설정가능함
employee1.printEmployeeDetails();

클래스를 통해 객체를 생성할 떄, constructor(생성자)에 정의된 parameter의 값이 Argument로 전달되어야 한다.

선택적 매개변수들은 필수 매개변수 뒤에 위치한다!

 constructor(fullName:string, age:number, jobTitle?:string,
               hourlyRate?:number, workingHoursPerWeek?:number)

Access Modifier

Access Modifier는 클래스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드. 클래스 외부로부터의 접근을 통제하기에 버그를 줄이고 코드의 안정성을 향상시킬 수 있다.

타입 스크립트에서는 크게 3가지 Access Modifier가 있음
Public: 클래스의 외부에서 접근 가능하다는 뜻
Private: 클래스 내에서만 접근 가능하며 클래스의 외부에서 접근 불가능
Protected: 클래스 내부 그리고 상속받은 자식 클래스에서 접근 가능

Public 멤버를 노출시키기 위해 public키워드를 명시할 필요가 없다. 코드에서 아무런 Access Modifier가 명시되어있지 않으면 그냥 public!

Getter & Setter

Get과 Set 키워드를 사용하여 Getter와 Setter를 선언할 수 있다. get과 set을 설정해 private으로 설정된 값에 접근해 새로운 값 설정가능하게 해줄 수 있음!

Class와 Access Modifiers

Constructor의 매개변수에 Access Modifiers 직접 적용할 수 있다.

class Employee{
  constructor(
  private _fullName:string,
  private _age:number,
  private _jobTitle:string,
  private _hourlyRate:number,
  public workingHoursPerWeek:number){
  }

객체가 생성될 때, 컨스트럭터의 매개변수로 전달된 값은 객체의 프로퍼티 값으로 자동으로 그 값이 초기화되고 할당된다. 위와 비교해볼 때 코드 매우 간결해짐

참고: https://www.youtube.com/watch?v=sPM94o5_WVU

profile
Front-end Developer 👩🏻‍💻

0개의 댓글