Typescript의 Interface 2 (클래스와 function)

class

ts에서 인터페이스를 이용하여 클래스를 구현하는 방법은 다음과 같다. 인터페이스는 클래스가 가져야 하는 속성과 메서드를 정의하고, 클래스가 이를 구현하여 해당 인터페이스의 형식을 따르도록 한다.

interface Animal {
	name: string;
  	species: string;
}

class Bird implements Animal {
    name: string;
    species: string;
	
  // contructor에서 초기화를 해줘야한다.
    constructor(name: string, species: string) {
        this.name = name;
        this.species = species;
    }
}

// new 키워드를 붙여 클래스를 초기값과 함께 생성한다.
const bird = new Bird('Karis', 'EAGLE');

js class와 ts의 calss의 차이점은, ts는 implements 키워드를 통해 작성된 타입의 정의를 그대로 만족해야한다는 점이다. 이 방법은 객체지향 프로그래밍 (OOP)에서 운영하는 방식이다. 이를 정확이 이해하며 사용해야 한다.

ts가 oop 적인 class의 형식을 따른다. 그렇다면 js는 어떤 특성을 따르는 것일까?

js의 es5문법까지는 class가 존재하지 않았다. es6이후 부터 도입을 했지만, 그렇다고 js가 OOP 처럼 클래스 기반 언어로 변형된 것은 아니었다. 가장 큰 차이는, js에서의 class는 일반적인 class의 의미보단 "조금 더 특별한 함수" 라는 의미에 더 가깝다. OOP 에서의 class에서 js와 가장 가까운것은, js의 class가 아닌 객체(object)이다.

js에서의 class는 형식을 위한 개체가 아닌, 명료하게 틀을 구성하기 위한 일종의 템플릿에 가깝다. 즉, 기존의 프토토타입 기반 패턴에 단지 oop스러운 문법 스타일이 추가만 된것으로, 이렇게 쉽게 읽기 위해 추가된 문법을 문법적 설탕 (Syntatic Sugar) 라고 부르기도 한다.

react에서 ts를 통한 정의는 이미 정의된 interface 를 참조하며 타이핑한다.
예시로, HTMLDivElement는 HTMLElement를 extends 한다. 이러한 정보들은 lib.dom.d.ts 파일에 정의되어있다.

클래스가 인터페이스를 구현하면, 해당 인터페이스를 따르는 모든 객체와 클래스가 해당 인터페이스의 메서드를 구현하고 있음을 보장한다. 이는 코드 유지보수성을 높이고, 객체 간의 일관된 동작을 유지하는데 도움이 된다.

function interface

function을 interface로 타이핑하여 접목시킬 수 있다. 들어올 인자의 타입과, 리턴 타입까지 지정할 수 있다.

// 아무것도 반환하지 않는 함수는 void 타입으로 지정해준다.
interface HelloPerson {
    (name: string, age: number): void;
}

const printHello: HelloPerson = (name, age) => {
    console.log(`안녕하세요! ${name} 입니다!`);
}

// 리턴값이 있는 함수는 리턴될 type으로 지정해준다.
interface MathFunction {
  (x: number, y: number): number;
}

const add: MathFunction = (x, y) => {
  return x + y;
};

사용 목적은 보통 컴파일 타임에 에러를 발생시켜서 코드를 문제없이 만드는 것이다. 그래서 인터페이스를 만들 때, 어떤 property가 한번 만들어지고 바뀌지 않을 값이라면 항상 readonly를 사용하는 습관을 들이는게 중요하다.