Typescript 개념 정리 2 - class & interface

class

class Person {
 name:string; 
 constructor(name:string) {
   this.name = name;
 }
}

위와 같이 재사용이 가능한 객체 설계도(청사진) class를 생성할 수 있다.

객체를 생성할 때 호출되는 함수(생성자)는 constructor 키워드를 사용하여 작성한다. 함수 내부에서 클래스의 속성에 접근하기 위해서는 this 키워드를 사용한다.

참고로 위의 코드는 아래와 같이 간략화가 가능하다.

class Person {
 constructor(name:string) {
 }
}

접근제한자

• public : 아무것도 작성하지 않았을 때의 기본 값. 클래스 내부나 외부, 어디에서든지 접근 가능
• private : 클래스 내부에서만 접근 가능
• protected : 상속받는 클래스와 클래스 내부에서만 접근 가능

읽기전용 속성

• readonly : 한번 값을 입력한 뒤에는 수정이 불가능하도록 강제하는 키워드

상속

extends 키워드를 사용하여 클래스를 확장할 수 있다. 확장한 클래스는 원 클래스에 정의된 속성 및 메서드를 모두 갖고 있으며 추가로 얼마든지 생성할 수 있다. 만약 자식 클래스에서 부모 클래스 생성자를 호출하려면 super() 키워드를 사용한다.

getter, setter

private 접근 제한을 가진 속성은 외부에서 접근할 수 없어 일반적으로 getter, setter를 사용하여 값을 대입하고 호출할 수 있도록 한다.

class Person {
  private name:string;
  constructor(name:string){
    this.name = name;
  }
  get getName() {
    // 추가 로직 작성 가능
    return this.name;
  }
  set setName(name:string) {
    this.name = name;
  }
}

const p1 = new Person("1000yj");

console.log(p1.getName); 
p1.setName = "yj 1000";

get, set 키워드를 통해 메서드를 정의할 수 있으며 메서드의 이름은 마음대로 설정해도 된다. 다만 코드를 보면 알 수 있듯이 getter, setter는 메서드를 호출하듯이 ()를 붙여 호출하지 않고 일반적인 속성처럼 호출한다.

static

인스턴스에 국한되지 않고 클래스만으로 접근할 수 있도록 할 때 사용한다. static한 요소(속성, 메서드 둘다 가능)는 클래스에 존재하므로 인스턴스 함수나 인스턴스 변수에 접근할 수 없다. 호출할 때는 클래스명에 점을 찍어 호출한다.

추상 클래스

abstract 키워드를 붙여 함수의 구현을 자식 클래스에 강제하도록 하는 방법이다.

abstract describe():void;

위와 같이 함수의 구현부를 생략하고 리턴하는 자료형만 명시해준다. 만약 클래스 내부에 추상 메서드가 존재한다면 해당 클래스는 반드시 추상 클래스가 되어야 한다. (클래스 앞에 abstract 키워드 붙여야 함)

추상 클래스는 불완전하므로 객체를 만들 수 없다

interface

interface IPerson {
  name:string;
  greet():void;
}

객체의 구조를 설계할 때 사용한다. type 과 사용이 비슷하나, 약간 다르다.

• type : union 등 더 유연하게 사용이 가능
• interface : 반드시 객체의 구조 정의에 사용 (변수의 자료형으로 사용도 가능), 클래스에서 다중 구현이 가능 (implements 키워드 사용), 서로 다른 클래스 간 기능 공유 시 사용하면 유용

interface IPerson {
  name:string;
  greet():void;
}
class Person implements IPerson {
  constructor(name:string){
    this.name = name;
  }
  greet() => console.log("Hello " + this.name);
}

let p1: IPerson; // 타입으로 사용 가능
p1 = new Person("1000yj");
p1.greet();

인터페이스 간 상속 지원

인터페이스는 다른 인터페이스를 확장(extends)할 수 있다. 인터페이스는 클래스에서는 지원하지 않던 다중 상속이 가능하다.

custom function type

// type addFn = (a:number, b:number) => number;
interface addFn {
  (a:number, b:number): number;
}

let add: addFn;
add = (n1:number, n2:number) => n1+n2;

type 키워드를 통해 함수의 구조를 전달했던 것처럼 익명함수를 인터페이스 내에 정의하는 경우 함수의 구조를 전달하는 목적으로 사용할 수 있다.

optional

메소드이름 / 속성 뒤에 ?를 붙이면 해당 값이 있어도 없어도 괜찮다는 것을 알려준다. (옵션) 보다 유연하게 프로그래밍이 가능해진다는 장점이 있다.

interface -> js?

인터페이스 관련 코드는 .ts 파일에서만 존재하며 변환된 .js 파일에는 존재하지 않는다. 순수하게 ts에서만 개발, 컴파일 시 유용하게 사용되는 기능이다.