🔷 인터페이스 (interface)
TypeScript에서 가장 흔하게 사용되며 객체의 형태를 묘사하는 데 사용한다
타입별칭과 매우 유사하다
오직 객체에만 사용
인터페이스 사용하기
interface 키워드 + 이름 + 중괄호 { }
✔️ 선택적 프로퍼티와 readonly
선택적 프로퍼티와 readonly는
타입별칭을 통해 객체 타입을 생성할 때와 동일한 방식으로 작동한다
선택적 프로퍼티
프로퍼티와 콜론(:) 사이에 물음표를 붙여준다
nickname을 선택적 프로퍼티로 지정했기 때문에
jan2에서 nickname을 작성하지 않아도 오류 X
readonly 읽기전용
프로퍼티 앞에 readonly 키워드를 붙여준다
초기 설정 시 객체(jan1)를 생성할 때 값을 지정하는 건 가능하지만, 이후에는 변경이 불가능하다
✔️ 인터페이스 메서드
인터페이스에 메서드를 추가할 수 있다
객체가 어떠한 메서드를 포함하고 있는지 나타낼 수 있고
메서드가 받거나 반환하는 타입 관점에서의 객체 형태를 묘사할 수 있다
인터페이스에서 메서드를 사용할 때는 함수 내용을 작성하지 않는다
함수 내용은 해당 인터페이스를 타입으로 가지는 객체에서 서술한다
① 화살표 함수 사용 sayHi: ( ) => string
sayHi는 메서드 형태인데 아무런 매개변수를 받지 않고 문자열을 반환한다는 뜻
화살표 구문을 사용하여 메서드라는 것을 표시
② 일반 함수 사용 sayHi(): string
sayHi 메서드는 아무런 매개변수를 받지 않고 문자열을 반환한다는 뜻
프로퍼티 이름 뒤에 있는 괄호로 이것이 메서드라는 것을 표시
메서드 매개변수
인터페이스 내에는 특정 메서드가 요구하는 매개변수와 매개변수의 타입 또한 지정이 가능하다
sayHi 메서드에서 name이라는 매개변수를 요구한다
이때 name의 타입은 문자열이어야 하고 이를 통해 문자열을 반환해야한다
✔️ 인터페이스 호환
동일한 이름의 인터페이스를 여러 개 만들 수 있다
인터페이스가 재선언 되는 것이 아니라, 기존에 만들어진 인터페이스에 내용이 추가되는 것이다
전체를 덮어쓰지 않고, 삭제하지 않고, 오직 추가만 하여 기존의 것과 합치는 것이다
인터페이스 호환은 언제 사용할까?
① 이미 작성한 인터페이스가 다른 파일에 있는 경우
② 기존의 인터페이스에 무언가를 추가하고 싶은 경우
EX )
Person 인터페이스에 name 속성을 작성하고
Person 인터페이스를 다시 열어 age 속성을 작성하였다
이렇게 Person 인터페이스를 두번 작성하고 변수 student에 지정했더니
name과 age 속성이 없다는 오류가 나타난다
↳ 이를 통해 동일한 이름의 인터페이스는 기존의 내용과 합쳐진다는 것을 알 수 있다
✔️ 인터페이스 확장 (extends)
인터페이스 확장은 다른 인터페이스로 부터 상속 받는 기능이다
JavaScript의 클래스에서 사용되는 상속과 유사한 기능이지만 차이점이 있다
인터페이스에서는 여러개의 인터페이스를 확장할 수 있다
하지만 JavaScript 클래스에서는 한개의 클래스만 확장이 가능하다
| JS | TS | |
|---|---|---|
| 확장 | 가능 | 가능 |
| 키워드 | extends | extends |
| 상속갯수 | 1 | 1 ~ 999 ··· |
인터페이스 확장 사용하기
interface 인터페이스 extends 상속받을인터페이스{ }
↳ 새로 생성하려는 인터페이스 뒤에 ①extends 키워드를 붙이고 ②상속받으려는 인터페이스를 작성하면 된다
여러개의 인터페이스를 상속받는 경우에는 콤마(,)로 이어주면 된다
타입별칭 vs 인터페이스
1. 객체 타입 묘사
인터페이스는 객체의 형태만을 묘사하기 때문에 객체를 표현할 때 사용하고
타입별칭은 어떤 타입이든지 묘사가 가능하기 때문에 객체의 형태가 아닌 경우에 사용한다
인터페이스에서 리터럴타입, 유니온타입 사용시 오류
2. 확장
인터페이스는 기존 인터페이스를 다시 열어서 확장할 수 있지만
타입별칭은 기존 타입을 다시 열어서 확장할 수 없다
타입별칭은 동일한 타입을 두번 작성하면 오류
인터페이스는 동일한 인터페이스를 두번 작성하면 확장
3. 상속
인터페이스는 상속이 가능하지만
타입별칭은 상속이 불가능하다
타입별칭은 & 기호를 이용한 교차 타입을 사용해야 상속 및 확장이 가능하다
