Typescript : 인터페이스 (Interface)

인터페이스 (Interface)

• 객체를 구조화
• 실제 구현이 들어있지 않고 상호 간에 정의한 조건이나 규약을 의미
  • 객체의 스펙(속성과 속성의 타입)
  • 함수의 파라미터
  • 함수의 스펙(파라미터, 반환 타입 등)
  • 배열과 객체를 접근하는 방식
  • 클래스
• 타입스크립트에 명시한 인터페이스는 컴파일 후 자바스크립트에 표시되지 않음
  • 타입스크립트로부터 다양한 정보를 제공받아 코드를 작성하는데 도움을 받는 것이므로 굳이 자바스크립트에 표시할 필요는 없기 때문
    
       
    
  • < 타입스크립트 코드 >                                                                         < 컴파일된 자바스크립트 코드 >

 

인터페이스 사용 예시 1

• Student 인터페이스 생성

interface Student {
    readonly studentID: number;
    studentName: string;
    age: number;
    gender: string;
    subject: string;
    courseCompleted: boolean;
}

 

• 반환 타입을 Student로 지정( :Student )
• 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제됨
• 즉, 반환 타입이 Student 인터페이스이므로 이것의 인터페이스 구조(요소=프로퍼티)에 맞게 return 값을 지정

function getStudentDetails(studentID: number)
: Student{
    return {
        studentID: 123456,
        studentName: 'Mark',
        age: 20,
        gender: 'male',
        subject: 'Node JS',
        courseCompleted: true
    }; 
}

 

인터페이스 사용 예시 2

• 인터페이스 요소를 선택적(Optional)으로 사용하고 싶을 때 프로퍼티 뒤에 ?를 붙임

interface Student {
    readonly studentID: number;
    studentName: string;
    age?: number; // 있어도 되고 없어도 됨
    gender: string;
    subject: string;
    courseCompleted: boolean;
}

 

• age를 입력하지 않아도 에러가 발생되지 않음

function getStudentDetails(studentID: number)
: Student{
    return {
        studentID: 123456,
        studentName: 'Mark',
        //age: 20,
        gender: 'male',
        subject: 'Node JS',
        courseCompleted: true
    }; 
}

 

• ? 표시를 안 하고 위와 같이 사용했을 때의 에러 문구

인터페이스 사용예시 3

• object인 student1을 매개변수로 넣는 것도 가능

let student1 = {
    studentID: 121212,
    studentName: 'Jane',
    age: 30,
    gender: 'female',
    subject: 'Mongo DB',
    courseCompleted: false
}

function saveStudentDetails (student: Student): void{
}

saveStudentDetails(student1)

 

메소드(Method)

• 메소드 작성 방식은 두 가지 (위 아래 어느 것을 사용해도 상관없음)

interface Student {
    readonly studentID: number;
    studentName: string;
    age?: number; // 있어도 되고 없어도 됨
    gender: string;
    subject: string;
    courseCompleted: boolean;

    // 메소드 이름 : (매개변수 이름 : 매개변수 타입) => 리턴 타입
    addComment (comment: string): string; // (1)
    addComment: (comment: string) => string; // (2)
}

 

• 메소드도 선택적으로 사용할 때 ?를 붙임

addComment?: (comment: string) => string;

 

Readonly

• 읽기 전용 프로퍼티로 객체 생성 시 할당된 프로퍼티의 값을 바꿀 수 없음

interface Student {
    readonly studentID: number; // 읽기 전용
    studentName: string;
    age?: number;
    gender: string;
    subject: string;
    courseCompleted: boolean;
    //addComment (comment: string): string;
    addComment?: (comment: string) => string;
}

function saveStudentDetails (student: Student): void{
    student.studentID = 112233; // 에러 
}

실습 코드 : https://github.com/cijbest/TIL/tree/master/TypeScript/%EC%8B%A4%EC%8A%B5/Day_4
공부 영상 출처 : [땅콩코딩] https://youtu.be/jlzvXcDGZUU