TypeScript _ Class

LOOPY·2021년 8월 18일
post-thumbnail

1. Classes란

  • object를 만드는 청사진(설계도)
  • TypeScript에서는 클래스도 사용자가 만드는 타입 중 하나
class Person { // class 키워드 소문자로, 클래스 이름 대문자로
  name;
  constructor(name: string){
    this.name = name;
  }
}

const p1 = new Person(‘Mark’);
  • new 키워드 이용해 class 통해 object 생성
  • 생성 시 값 전달하려면 constructor와 this 이용

2. Constructor & initialize

  • class의 property 초기화하지 않으면 undefined
    -> strict 모드에서는 에러 발생
    -> name: string = “Mark”; 처럼 초기화해주기
  • age!: 초기화하지 않아도 에러 띄우지 않겠다(뒤에서 할당할거임)
  • 생성자 함수가 없으면 디폴트 생성자가 호출됨
  • 생성자에는 async 설정 불가능

3. 접근 제어자 (Access Modifiers)

  • 각 property/생성자/메소드 이름 앞에 명시
  • default값은 public(외부 접근 가능)
  • private: class 내에서만 접근 가능 -> 이름 맨앞에 _ 붙이는 전통

4. Initialization in constructor parameters

class Person {
  public constructor(public name: string, public age: number) {}
}

🌟 생성자의 매개변수에 접근 제어자를 포함하면 따로 person: string; this.name=name으로 선언 및 할당하는 코드 없이 자동 할당 가능


5. Getters & Setters

class Person{
  public constructor(private _name: string, private age: number) {}
  get name(){ 
    return this._name; 
  }
  set name(n: string){ 
    this._name = n; 
  }
}

const p1: Person = new Person(“Mark”, 39);
console.log(p1.name); // getter 사용
p1.name = “Loopy”; // setter 사용

6. Readonly properties

  • class 내에 public readonly name: string = “Mark”;
    -> 처음 초기화+생성자 제외하고 다른 어디에서도 수정 불가능

7. Index Signatures in class

  • property를 동적으로 사용하기 위해
class Students {
  [index: string]: string; // [index: string]: “male” | “female”;
}

const a = new Studnets();
a.mark = “male”;
a.jade = “male”;

8. Static Properties & Methods

class Person{
  public static CITY = “Seoul”;
  public static hello(){ console.log(‘hi’); }
}

// 클래스명에 바로 붙여 사용 (object 이름 뒤에도 사용 가능)
Person.CITY; 
Person.hello(); 

⭐ 다른 object에서 그 값이 변경되면 해당 클래스 전부에 영향을 주게 됨


9. Singletons

class ClassName {
  private static instance: ClassName | nul = nulll;
  
  public static getInstance(): ClassName{ 
    if(ClassName.instance === null) { 
      ClassName.instance = new ClassName();
    }
    return ClassName.instace;
  }
  
  private constructor() {} // class 밖에서 new를 사용할 수 없음
}

const a = ClassName.getInstace();
const b = ClassName.getInstace();
// a와 b는 같다

10. 상속(Inheritance)

class Parent{
  constructor(protected _name: string, private _age: number){}
  public print():void { 
    console.log(`이름 ${this._name}, 나이 ${this._age}`); 
  }
}
const p = new Parent(“Mark”, 39);

class Child extends Parent{
  public _name = “Mark Jr.; // 이제 외부에서 _name 접근 가능 (override)
  constructor(age: number){
    super(_name, age); 
    // 자식의 생성자에서는 꼭 super로 부모 생성자 맨 먼저 호출해야 함
  }
}
const c = new Child(5);

11. Abstract Classes

abstract class AbstractPerson{ // 해당 class는 new 키워드 사용 불가능
  protected _name: string = ‘Mark’;
  abstract setName(name: string): void; // 구현부X
}

class Person extends AbstractPerson{
  setName(name: string): void{ 
    this._name = name;
  }
}

const p = new Person();
p.setName();
profile
2년차 프론트엔드 개발자의 소소한 기록을 담습니다 :-)

0개의 댓글