[Typescript] 인터페이스 / 선택적 프로퍼티

서론

function getInfo(id : number) : {
    stdId : number;
    stdName : string;
    age : number;
    gender : string;
    course : string;
    completed : Boolean;
}
{
    return {
        stdId : id,
        stdName : 'lee',
        age : 20,
        gender : 'female',
        course : 'javascript',
        completed : true
    };
}

이 함수의 반환 타입 자체를 

{
    stdId : number;
    stdName : string;
    age : number;
    gender : string;
    course : string;
    completed : Boolean;
}

이 object로 이해할 수 있습니다. 그런데 이 코드 자체가 조금 복잡해 보일 수 있습니다. 

이를 간단하게 하기위해 '인터페이스'라는 개념을 사용해보려고 합니다. 

 

인터페이스

: 사용자가 정의한 타입, 데이터 타입으로 사용 가능합니다. 

• 선택적 프로퍼티 : 속성값 뒤에 ? 붙여줌
• 인터페이스 내에서 메소드 선언 가능 -> 반드시 ⭐️ 메소드 오버라이딩
  • 인터페이스 안에서는 선언(이름만 있음)만 되어 있고 구현(실제 동작)이 없습니다. 따라서 이 인터페이스를 상속받은(구현한) 클래스는 그 메소드가 어떻게 동작할지 반드시 직접 작성해줘야한다는 뜻!
• 인터페이스를 클래스에 상속할 수 있음  -> extends개념 X, 새롭게 구현하는 개념이에요!

interface Student{
    stdId : number;
    stdName : string;
    age : number;
    gender : string;
    course : string;
    completed : Boolean;
}

function getInfo(id : number) : Student{
    return {
        stdId : id,
        stdName : 'lee',
        age : 20,
        gender : 'female',
        course : 'javascript',
        completed : true
    };
}

console.log(getInfo(5678));

 

이렇게 하면 함수의 반환값을 Student interface 구조로 받아들인다는 걸 쉽게 인지할 수 있습니다. 

( + 화면을 랜더링 할 때에는 interface 코드가 필요없기 때문에 app.js로 컴파일될때에는 아예 사라진걸 볼 수 있습니다. 인터페이스의 목적은 타입스크립트에 더 많은 정보를 주기 위합니다.)

 

여기서 반환하는 값과 Student의 구조가 정확히 맞아야지 오류없이 진행됩니다. 

 

🤔 그러면 정의된 프로퍼티에 없어도 되는 경우에는?

선택적 프로퍼티

인터페이스 정의 시, 프로퍼티에 ?을 추가하면됩니다. 

interface Student{
    stdId : number;
    stdName : string;
    age? : number;
    gender : string;
    course : string;
    completed : Boolean;
}

function getInfo(id : number) : Student{
    return {
        stdId : id,
        stdName : 'lee',
        //age : 20,
        gender : 'female',
        course : 'javascript',
        completed : true
    };
}

console.log(getInfo(5678));

 

함수 또한 선택적으로 매개변수를 받아들일 수도 있습니다. 

//함수의 데이터 타입 명시(매개변수, 리턴타입)
function Plus(a : number, b? : number) : number{
    return a + b;
}

 

+ 인터페이스를 클래스에 상속

interface Student{
    stdId : number;
    stdName? : string;
    age? : number;
    gender? : string;
    course? : string;
    completed? : Boolean;
    setName : (name : string) => void; //setName(name : string) : void;
    getName : () => string;
}

//Student 상속
class MyStudent implements Student{
    stdId = 12345;
    stdName = 'kim';
    age = 23;
    gender ='male';
    course = 'node.js';
    completed = true;

    setName(name : string) : void{
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName)
    }
    getName() : string{
        return "kim";
    }
}

const myInstance = new MyStudent();
myInstance.setName('엘리스');