[Typescript] 생성자의 타입을 표현하기 (feat. 생성자 시그니처)

[ 목차 ]
Introduction
먼저 간단한 클래스 작성
생성자의 타입 표현하기

 

Introduction

리액트를 사용하면서 클래스를 거의 사용하지 않고, 함수 위주로 사용했었는데요.

그래서인지, 생성자 함수를 타입으로 표현하는 방식이 너무 생소하게 다가왔습니다.

몇 가지 시행착오를 통해, 알아낸 바를 정리하고자 합니다.

 

 

 

먼저 간단한 클래스 작성

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

    getName() {
      return this.name;
    }

    getAge() {
      return this.age;
    }
  }

const person = new Person("Rabbit", 10);

person.getName(); // "Rabbit"
person.getAge(); // 10

// person 객체의 타입은?
type personType = typeof person; // Person

간단한 클래스를 작성했습니다.

Person 클래스를 이용해서 객체를 만들면, 그 객체의 타입은 Person을 가리킵니다.

 

 

 

다음은 DOM에서 제공하는 내장 객체를 한번 살펴보겠습니다.

그 중에서 FormData 객체의 타입을 살펴봅시다.

 

 

// 타입 선언
declare var FormData: {
    prototype: FormData;
    new(form?: HTMLFormElement): FormData;
};

// FormData 기본 사용법
const formData = new FormData();

formData.append('name', 'Rabbit');
formData.append('age', '10');

타입 선언을 보면 함수 시그니처(Call Signature) 앞에 new 가 붙은 것을 볼 수 있습니다.

이 문법이 생성자 시그니처(Construct Signature) 입니다.

 

 

생성자 시그니처를 이용해서 생성자의 타입을 표현해보겠습니다.

 

 

 

생성자의 타입 표현하기

// 클래스 Person
class Person {
	constructor(private name: string, private age: number) {}
}

// 두 가지 방식으로 생성자의 타입을 표현할 수 있습니다.
type PersonConstructor1 = new (name: string, age: number) => Person;
type PersonConstructor2 = { new (name: string, age: number): Person };

const p1: PersonConstructor1 = Person; // ok
const p2: PersonConstructor2 = Person; // ok

// 정상적으로 객체가 생성됨
const person1 = new p1("사람1", 11);
const person2 = new p2("사람2", 22);

위와 같이 생성자의 타입을 표현할 수 있는 방법이 두 가지가 있다는 것을 알게 됩니다.

 

1. 함수의 매개변수 앞에 new를 붙이기

2. 생성자 시그니처를 사용하기

 

 

 

 

참고

https://www.typescriptlang.org/docs/handbook/2/functions.html#construct-signatures

https://www.typescriptlang.org/docs/handbook/2/generics.html#using-class-types-in-generics