Interface 로 객체 구조를 정의하는 방법

function getStudentDetails ( studentID : number ) : {
  studentID : number;
  studentName : string;
  age : number;
  gender : string;
  subject : string;
  createDate : Date;
}

현재 반환되는 함수에 타입이 객체 구조로 명시 되어 있다.
복잡한 이 코드를 조금 더 나은 방법으로 바꾸기 위해 인터페이스를 사용할 수 있다.

인터페이스를 사용하기 위해서는 인터페이스를 타입으로 생성하기위해 인터페이스를 만들어 주어야 한다.

interface Student {
  studentID : number;
  studentName : string;
  age : number; 
  gender : string;
  subject : string;
  createDate : Date;
}

인터페이스를 생성하기위해 interface 키워드를 타이핑 하고 키워드 뒤에 인터페이스의 이름을 지어준다.
인터페이스 의 이름은 대문자로 시작 되어야 한다. 다른 언어에서는 인터페이스 이름 앞에 i 를 붙여주는것이 naming convention 이다.
하지만 타입스크립트에서는 붙여 주지 않는것이 naming convention 이다.
그리고 중괄호를 만들어 준다.
중괄호 안에 들어갈 내용들은 위 인라인 타입으로 명시된 객체 구조와 같다.

완성된 인터페이스는 어플리케이션 내에서 스트링 이나 넘버처럼 타입으로 명시 되면서 사용 할 수 있다.

인터페이스를 타입으로 사용할 때 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제 된다.

함수의 반환 값은 반드시 인터페이스에 정의된 property 들을 가져야 한다.

예를 들어 return 값을 string 으로 바꾼다면, 에러가 나타나게 된다.

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

function getStudentDetails ( studentID : number) : Student {
  return {
    studentID : 1234,
    studentName : "jacob",
    age : 30,
    gender : "male",
    subject : "JavaScript",
    courseCompleted : false,
  };
}

이런 문제 부분을 고치기 위해서 인터페이스의 프로퍼티를 모두 포함한 객체를 리턴 값에 담아 주면 된다.
만약 여기서 인터페이스에 정의된 프로퍼티 중 하나라도 없이 컴파일을 하게 되면

” 정의된 하나의 프로퍼티가 반환값에 포함되어야 하는데 반환값에 없다 ”

라는 에러가 생기게 된다.
그럴때는 있어도 되고 없어도 되는 property 를 나타낼수 있는 방법으로는 인터페이스에 정의된 프로퍼티에 옵셔널 기호인 물음표를 이름 뒤에 붙이면 된다.

  gender? : "male"

이렇게 되면 있어도되고 없어도 되는 선택적 프로퍼티가 된것이다.

function saveStudentDetails (student: Student) : void {

}

saveStudentDetails 함수는 매개변수로 학생 정보를 받아서 그 정보를 저장 하는 함수 이다.
파라미터 이전에 선언한 Student interface 를 매개변수의 타입으로 지정 하게 되면 코드의 재사용 가능하다.
반복되는 코드를 피하는것이 좋은 코드를 위한 노력중 하나이다.
만약 interface 가 없었더라면 똑같은 객체의 구조를 일일히 매개변수 안에 입력해야 했을 것이다.
이 함수의 반환 값은 아무것도 반환 되지 않는 함수 이기 때문에 함수의 타입으로 : void 를 명시해 두었다.

function saveStudentDetails ( student: Student) : void {

}

saveStudentDetails({
  studnetID : 12345,
  studentName : "Jason",
  age : 20, 
  gender : "male",
  subject : "Java",m
});

함수 밑에 saveStudentDetails 함수를 불러준 뒤 인터페이스 타입 구조에 맞춰서 argument 값을 입력 한 뒤 컴파일 하면 오류 없이 컴파일이 된다.

interface 내에 method 정의

메소드는 객체내에서 선언된 함수

메소드를 인터페이스 내에서 정의 하기 위해서는 두가지 방법이 있다.

interface Student {
  studentID : number;
  studentName : string;
  age : number;
  gender: string;
  subject : string;
  courseCompleted? : boolean;
  addComment(comment: string): string;
  addComment(comment: string) => string;
}

표현 방법만 다를 뿐 두가지 모두 addComment 라는 이름을 가진 method 를 정의하고 comment 라는 이름을 가진 string value 의 매개변수 parameter 를 가지고 string 값을 반환하는 메소드 이다.

Read Only 속성

Read only 프로퍼티는 읽기 전용 프로퍼티로 객체 생성시 할당된 프로퍼티의 값을 바꿀 수 없다.

interface Student {
  readonly studentID : number;
}

인터페이스 객체 내 프로퍼티 앞에 readonly 라고 속성을 지정해 준다.

그리고 파라미터를 받는 함수에서 값을 바꾸는 코드를 입력하면 에러가 생기는데 해당 에러가 생기는 곳에 마우스를 올려보면 에러메시지를 볼수가 있다.

“Cannot assign to ‘studentID’ because it is a read-only property’ 라는 에러 메시지가 발생한다.

읽기전용 property 이기 때문에 새로운 할당 값이 할당 될 수 없다 라고 나오는 것이다.

interface => javascript

타입스크립트 내에 인터페이스는 자바스크립트에서 보이지 않게 된다.
코드가 렌더링 될때 아무런 영향력이 없기 때문에 타입스크립트 컴파일러가 컴파일 할 때 인터페이스를 코드에서 그냥 지워 버리기 때문이다.

TypeScript - Interface