[패캠] 타입스크립트 문법 - 인터페이스 호출 시그니처 (Call Signature) (8/20)

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

08. 인터페이스 - 함수 타입

---

• 함수 타입: 호출 시그니처(Call Signature)

함수의 경우 타입을 지정할 때 소괄호 사이에 매개변수를 추가할 수 있고, 반환(return) 값의 타입을 지정해 줄 수 있다. 아래 GetName이라는 인터페이스를 통해서 소괄호(())를 작성해서 내용을 쓰기 시작하는 함수 타입 지정방식을 호출 시그니처 문법이라고 이야기 한다.

interface GetName {
	(message: string): string
}
interface User {
    name: string
    age : number
    getName: GetName
}

const heropy: User = {
    name: 'Heropy',
    age: 85,
    getName(message: string) {
        console.log(message)
        return this.name
    }
}
heropy.getName('Hello~')

함수를 만들면 호출을 해야 하는데, 소괄호를 사용하여 호출할 수 있는 함수에 타입을 지정하는 문법을 호출 시그니처라고 한다. 이런 방식으로 만든 인터페이스로 함수 타입을 지정할 수 있다.

 

인터페이스를 통해서 함수의 타입을 왜 만들어야 될까?

이름이 있다는 것은 이름을 가지고 재사용 할 수 있다는 것이다. GetName을 한번 만들었으면 GetName과 동일한 구조의 함수가 있을 때 그 타입을 똑같이 지정해 줄 수 있다. 만약 GetName 이라는 인터페이스를 딱 한번만 사용하고 재사용할 필요가 없다고 한다면 별도의 인터페이스로 만들 필요없이 유저 속성 부분의 타입을 바로 함수의 타입으로 지정해줄 수 있다.

//interface GetName {
//	(message: string): string
//}
interface User {
    name: string
    age : number
    getName: (message: string) => string
}

const heropy: User = {
    name: 'Heropy',
    age: 85,
    getName(message: string) {
        console.log(message)
        return this.name
    }
}
heropy.getName('Hello~')

인터페이스의 속성을 정의할 때 그 속성이 함수(메소드)라면 화살표 함수처럼 타입을 지정하는 방식을 쓸 수 있다.

 

함수(메소드)를 지정하는 타입을 재사용해야 된다면 이름이 필요하고, 첫 번째 예시와 같이 인터페이스를 통해서 호출 시그니처 방식으로 함수의 타입을 지정할 수 있다. 매개변수의 이름은 똑같지 않아도 된다. 매개변수의 개수와 타입만 일치하면 전혀 문제가 되지 않는다.

interface GetName {
    (param: string): string
    // (param: string, two: string): string
}

interface User {
    name: string
    age : number
    getName: GetName
}

const heropy: User = {
    name: 'Heropy',
    age: 85,
    getName(message: string) { // 매개변수 이름은 달라도 개수는 같아야 함
        console.log(message)
        return this.name
    }
}

heropy.getName('Hello~')

 

매개변수의 개수가 다르면 함수를 호출하는 부분에서 에러가 발생한다.

매개변수의 개수가 달라 발생한 Error

다시 말해, 매개변수(파라미터)의 이름은 중요하지 않지만 타입과 개수는 중요하다는 사실을 기억하자.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY