타입 인터페이스 (Interface)

인터페이스 (Interface)

인터페이스란 객체 데이터의 타입을 지정하는 용도로 사용되는 문법입니다. 인터페이스는 객체의 구조를 정의하는 형태로 사용되며, 객체의 타입을 지정하는 역할을 합니다.

// 인터페이스 정의 (대문자로 시작)
interface User {
    name: string;
    age: number;
    isAdult: boolean;
}

const user1: User = {
    name: '김겨울',
    age: 22,
    isAdult: true,
};

const user2: User = {
    name: '김가을',
    age: 2,
    // `isAdult` 프로퍼티가 누락되어 타입 오류가 발생합니다.
    // isAdult: false,
};

위 코드에서 user2 객체는 isAdult 프로퍼티가 누락되어 타입 오류가 발생합니다.

선택적 프로퍼티 (Optional Properties)

선택적으로 사용할 수 있는 프로퍼티를 정의할 때는 프로퍼티 이름 뒤에 ? 기호를 붙입니다.

interface User {
    name: string;
    age: number;
    isAdult?: boolean; // ? 기호를 붙여 선택적 프로퍼티로 지정
}

const user1: User = {
    name: '김겨울',
    age: 22,
    isAdult: true,
};

const user2: User = {
    name: '김가을',
    age: 2,
    // `isAdult` 프로퍼티가 누락되어도 타입 오류가 발생하지 않습니다.
};

읽기 전용 프로퍼티 (Readonly Properties)

읽기 전용 프로퍼티를 정의할 때는 프로퍼티 이름 앞에 readonly 키워드를 붙입니다.

interface User {
    readonly name: string; // readonly 키워드를 붙여 읽기 전용 프로퍼티로 지정
    age: number;
    isAdult?: boolean;
}

const user1: User = {
    name: '김겨울',
    age: 22,
    isAdult: true,
};

user1.age = 30; // age 프로퍼티는 읽기/쓰기 모두 가능
user1.name = '홍길동'; // name 프로퍼티는 읽기 전용이므로 오류 발생

const user2: User = {
    name: '김가을',
    age: 2,
};

함수 인터페이스 (Function Interface) - 호출 시그니처 (Call Signature)

함수 인터페이스는 함수의 타입을 지정하는 용도로 사용됩니다. 함수 인터페이스는 함수의 매개변수와 반환 타입을 정의하는 형태로 사용됩니다.

interface GetName {
    (param: string): string; // 매개변수와 반환 타입을 정의
    // 매개변수의 이름은 상관없으며, 반환 타입과 갯수만 일치하면 됩니다.
}

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

const user1: User = {
    name: '김가을',
    age: 2,
    getName(name: string) {
        return `내 이름은 ${name}입니다.`;
    },
};

console.log(user1.getName);

인덱스 가능 타입 (Indexable Types) - 인덱스 시그니처 (Index Signature)

인덱스 가능 타입은 객체의 프로퍼티 이름이 동적으로 변하는 경우 사용됩니다. 인덱스 시그니처는 객체의 프로퍼티 이름과 값의 타입을 정의하는 형태로 사용됩니다.

interface animals {
    [item: number]: string; // 인덱스 시그니처
    // 위와 같이 number로 지정하면 배열처럼 사용할 수 있다.
}

const arr: animals = ['dog', 'cat', 'fish'];
console.log(arr[0]); // 'dog'
console.log(arr[1]); // 'cat'
console.log(arr[2]); // 'fish'

interface User {
    [index: string]: unknown; // 인덱스 시그니처
    // unknown은 모든 타입을 의미한다.
}

const obj: User = {
    name: '김가을',
    age: '2',
};

console.log(obj['name']); // '김가을'
console.log(obj['age']); // '2'

obj['name'] = '김봄'; // '김가을' -> '김봄'
obj['email'] = 'eehd@mail.com'; // 'undefined' -> 'eehd@mail.com'
console.log(obj);

확장 인터페이스 (Extending Interfaces)

인터페이스는 다른 인터페이스를 확장할 수 있습니다. 인터페이스 확장은 기존 인터페이스의 프로퍼티를 상속받아 사용할 수 있습니다.

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

interface Admin extends User {
    role: string;
}

const user: User = {
    name: '김가을',
    age: 2,
    // role: '사용자', // User 인터페이스에는 role 프로퍼티가 없어 타입 오류 발생
};

const admin: Admin = {
    name: '김겨울',
    age: 22,
    role: '관리자',
};

상속 인터페이스 (Interface Inheritance)

인터페이스는 클래스를 상속할 수 있습니다. 인터페이스 상속은 클래스의 프로퍼티를 상속받아 사용할 수 있습니다.

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

// 위 인터페이스를 상속받아 새로운 인터페이스를 만들 수 있다.
interface User {
    role: string;
    // 후속 인터페이스에서 동일한 프로퍼티를 재정의해야 합니다.
}

const user1: User = {
    name: '김가을',
    age: 2,
    role: '사용자',
};