[typescript] interface

1. interface

typescript에서 함수 인자를 전달하는 방법

• 객체 내 인자를 전달
• 전달하고자 하는 인자의 type과 전달받는(함수) 인자의 type이 일치하지 않을 때

const person = {
    name: "LEE HYO KYUN",
    age: 15,
    job: "ENGINEER"
}

위에서 생성한 person 객체는 내부에 name, age, job 인자를 가지고 있다.

const foo = (name: string, age: number, job?: string) => {
    return `HELLO ${name}(_${age})! How are your ${job} going?`
}

foo("LEE HYO KYUN", 15, "Engineer")

export {}

foo함수는 name, age, job 인자를 전달받아 문자열을 출력해준다.

이 상태에서 바로 person 객체의 인자를 전달할 수는 없으나, interface를 활용하면 foo함수에 각각의 인자를 전달할 수 있다.

interface는 typescript에서만 활용가능한 구조이다.

interface Human {
    name: string,
    age: number,
    job: string
}

const person = {
    name: "LEE HYO KYUN",
    age: 15,
    job: "ENGINEER"
}

const foo = (Human) => {
    return `HELLO ${Human.name}(_${Human.age})! How are your ${Human.job} going?`
}

console.log(foo(person))

export {}

interface를 활용하면 마치 class처럼 객체 내부를 접근 및 활용할 수 있게 된다.

interface logic을 살펴보면

• interface를 통해 함수로 전달할 인자를 정의해준다(Human).
• 실제로 함수에 전달할 객체/인자를 선언한다(person).
• 함수 각각의 인자를 interface로 정의해준 객체(=type형태) 하나의 type으로 전환해주고, 각 인자에 접근하여 변수처럼 활용한다.
• 전달해주는 인자는, 각각의 인자가 아닌 해당 인자들을 보유하고 있는 객체변수가 된다.

2. 컴파일 이후

interface는 컴파일에 반영되지 않는다.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const person = {
    name: "LEE HYO KYUN",
    age: 15,
    job: "ENGINEER"
};
const foo = (Human) => {
    return `HELLO ${Human.name}(_${Human.age})! How are your ${Human.job} going?`;
};
console.log(foo(person));
//# sourceMappingURL=index.js.map

위 코드는 컴파일을 진행한 index.js의 코드이며, interface는 컴파일에 반영되지 않았음을 알 수 있다.

3. interface의 활용성

전달해주는 type을 대표화하여, 인자 부분만 다르게 하여 활용할 수 있다.

"typescript" 단어처럼, 대표되는 type을 정의해주고 인자만 다르게 하여 함수를 활용할 수 있다.

이후 해당 함수를 사용할 때는 각각의 인자를 번거롭게 전달해주지 않아도 되고, 객체나 배열 등 component를 일괄적으로 전달하여 코드의 간결함 등을 높일 수 있다.

쉽게 말하면 위 코드처럼, 번거로운 작업을 간결히 진행할 수 있다.