TypeScript에 대한 간단한 정리 - 05. 인터페이스 - 기본 , 함수 타입

타입스크립트에서 인터페이스(Interface)란 객체의 구조를 정의하는 타입 시스템의 일부이다.

인터페이스를 통해서 객체가 가질 속성과 메서드의 타입을 지정할 수 있도록 한다.

 

인터페이스를 구성하는 방법은 

interface 인터페이스명 {
    속성명1: 타입1;
    속성명2: 타입2;
    . . . .
}

과 같이 선언한다.

여기서 해당 속성은 어떤 타입으로 선언되어야 하는지에 대한 설정이 포함되어 있다.

그리고 보통 인터페이스 명의 첫글자는 대문자로 파스칼 케이스로 선언을 해준다.

 

실 사용의 예시로 보자면 

이렇게 단순 속성 뿐만 아니라 함수 속성에 대해서도 타입을 지정할 수 있다.

이 객체를 사용하는 방법은 

const 변수명 : 인터페이스명 = {
    속성명1: (속성1 타입에 맞는) 값1,
    속성명2: (속성2 타입에 맞는) 값2,
    속성명3: (속성3 타입에 맞는) 값3
    . . . .
}

과 같이 사용한다.

여기서 만약 속성이 함수가 있을 경우에는 

const 변수명 : 인터페이스명 = {
    함수명: function () {
    	return (함수 타입에 맞는) 반환값;
    },
    . . . .
}

와 같이 사용하면 된다.

이 함수의 값 부분에 

const 변수명 : 인터페이스명 = {
    함수명: () => {
    	return (함수 타입에 맞는) 반환값;
    },
    . . . .
}

과 같이 사용해도 오류는 나지 않으나 이렇게 사용하면 함수내부에서 this를 사용할때 global로 this를 찾기 때문에 사용할때 문제가 있다.

 

이건 일반 함수 표현식을 사용하면 해결이 된다.

 

이는 () => {} 화살표 함수 표현식의 경우는 정적으로 바인딩 되기 때문에 this가 정의된 시점에 해당 this가 바인딩 된다는 것이다.

그렇기에 park이라는 Persion타입의 객체를 생성하는 생성 문 안에 있으나 this는 실행 이전에 참조하기에 그 객체가 아니라 그 상위 객체(이미 인스턴스화 되어 있는 ) window 객체를 바인딩 하게 되는 것이다.

 

그러나 일반 함수의 경우는 this가 동적으로 바인딩 되기 때문에 정의 시점이 아니라 호출 시점에 바인딩 되어 호출 하는 객체를 this로 바인딩 시키기에 this를 사용할 수 있게된다.

 

그니까 그냥 일반 함수 호출방식을 쓰자.

 

여기서 일반 함수를 사용하는 방식은 두가지가 있는데 

이렇게 사용하는 방법과 

이렇게 사용하는 방법으로 나뉜다.

바로 위에 사용하는 방식은 자바스크립트에서 ES6이후부터 도입된 방식으로 가독성이 좋고 간단한 방식으로 알려져 있다.

이는 큰 차이는 없으니 사용하고 싶은대로 사용하면 될것 같다.

 

선택적 속성

인터페이스에 속성이 설정되어 있다면 객체를 생성할때 모든 속성이 존재해야만 한다.

예를 들어서 

이렇게 인터페이스가 정의되어 있다면 생성하는 객체인 Park에는 

이렇게 모든 속성에 대한 값을 넣어줘야만 한다.

만약 속성의 일부를 넣지 않고 선언한다면 

이렇게 컴파일 에러가 발생한다

 

여기서 우리가 선택적으로 생성할 수 도 안 생성할 수 도 있는 속성을 설정할 수 있는데 이 때 사용하는 연산자가 ? 연산자이다.

? 연산자는 속성을 생성하는 인터페이스의 속성 타입을 지정하는 : 연산자의 앞에 붙여주면

해당 속성이 생성하는 객체에 선언되지 않더라도 컴파일 에러를 발생시키지 않는다.

 

읽기전용 속성

인터페이스의 속성명 앞에 readonly라는 키워드를 붙여주면 

해당 속성의 경우는 객체로 생성했을때 그 객체의 값을 변경시킬 수 없게 된다.

이렇게 객체를 생성하고 나서 name의 값을 변경시키고자 한다면 

이렇게 컴파일 에러를 발생시킨다.

 

인터페이스 속성의 타입: 함수 타입 (호출 시그니처)

호출 시그니처란 객체를 함수처럼 호출할 수 있도록 정의하는 방법이다.

인터페이스를 정의할 때, 함수의 매개변수와 반환 타입을 지정하여 호출 가능한 형태를 명시할 수 있다.

 

호출 시그니처의 기본적인 원형은 

interface 호출시그니처명 {
    ( 매개변수명 : 매개변수타입 ) : 호출 시그니처 타입 
}

과 같이 구성되어 있으며 예시로 

interface CallSignature {
    (arg : string) : number
}

와 같이 생성해줄 수 있다.

 

이렇게 생성한 인터페이스를 사용해서 저 속성을 구현하는 객체는 문자열을 매개변수로 받아야 하고 그 속성(함수)의 반환값이 number타입이여만 한다.

이렇게 구성되어 있다면 

이를 받아 사용할 때에는 

이렇게 바로 

이렇게 변수에 함수형태로 넣어주는 사용법을 많이 사용한다.

 

이 호출 시그니처를 인터페이스에 사용하는 방법도 있는데 이 때는 

이렇게 속성의 타입으로 설정해주고 나서 객체를 선언 할때  

이렇게 함수를 받듯이 사용하면 된다.

 

실 예를 하나 만들어보면 

Clothes라는 인터페이스를 사용해서 호출 시그니처를 설정해주고 

body의 타입으로 Clothes를 받아주면 

객체를 선언할 때 

이렇게 선언해주면 

이렇게 사용이 된다.

 

이 호출 시그니처를 사용하는 이유는 인터페이스를 사용하기에 이름을 붙일 수 있기 때문에 재활용이 가능하다는 점이다.

 

물론 저 매개변수 설정을 여러개 하면 여러개의 매개변수를 받는 함수를 생성하는것도 가능하다.