인터페이스
- 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다
- 객체의 스펙(속성과 속성의 타입), 함수의 파라미터, 함수의 스펙(파라미터, 반환타입 등), 배열과 객체를 접근하는 방식, 클래스
아래처럼 js에서는 객체를 정의하여 해당값에 접근할 수 있었는데
타입스크립트에서는 해당 객체의 데이터의 타입을 정의해줘야합니다. 즉 객체를 정의하고 싶을때는 인터페이스를 사용합니다.
생성방법
인터페이스는 먼저 앞에 Interface 타입이라는 것을 명시하고 일반적인 객체를 만들듯 만들어줍니다.
대신 인터페이스 안에 있는 프로퍼티(속성)에는 값이 아닌 타입이 들어갑니다.
그리고 객체를 만들 때 그 객체의 타입을 방금 만든 인터페이스 이름으로 설정해줍니다.
옵션속성(Optional Properties)
여기서 있어도 되고 없어도 되는 프로퍼티를 정의하고 싶으면
인터페이스의 프로퍼티 이름 바로 뒤에 ? 를 붙여주면 됩니다.
이렇게 하면 프로퍼티가 없더라도 해당 인터페이스로 객체를 만들 수 있습니다. (let이기 때문에 나중에 추가가능)
추가적으로 readonly를 사용하면 처음 생성할때만 할당할 수 있고 나중에 변경 할 수 없게 가능합니다.
인터페이스의 프로퍼티의 이름 앞에 readonly를 붙이면 생성할 때를 제외하고는 그 프로퍼티의 내용을 수정할 수 없게 됩니다.
인터페이스 객체를 사용하다보면 추가해야할 속성들이 여러개 있을 수도 있습니다.
예를 들면 위의 User 인터페이스에 학년별로 성적값 속성을 추가해보면 아래와 같이 옵션속성을 사용하여 만들수 있습니다.
하지만 위의 방법 말고 문자열 인덱스 서명을 사용할 수 있습니다.
문자열 인덱스 서명
[ 아무문자열 : 타입 ] : 타입;
아래처럼 선언해주면 프로퍼티명은 number타입, 값은 string이 되는 값들은 얼마든지 추가할 수 있습니다.
위의 코드에서 학점의 타입 string은 들어올 수 있는 것은 'A', 'B'가 아닌 다양한 길이의 문자열입니다.
이런 경우 범위가 넓기 때문에 잘못된 문자열이 들어가 에러가 발생할 수 있습니다.
이런 상황을 방지하기 위해 쓸 수 있는 것이 문자열 리터럴 타입입니다.
type이라는 키워드를 앞에 붙여주고, Score라는 변수를 만들어줍니다. 그 안에 'A'|'B'|'C'|'D'를 넣어줍니다.
이렇게하면 Score 타입으로 생성한 무언가는 위의 4글자만 들어갈 수 있습니다.
만약 다른 값을 넣어볼려고하면 에러가 발생합니다.
인터페이스로 함수만들기
Add라는 인터페이스를 만들고, 매개변수:타입 형태의 프로퍼티를 만들어줍니다.
number형태의 매개변수 2개를 받아서 number를 리턴해주는 인터페이스 함수입니다.
화살표함수 형태도 만들 수 있습니다.
인터페이스로 클래스 만들기
implements를 통해 사용할 수 있습니다. 주의해야할점은 클래스에서 인터페이스에 정의한 프로퍼티(속성)들을 다 정의해줘야 합니다.
인터페이스 확장
기존 인터페이스를 extends키워드를 이용해 불러와 확장할 수 있습니다.
아래처럼 extends를 이용해 확장할 수 있는데 기존의 프로퍼티들을 모두 정의해주지 않으면 오류가 발생합니다.
추가로 콤마를 이용해서 여러개의 인터페이스를 받아서 확장할 수 있습니다.
'프론트엔드 > typescript' 카테고리의 다른 글
| 타입스크립트 - 제네릭 (0) | 2023.10.25 |
|---|---|
| 타입스크립트 - 클래스 (0) | 2023.10.23 |
| 타입스크립트 - 리터럴타입,유니온/교차타입 (0) | 2023.10.23 |
| 타입스크립트 - 함수 (0) | 2023.10.23 |
| 타입스크립트 - 기본타입 (0) | 2023.10.22 |
