[TypeScript] Interface

해리포터·2022년 12월 13일
0
post-thumbnail

Interface

interface Named {
  readonly name: string; 
	outputName: string; 
}
  • 타입스크립트에서만 존재하는 기능이므로, 자바스크립트로 컴파일 되지 않는다. (타입 체킹으로 많이 쓰임)
  • 객체의 구조를 정의한다. (속성, 속성의 타입)
  • 함수의 구조를 정의한다. (파라미터와 리턴 값의 타입)
  • 구조만 정할 수 있을 뿐, 값을 정할 수는 없다.
  • readonly 를 사용할 수 있다. (public, private 는 사용 불가)

함수 타입

interface AddFn {
	// interface with a function type
	(a: number, b: number): number;
}

인터페이스를 함수 타입을 정의할 때 사용할 수도 있다.
함수의 구조를 정의하는데, 함수의 파라미터의 구조와 타입, 리턴 값의 타입을 정의할 수 있다.


옵션 속성 (optional property)

interface Named {
	outputName?: string; 
}

인터페이스에 정의되어 있는 속성 중 옵션 속성은 말 그대로 옵셔널한, 꼭 사용하지 않아도 되는 속성이다.
속성의 이름 뒤에 ? 를 붙이면 옵션 속성을 의미한다.


읽기 전용 속성 (readonly property)

interface Named {
  readonly name?: string;
	outputName?: string; 
}

객체를 인터페이스를 사용해서 처음 생성할 때 할당된 속성의 값은 이후에 변경이 불가하다.
readonly 를 속성 앞에 붙이면 읽기 전용 속성으로 사용할 수 있다.


인터페이스 상속

interface Named {
  readonly name?: string;
	outputName?: string; 
}

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

extends 키워드를 사용해서 인터페이스 간 확장도 가능하다.


클래스에 인터페이스 적용하기

class Person implements Greetable {
	name?: string;
	age = 30;
	// 생략 ...
}

implements 키워드를 사용하면 클래스가 특정 인터페이스를 만족하는지를 확인할 수 있다.
인터페이스에 정의된 조건을 벗어나는 클래스를 정의하면 타입스크립트는 에러를 발생시킨다.

profile
FE Developer 매일 한 걸음씩!

0개의 댓글