[타입스크립트] 인터페이스

트릴로니·2022년 8월 29일
0

타입스크립트

목록 보기
4/9

인터페이스란?

  • 객체의 구조를 명시할 수 있다. 마치 커스텀 타입과 같다.
  • 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
  • 인터페이스는 여러 타입을 가즌 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다.
  • 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다.
interface Named {
	readonly name?: string;
    outputName?: string;
}

? : optional property

  • Named를 확장하는 모든 클래스에서 옵셔널 프로퍼티가 붙은 프로퍼티는 없어도 에러가 뜨지 않는다
    readonly: 프로퍼티에 readonly속성을 부여할 수 있다(public, private는 안된다)
  • 해당 인터페이스의 구조를 갖는 객체는 readonly가 부여된 프로퍼티의 값은 바꿀 수 없다.

인터페이스 확장

  • extends 키워드를 사용하여 인터페이스를 확장할 수 있다.
interface Named {
	readonly name?: string;
    outputName?: string;
}

interface Greetable extends Named {
	greet(phase: string): void
}

클래스와 인터페이스

  • 클래스 선언문의 implements 키워드 뒤에 인터페이스를 선언하면 해당 클래스는 지정된 인터페이스의 구조를 따라야한다.
  • 클래스의 일관성을 유지할 수 있다.
class Person implements Greetable, Named {
  name?: string;
  age = 30
  // 인터페이스에 없는 more field/ more mehtod 넣을 수 있다
  // avaiable for extending this class
  constructor(n?: string){
    if(n) {
      this.name = n
    }
  }
  greet(phrase: string): void {
    if(this.name){
      console.log(phrase + ' ' + this.name);
    } else {
      console.log('hi')
    }
  }
}
  • Person 클래스는 Named와 Greetable의 구조를 따라야 한다.
  • 여러개의 인터페이스를 명시할 수 있는데 콤마(,)로 구분한다.
  • 클래스 필드에 프로퍼티의 타입를 추가로 명시할 수 있다.

0개의 댓글