TS - 인터페이스

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 여러가지 타입을 갖는 새로운 타입을 정의하는 것과 유사하며, 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있습니다

 

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

/** 인터페이스 기본 선언 및 사용 방식
 interface 인터페이스_이름 {
    속성: 타입;
    ...
 }
*/

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

1. 변수에 사용

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

const info_ji: User = { name: 'JeongIn', age: 100 };

• 인터페이스를 타입으로 선언한 변수는 해당 인터페이스를 준수하여야 합니다.

2. 함수에 사용

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

// 함수의 매개변수에 사용하는 경우
function getUser(user: User) {
  console.log(user);
}
getUser({ name: 'JeongIn', age: 100 }); // name: 'JeongIn', age: 100

// 함수의 리턴타입에 사용하는 경우
function searchUser(key: string): User[] {
  let userList = [{ name: 'a', age: 10 }, { name: 'b', age: 20 }, { name: 'c', age: 30 }];
  return userList.filter((dr) => dr.name == key)
}
getUser({ name: 'JeongIn', age: 100 }); // name: 'JeongIn', age: 100


// 함수의 전체 타입에 사용하는 경우
interface SumFunction {
  (a: number, b: number): number; 
  //2개의 num 타입의 파라미터를 받고, num 타입의 값을 리턴하는 함수
}
let sum: SumFunction;
sum = function (num1: number, num2: number): number {
  return num1 + num2;
};​

• 함수의 인터페이스에는 타입이 선언된 파라미터 리스트와 리턴 타입을 정의합니다.
• 함수 인테페이스를 구현하는 함수는 인터페이스를 준수하여야 합니다.

3. 클래스에 사용

// 클래스에서 사용하는 경우
interface User {
  name: string;
  age: number;
  searchUser(key: number): number; //num 타입의 매개변수를 받아 num 타입을 리턴하는 추상 메소드
}

// AllUser 클래스는 User 인터페이스의 정의한 프로퍼티와 메소드들을 반드시 구현해야 함. 미구현 시 Error
class AllUser implements User {
  constructor(
    public name: string,
    public age: number,
  ) { }

  searchUser(key) { // age가 파라미터와 같은 데이터의 숫자를 리턴하는 함수
    let userList = [{ name: 'a', age: 10 }, { name: 'b', age: 20 }, { name: 'c', age: 30 }];
    return userList.filter((dr) => dr.age == key).length;
  }
}

• 클래스 선언문의 implements 뒤에 인터페이스를 선언하면 해당 클래스는 지정된 인터페이스를 반드시 구현하여야 합니다.
• 인터페이스를 구현하는 클래스의 일관성을 유지할 수 있는 장점이 있습니다.
• 인터페이스를 구현하는 클래스는 인터페이스에서 정의한 프로퍼티와 추상 메소드를 반드시 구현하여야 합니다.

4. 선택적 프로퍼티

• 선택적 프로퍼티는 프로퍼티 명 뒤에 ? 를 붙여 선언하고, 생략해도 오류가 발생하지 않습니다.

5. 인터페이스 확장

• 인터페이스는 extends 키워드를 사용하여 다른 인터페이스를 상속받을 수 있습니다. 
• 복수의 인터페이스를 상속받을 수 있습니다.

 

 

인터페이스를 잘 활용하면 중복 코드를 제거 할 수 있고, 비슷한 타입을 가지는 변수들을 효율적으로 관리가 가능할꺼 같다! 계속해서 다른 타입의 변수를 선언해서 사용하는 것 보다 인터페이스를 활용해서 코드를 짜봐야겠다~

 

 

 

* 참고

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의