[TypeScript] 타입으로 사용되는 인터페이스(Interface)

자바에서 인터페이스라면 기능을 뺀 껍데기의 클레스이며 자식클래스에서 반드시 해당 기능들이 구현이 되어야하는 일종의 클래스로 사용이 되는데요.

타입스크립트에서는 어떻게 사용이 될까요??

 

function getStidentInfo(studentNumber: number): {
    studentNumber: number;
    studentName: string;
    age: number;
    gender: string;
} {
	return null;
}

이와 같이 학생 번호를 인자로 받는 함수의 리턴타입이 위의 object일때 너무 복잡하지 않나요??

이런 복잡한 코드를 좀더 보기 편하게 바꾸어 주기 위해 인터페이스를 사용합니다.

 

interface Student {
    studentNumber: number;
    studentName: string;
    age: number;
    gender: string;
};

function getStidentInfo(studentNumber: number): Student {
    return {
        studentNumber,
    	studentName: 'Cine',
    	age: 20,
    	gender: 'male',
    };
}

인터페이스를 작성할때는 interface라는 키워드 뒤에 해당 인터페이스의 이름을 지어주는데요.

일반적으로 함수에서는 함수 이름을 정할때 카멜표기법을 사용하여 첫글자는 소문자로 시작하고 이후 이어지는 단어를 대문자로 시작하는데 인터페이스의 이름은 대문자로 시작하는 파스칼표기법을 사용합니다.

다른 언어에서는 인터페이스이름을 지을때 interface의 i를 따서 이름앞에 i를 붙이는게 일반적인데 타입스크립트에서는 i를 붙이지 않는 네이밍 컨벤션을 채탱하고 있습니다.

 

위의 코드를 봤을때 인터페이스는 하나의 타입으로 사용이 가능합니다!

따라서 함수의 리턴타입을 인터페이스로 작성을 할 수 있는것이죠.

가독성이 많이 좋아지지 않았나요??

인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제됩니다.

위의 함수에서 return타입은 Student이지만 만약 'hello, World!' 와 같은 문자열을 리턴하려 한다면 에러가 발상하는 것이죠.

 

 

interface Student {
    studentNumber: number;
    studentName: string;
    age?: number;
    gender: string;
};

function getStidentInfo(studentNumber: number): Student {
    return {
        studentNumber,
    	studentName: 'Cine',
    	// age: 20,
    	gender: 'male',
	};
}

function saveStidentInfo(student: Student): void  {

}

saveStudnetInfo({
    studnetNumber: 123456,
    studentName: 'Cine02',
    age: 30,
    gender: 'female',
})

위의 코드에서는 saveStidentInfo함수에서 Student 인터페이스를 재사용함으로서 코드가 길어지는 것을 줄이고 있는데요.

이렇게 인터페이스를 사용하면 코드의 재사용도 용이해집니다.

saveStudentInfo함수안에 오브젝트를 인자로 넣어주는 함수여서 오브젝트를 넣어줬지만 오브젝트를 따로 만들어 놓고 인자로 넣는것도 가능합니다.

 

 

또한 메소드도 인터페이스 내에 정의할수 있습니다.

메소드는 객체내에서 선언된 함수를 말합니다.

interface Student {
    studentNo: number;
    studentName: string;
    addAge (comment: string): string;
    addGender: (comment: string) => string;
}

이처럼 addAge와 addGender처럼 두가지 방식이 있습니다.

두가지 같은 역할을 하지만 표현 방법만 조금 다릅니다.

 

또한 인터페이스는 코드가 생할될때 아무런 영향력이 없기 때문에 자바스크립트로 컴파일이 될때 자바스크립트에는 인터페이스코드를 삭제해버립니다.

신기하죠?