인터페이스 (interface)

인터페이스 (interface)

1. 인터페이스

• TypeScript의 인터페이스에 대해 알아봅시다.
• 인터페이스란? 코드의 구조를 정의하는데 사용되는 도구입니다.
• 인터페이스를 사용하면, 객체의 형태, 메서드, 속성 등을 명시적으로 정의할 수 있으며, 이를 통해 코드의 가독성을 높이고 유지 보수성을 향상시킬 수 있습니다.

2. 사용방법

• 처음엔 다음과 같이 입력하여, 정의하여 줍니다.

interface User {
    name: string;
    age: number;
}

 

• 그 후 객체를 선언하고 출력해봅시다.

interface User {
    name : string;
    age : number;
}

let user : User = {
    name : 'Kim',
    age : 30
}

console.log(user.age);

 

• 속성 뒤에 ?를 넣게 되면 선택사항으로 사용할 수 있습니다.
• 다음과 같이 입력하면, user에 gender를 정의해주지 않아 오류가 발생해야 하지만, 인터페이스에서 gender?로 선택 옵션으로 정의하였기 때문에, 무조건 정의해주지 않아도 됩니다.  

interface User {
    name: string;
    age: number;
    gender?: string;
}

let user: User = {
    name: 'Kim',
    age: 30
}

user.gender = "male";

 

• 이번에는 값을 변경할 수 없게끔 만들어 보겠습니다.
• 속성 앞에 readonly를 입력하면, 한번 정해진 값은 변경할 수 없습니다.

interface User {
    name: string;
    age: number;
    gender?: string;
    readonly year: number;
}

let user: User = {
    name: 'Kim',
    age: 30,
    year: 2002,
}

user.gender = "male";
// user.year = 1988; (오류발생)

 

• 이번에는 학년 및 성적을 지정해봅시다.
• 4학년까지 있어서 일일히 입력하기 쉽지 않으니, 대괄호를 사용하여 입력할 수 있습니다.

interface User {
    name: string;
    age: number;
    gender?: string;
    readonly year: number;
    [grade: number]: string;
}

let user: User = {
    name: 'Kim',
    age: 30,
    year: 2002,
    1: 'A',
    2: 'B'
}

 

• 여기서 type 키워드를 사용하여, 새로운 타입을 정의할 수 있습니다.

// 새로운 타입 정의
type Score = 'A' | 'B' | 'C' | 'F';

interface User {
    name: string;
    age: number;
    gender?: string;
    readonly year: number;
    [grade: number]: Score;
}

let user: User = {
    name: 'Kim',
    age: 30,
    year: 2002,
    1: 'A',
    2: 'B'
}

 

3. 예시

• 인터페이스를 사용해봅시다.
• 예시 1

    → 인터페이스를 이용하여 숫자를 더할 수 있습니다.

interface Add {
    (num1: number, num2: number): number;
}

const add: Add = function (x, y) {
    return x + y;
}

add(10,20);

 

• 예시 2

    → 인터페이스를 이용하여 참, 거짓을 나타낼 수 있습니다.

interface IsAdult {
    (age: number): boolean;
}

const a: IsAdult = (age) => {
    return age > 19;
}

a(30) // true

 

4. 인터페이스로 클래스 정의하기

• 이번엔 인터페이스로 클래스를 정의해봅시다.

    → 이 때, constructor를 적용하여 나타낼 수 있습니다.

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color;
    wheels = 4;
    constructor(a: string) {
        this.color = a;
    }
    start() {
        console.log("go!");
    }
}

const b = new Bmw('green');
console.log(b);
b.start();

 

• 인터페이스는 extends를 사용하여, 확장도 가능합니다.

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

interface Benz extends Car {
    door: number;
    stop(): void;
}

const benz : Benz = {
    door: 4,
    stop() {
        console.log("stop!");
    },
    // 상속받는 속성까지 전부 입력해야 함
    color: "black",
    wheels: 4,
    start() { },
}

benz.stop();

 

• 다음과 같이 입력하여 두개를 동시에 확장도 가능합니다.

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

interface Toy {
    name: string;
}

interface ToyCar extends Car, Toy {
    price: number;
}

 

3. 정리하며

• 지금까지 TypeScript의 인터페이스에 대해 알아보았습니다.
• 다음 시간엔 TypeScript의 함수에 대해 알아보겠습니다.

함수 (function)

 

※ 코딩앙마님의 유튜브 강좌를 참고하였습니다.