[TypeScript] 인터페이스(Interface)

소히·2022년 12월 3일
0

typescript

목록 보기
3/3
post-thumbnail

인터페이스

상호 간에 정의한 약속 또는 규칙.

인터페이스 사용해보기

getStudentDetails라는 함수의 반환구조가 객체로 되어 있다고 가정해보자.

Student라는 인터페이스를 생성해보았다.
인터페이스의 이름은 대문자로 시작한다.

완성된 인터페이스는 타입으로써 사용이 가능하다.
하기와 같이 getStudentDetails 함수의 반환 타입을Student라는 인터페이스로 지정해 줄 수 있다.

선택적 프로퍼티

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

이 말의 의미는 함수의 리턴값은 인터페이스의 프로퍼티를 모두 포함한 객체로 리턴해주어야 한다는 뜻이다.

❗️ 만약 인터페이스에서 선언된 age프로퍼티가 함수 리턴값에 포함되지 않는다면 하기와 같은 에러를 일으킬 수 있다.

이러한 인터페이스를 조금 더 유연하게 사용하려면 인터페이스 age 프로퍼티 뒤에 ?를 붙이면 된다.
✏️ 함수의 반환값에 age 프로퍼티가 포함되지 않아도 된다.
✏️ 선택적 프로퍼티가 된다.

코드의 재사용

아래와 같이 Student 인터페이스를 재사용하여 새로운 함수에 활용할 수 있다.

인터페이스와 메소드

메소드는 객체내에서 선언된 함수이다.
하기와 같이 두개의 syntax 사용이 가능하다

addComment라는 메소드는 comment라는 string 타입의 매개변수를 가지며 string 값을 반환한다.

Readonly 프로퍼티

읽기 전용 프로퍼티는 객체 생성시 할당된 프로퍼티의 값을 바꿀 수 없다.
아래와 같이 프로퍼티 앞에 readonly 값을 추가하여 사용할 수 있고, 이 값을 수정하려 하면 에러가 뜨게 된다.

0개의 댓글