TIL 53 | Interface

ym j·2021년 8월 2일

TIL interface

TypeScript

목록 보기

8/11

Interface(인터페이스)

인터페이스는 상호간에 정의한 약속 혹은 규칙을 뜻한다. (쉽게 설명하면 사용 설명서같은 느낌도 든다.)
객체의 속성, 함수의 매개변수 및 리턴값, 배열 및 객체의 접근 방식, 클래스에 대해 인터페이스를 지정할 수 있다. (타입의 틀을 정할 수 있다.)

객체에서의 인터페이스

// 객체
interface Person {
  name: string;
  age: number;
  gender?: string; // ?을 통한 옵션 속성 사용(선택적으로 사용 가능)
}
//
const tomas: Person = {
  name: "tomas",
  age: 20,
};
//
const james: Person = {
  name: "james",
  age: 30,
  gender: "male",
};
// 객체의 readonly(읽기 전용 속성)
interface Beer {
  readonly brand: string;
}
//
const cass: Beer = {
  brand: "Cass",
};
//
cass.brand = "Hite"; // annot assign to 'brand' because it is a read-only property.

위처럼 인터페이스를 활용하여 필요한 속성 개수, 속성명을 정할 수 있다.
인터페이스에 정의된 성을 기입할때, 순서를 지킬 필요는 없다.
특정 속성명 뒤에 ?를 기입하게 되면, 옵션 속성으로서 해당하는 속성을 선택적으로 사용할 수 있게 된다.
readonly 키워드를 사용할 경우, 해당 속성이 가진 값의 수정이 불가능해진다.

배열에서의 인터페이스

const arr: ReadonlyArray<number> = [1, 2, 3, 3, 5];
arr.push(1); // Property 'push' does not exist on type 'readonly number[]'.

배열을 선언할때 ReadonlyArray 타입을 통해 배열을 생성하면, 읽기 전용의 배열이 생성된다.
push와 같은 메소드를 통해 기존 배열을 수정할 수 없었다.

함수에서의 인터페이스

interface User {
  (userName: string, userAge: number): boolean;
}
//
const person1: User = (userName: string, userAge: number): boolean => {
  console.log(userName, userAge);
  return true;
};

함수의 인자 및 리턴값들에 대한 타입을 지정해줄 수 있다.

클래스에서의 인터페이스

interface personInfo {
  name: string;
  namePerson(person: string): void;
}
//
class Person implements personInfo {
  name: string = "yongmin";
  namePerson(personName: string) {
    this.name = personName;
  }
}