[TypeScript] Solo Learn 4일차

katsukichi·2021년 4월 10일
0

TypeScript Solo Learn

목록 보기
4/4

OOP에대해서 간략히

우리가사는세상은 수많은 사물들 , 객체들로 이루어져있다.

주변에는 수많은 객체,사물들에 둘러쌓여있다.

컴퓨터,모바일,책상,의자,TV 나자신또한 객체가될수있다.

각각의 객체는

속성과 행동을 가진다.

강아지 : 뽕순

속성 행동
사모예드 먹기
중간사이즈 자기
다섯살 앉기
흰색 달리기

등등..

property , method 의 개념을 잊지말자.

개개인은 모두 다른 객체지만

결국은모두 같은 인간이라는것.

인간의 특성을 가진다.

가독성이떨어지는 유지보수가 힘든 코드 = 스파게티코드

객체지향프로그래밍

연관된 변수와 함수들을 한 덩어리로 묶어서
구조화하여 표현하는 프로그래밍 스타일

e-commerce

쇼핑몰에서 객체는 어떤게있을까 ?

" 손님이 물건을 장바구니에 담아서 주문, 결제 한다 "

" 손님물건장바구니에 담아서 주문, 결제 한다 "

손님,물건,장바구니,주문,결제 는 잠재적으로 객체가 될수있는 것들이다.

실제 세상에 존재하는 객체와같은 단위로 쪼개고

객체(연관된 변수와 함수들의 집합)이 서로 상호 작용함으로써 시스템이동작!

class

객체는 클래스를 통해서 만들수있다.

클라스는 객체의 뼈대, 설계도, 생산틀

Dog Class
Breed
Size
Age
Color
Eat( )
Sleep( )
Sit( )
Run( )

class 생성자를 써서 구현해보면


class Employee {
  fullName: string; // let,const 키워드 필요없다.
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;
  
  printEmployeeDetails = (): void => { // 파라미터 필요없다.this키워드 쓸것
    console.log(`${this.fullName}의 직업은 ${ this.jobTitle} 이고 
	일주일의 수입은 ${this.hourlyRate * this.workingHoursPerWeek} 달러 이다.`);
  }

클래스 속에서 정의된 함수들은 상대적으로 적은 매개변수를 가진다.

"the best functions are those with no parameters"

Clean code, Uncle Bob_

클래스의 인스턴스

클래스는 틀

틀로 만들어낸것은 인스턴스라고한다.

위에서 employee 클래스를 선언했다.

이제 객체를만들어보자. (인스턴스)


let employee1 = new Employee();

employee1.printEmployeeDetails();
//undefined 의 직업은 undefined이고 일주일의 수입은 NaN달러 이다.

employee1.fullName : "Shin";
employee1.age : 27;
employee1.jobTitle : "full stack developer";
employee1.hourlyRate : 40;
employee1.workingHoursPerWeek : 35;
employee1.printEmployeeDetails();
// Shin의 직업은 full stack developer이고 일주이르이 수입은 1400달러 이다.

하지만 이렇게하면 뭔가 코드가 복잡하다.

그래서 사용하는것이 constructor 라는 생성자이다.

생성자 constructor

모든 클래스는 constructor라는 메서드를 가질수있다.

"객체의 초기화를 담당한다."

class Employee {
  fullName: string; // let,const 키워드 필요없다.
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;
  
  constructor(fullName:string, age:number, jobTitle:string, hourlyRate:number, workingHoursWeek:number){
    this.fullName = fullName;
    this.age = age;
    this.jobTitle = jobTitle;
    this.hourlRate = hourlyRate;
    this.workingHoursPerWeek = workingHoursPerWeek;
  }
  
