Typescript [3] - 인터페이스

인터페이스

: 상호 간의 정의한 약속 혹은 규칙, 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다.
(인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 함)
(렌더링하는데엔 영향을 미치지 않음)
#1

function App() {
  let studentID: number = 12345;
  let studentName: string = "jenny";
  let age: number = 20;
  let gender: string = "female";
  let subject: string = "javascript";
  let courseCompleted: boolean = false;

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

  function getStudentDetails(studentID: number): Student {
    return {
      studentID: 22,
      studentName: "kim",
      //   age: 22,
      gender: "female",
      subject: "js",
      courseCompleted: true,
    };
  }

이렇게 getStudentDetails함수에 Student 인터페이스로 타입을 명시하게 되면, 그 안에 값들은 인터페이스의 구조를 가지도록 강제되게 된다.
이 때 age가 빠진다면? => 오류 발생 따라서 위 인터페이스 age부분에 ?를 추가하게 되면 age가 없어도 되고 있어도 된다는 뜻으로 받아들여진다.
그리고 더불어 인터페이스는 재사용이 가능하다.

function saveStudentDetails(student: Student): void {}

메소드

:객체내에서 선언된 함수

  interface Student {
    studentID: number;
    studentName: string;
    age?: number;
    gender: string;
    subject: string;
    courseCompleted: boolean;
    // addComment(comment: string): string;
    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 = 222
   }

이 코드는 불가능하다. readonly라고 선언하게 되면 읽기만 가능해지고 수정이 불가능해진다는 것이 typescript의 또 다른 기능이다.