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

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

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

실행해보기

아래의 코드는 Minstudio의 엔진을 통해 브라우저 상에서 타입스크립트로 변환되어 실행된 결과입니다. 하단의 Developer Console 창에서 console.log의 출력을 직접 확인해보세요!

// 객체의 "설계도" 역할을 하는 인터페이스
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}에게 이메일 발송`);
}

🔒 localhost:8000/preview

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는 수정 불가능!

// 1. 인터페이스 정의
interface User {
    id: number;
    name: string;
    isActive: boolean;
}

// 2. 인터페이스를 타입으로 사용하여 객체 생성
const newUser: User = {
    id: 1,
    name: "Minstudio",
    isActive: true
};

console.log("✅ 인터페이스 적용 완료!");
console.log(`👤 이름: ${newUser.name}, 활성 상태: ${newUser.isActive}`);

🔒 localhost:8000/preview

// 객체의 "설계도" 역할을 하는 인터페이스 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}에게 이메일 발송`); }

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는 수정 불가능!

// 1. 인터페이스 정의 interface User { id: number; name: string; isActive: boolean; } // 2. 인터페이스를 타입으로 사용하여 객체 생성 const newUser: User = { id: 1, name: "Minstudio", isActive: true }; console.log("✅ 인터페이스 적용 완료!"); console.log(`👤 이름: ${newUser.name}, 활성 상태: ${newUser.isActive}`);