[typescript] 인터페이스(Interface)

📝인터페이스

인터페이스란?

타입스크립트에서 인터페이스란 '객체 타입을 정의할 때 사용하는 문법'이라고 볼 수 있다.

 

자바스크립트에서 클래스를 이용하여 객체(인스턴스)를 생성한다. 이때 클래스 안에 객체가 어떤 속성을 가지고 있는지 정의한다.

 

인터페이스의 역할도 클래스와 동일하다. 객체를 생성하는데 해당 객체가 어떤 속성을 가지고 있는지, 각 속성은 어떤 타입인지 정의해주는 역할이라고 생각하면 쉽다!

---

 

인터페이스를 정의 및 인터페이스를 통한 객체 타입 정의

 

1) 인터페이스 정의

interface라는 키워드를 사용한다. 이때 인터페이스 이름의 첫글자는 대문자로 해준다.

// 인터페이스 정의
interface 이름 {
  속성: 값;
  속성: 값;
}

// 예시
interface User {
  name: string;
  age: number;
}

 

 

2) 객체 타입 정의

인터페이스를 정의했다면 해당 인터페이스의 객체를 정의해줘야 한다.

객체를 정의하는 방법은 타입 선언과 마찬가지로 '변수: 인터페이스 이름'으로 정의하면 된다.

interface User {
  name: string;
  age: number;
}

let person: User = {name: '홍길동', age: 32};

 

이때 인터페이스에 정의되지 않은 속성을 객체에 넣거나 속성값을 지정한 타입과 다른 타입을 적는다면 에러가 발생하니 조심하자.

---

 

인터페이스를 이용한 함수의 타입 정의

함수의 파라미터나 반환값으로 객체를 사용하는 일은 빈번하다. 그렇기 때문에 파라미터, 반환값에도 인터페이스를 이용해 타입을 정의할 수 있다.

 

1) 파라미터 정의

name과 age 속성을 가진 객체를 파라미터로 받는 함수가 있다고 생각하자. 이 객체를 인터페이스로 정의하면 파라미터 역시 해당 인터페이스로 타입을 정의할 수 있다.

interface User {
  name: string;
  age: number;
}

function userInfo(someone: User) {
  console.log(someone.age);
}

 

 

2) 반환타입 정의

사실, 함수의 파라미터의 타입이 정의되면 반환값도 추론할 수 있다. 타입스크립트는 이를 추론하여 타입 표기에 도움을 준다는 점에서 굉장한 장점을 가진다. 

 

반환값의 타입 표기는 파라미터 이후에 ' : 타입 '으로 정의했다. 인터페이스를 이용해 타입을 정의할 경우, 타입에 인터페이스 이름을 넣어주면 된다.

interface User {
  name: string;
  age: number;
}

function userInfo(someone: User): User {
  return someone;
}

 

---

 

인터페이스 옵션 속성

타입스크립트의 옵셔널 파라미터를 기억하는가? 물음표를 붙이면 해당 파라미터는 선택적으로 입력할 수 있는 기능이었다.

인터페이스 역시 옵션 속성이 존재한다. 마찬가지로 속성 뒤에 ?를 붙이면 해당 속성은 선택적으로 입력할 수 있다.

옵션 속성은 상황에 따라 유연하게 사용 여부를 결정할 수 있어 장점을 가진다.

interface User {
  name?: string; // 옵셕 속성
  age: number;
}

let person: User = { age: 100 }; // 에러가 발생하지 않는다.

 

---

 

인터페이스 상속

인터페이스는 상속이 가능하다. 즉, 자식이 부모의 인터페이스를 이용할 수 있다. extends 키워드를 이용해 상속을 받을 수 있다.

아래 코드를 보면 UserChild는 User의 상속을 받았기 때문에 UserChild로 객체를 생성해도 부모의 속성을 사용할 수 있다.

interface User {
  name: string;
  age: number;
}

// 상속
interface UserChild extends User {
  job: string;
}

let person: UserChild = {
  name: "홍길동",
  age: 32,
  job: "변호사",
};

 

---

 

인덱싱

- 객체의 특정 속성을 접근하거나 배열의 인덱스로 특정 요소에 접근하는 동작

 

자바스크립트에서 객체의 속성의 접근할 때 ' 객체[ '키' ] ' 형태로 접근하지 않았는가? 마찬가지로 배열의 요소에도 ' 배열이름[인덱스 번호] '를 통해 접근하지 않았는가? 이게 바로 인덱싱이다.

 

즉, [  ]를 이용하여 특정 객체의 속성이나 배열의 요소에 접근하는 것을 인덱싱이라고 생각하면 쉽다.

 

1) 배열 인덱싱 타입의 정의

배열에서 특정 요소에 접근하기 위해선 인덱스를 이용한다. 대괄호 안에 인덱스 번호를 넣어 요소에 접근하는데, 이때 인덱스 번호에 타입을 정의해주는 것을 배열 인덱싱 타입이라고 한다.

사실 인덱스는 숫자만 들어가기 때문에 ' : number ' 형태로 정의하면 된다.

interface StringArray {
  [index: number]: string; // 배열 안의 요소의 타입을 string으로 선언
}

let company: StringArray = ["네이버", "쿠팡", "배달의 민족"];

 

 

2) 객체 인덱싱 타입 정의

객체의 속성이 어떤 타입이고 속성값은 무슨 타입인지 인덱싱을 이용하여 정의하는 것이다.

interface ObjectIndex {
  [level: string]: number;
}

let objectExample: ObjectIndex = {
  age: 100,
};

 

 

인덱스 시그니처

배열 인덱싱, 객체 인덱싱에서 [ ]안의 값을 각각 [index: number] , [level: string] 형식으로 지정했다.

이는 인덱스 시그니처로 속성 이름을 정확히 명시하지 않고 정의하는 문법이다. 인덱스 시그니처는 객체 속성의 타입을 유연하게 정의할 수 있다.