  printEmployeeDetails = (): void => { // 파라미터 필요없다.this키워드 쓸것
    console.log(`${this.fullName}의 직업은 ${ this.jobTitle} 이고 
	일주일의 수입은 ${this.hourlyRate * this.workingHoursPerWeek} 달러 이다.`);
  }
  
  
  let employee1 : Employee = new Employee(); // 에러 발생 , 파라미터가 없다.

let employee1 : Employee = new Employee("Shin",28,"full stack developor",40,35); 
employee1.printEmployeeDetails();

constructor 에 매개변수를 강제하고있다 지금은

선택적으로 하려면

optional 선택적 매개변수를 주면된다.

?를 사용하면되는데

?뒤에는 전부 ? 가와야하므로 내가 선택적 매개변수로 지정하고 싶다면 순서상 뒤쪽에 선언해줘야한다.

Access Modifiers 접근 제한자

클라스 속 멤버 변수(프로퍼티)와 메소드에 적용될 수 있는 키워드

클라스 외부로 부터의 접근을 통제

  • Public // 클라스 외부에서 접근 가능

  • Private // 클라스 내에서만 접근가능, 클라스의 외부에서 접근 불가능(비공개 멤버)

  • Protected // 클라스 내부, 그리고 상속받은 자식 클라스에서 잡근 가능

기본적으로는 public이다.

즉 명시적으로 public으로 작성할필요는없다. (java,c#은 명시적으로 ?)

private 키워드를 사용해보자.


class Employee {
  private fullName: string; // let,const 키워드 필요없다.
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;
  
  constructor(fullName:string, age:number, jobTitle:string, hourlyRate:number, workingHoursWeek:number){
    this.fullName = fullName;
    this.age = age;
    this.jobTitle = jobTitle;
    this.hourlRate = hourlyRate;
    this.workingHoursPerWeek = workingHoursPerWeek;
  }
  
  printEmployeeDetails = (): void => { // 파라미터 필요없다.this키워드 쓸것
    console.log(`${this.fullName}의 직업은 ${ this.jobTitle} 이고 
	일주일의 수입은 ${this.hourlyRate * this.workingHoursPerWeek} 달러 이다.`);
  }
  
  let employee1 : Employee = new Employee("Shin",28,"full stack developor",40,35);

employee1.fullName = "Park" // 에러 발생 : fullName 프로퍼티는 private이기때문에 접근 불가이다. 
console.log(employee.fullName) // 읽는것도 불가능하다.
  

그래서 보통 getter 와 setter를 만들어준다.

전에 C++ 배울적에 클래스에 기본은 getter와 setter를 만들어주는거부터 했엇다.

private멤버는 프로퍼티명 앞에 _ 언더바 를 붙임으로써 비공개맴버임을 나타낸다.

많은 언어에서 컨벤션으로 사용된다.

getter , setter

class Employee {
  private _fullName: string; // let,const 키워드 필요없다.
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;
  
  // -------------------------------------
  get fullName () {
    return this._fullName;
  }
  
  set fullName (value: string){
    this._fullname = value;
  }
  //-------------------------------------
  constructor(fullName:string, age:number, jobTitle:string, hourlyRate:number, workingHoursWeek:number){
    this.fullName = fullName;
    this.age = age;
    this.jobTitle = jobTitle;
    this.hourlRate = hourlyRate;
    this.workingHoursPerWeek = workingHoursPerWeek;
  }
  
  printEmployeeDetails = (): void => { // 파라미터 필요없다.this키워드 쓸것
    console.log(`${this.fullName}의 직업은 ${ this.jobTitle} 이고 
	일주일의 수입은 ${this.hourlyRate * this.workingHoursPerWeek} 달러 이다.`);
  }
  
  let employee1 : Employee = new Employee("Shin",28,"full stack developor",40,35);
console.log(employee1.fullName) // getter가 알아서 사용된다. 선언해둔게있어서.
employee1.fullName = "Park"

Constructor의 매개변수에 Access Modifiers 직접 적용


class Employee
  
  constructor(
    private _fullName:string,
    private _age:number,
    private _jobTitle:string,
    private _hourlyRate:number,
    public workingHoursPerWeek:number){
  } // 모두 파라미터로 주는것이다. 암묵적으로 CLASS의 필드 멤버변수로 선언된다.
profile
front-back / end developer / Let's be an adaptable person

0개의 댓글