minstudio

인터페이스(Interface) 완벽 가이드

객체가 반드시 가져야 할 속성과 타입들을 명시해 놓은 "건축 설계도" 혹은 "계약서"입니다. 실무에서 가장 많이, 가장 중요하게 사용되는 개념입니다.

📝 인터페이스 계약서 (설계도) User 설계도 interface User { id: number; ✔️ 필수 (숫자) name: string; ✔️ 필수 (문자열) age?: number; ❔ 선택 (있거나 없거나) } 
// 객체의 "설계도" 역할을 하는 인터페이스
interface User {
    id: number;
    name: string;
    email: string;
}

// 설계도에 맞게 객체 생성 (항목이 하나라도 빠지면 에러!)
const myUser: User = {
    id: 1,
    name: "Minstudio",
    email: "test@test.com"
    // password: "123" // ❌ 설계도에 없는 값이 들어가면 에러!
};

// 함수의 파라미터로 설계도 통째로 넘기기
function sendEmail(user: User) {
    console.log(`${user.name}에게 이메일 발송`);
}


인터페이스는 단순히 틀을 잡는 것을 넘어, 비밀번호나 API 키처럼 해킹당하면 안 되는 중요한 값을 못 바꾸게 잠그거나(readonly), 사용자의 선택적 입력값(?)을 유연하게 처리하는 강력한 기능을 제공합니다.

🔒 인터페이스 심화 무기들 🔒 readonly (읽기 전용) readonly apiKey: string; 한 번 값이 들어가면 영구적으로 수정 불가 ❓ ? (선택적 프로퍼티) avatarUrl?: string; 해당 값이 있을 수도 있고 없을 수도 있음 
interface Config {
    // 1. 읽기 전용 (readonly): 생성할 때 1번만 값 설정 가능, 이후 수정 절대 금지!
    readonly apiKey: string;
    
    // 2. 선택적 속성 (?): 있어도 되고 없어도 되는 값
    description?: string;
    
    // 3. 인덱스 시그니처: 속성 이름은 모르겠지만, 어쨌든 전부 (문자열: 문자열) 구조일 때
    [key: string]: string;
}

const dbConfig: Config = {
    apiKey: "A1B2C3D4", // 처음에 세팅
    host: "localhost",  // 인덱스 시그니처 덕분에 아무 이름이나 추가 가능
    port: "3306"        // 문자열이어야 함
};

// dbConfig.apiKey = "XYZ"; // ❌ 에러! readonly는 수정 불가능!
인터페이스(Interface) 완벽 가이드 | Minstudio