[TS] 인터페이스

 

목차

 

 

 

📌  인터페이스

 

JAVA에서는 인터페이스를 추상 메소드와 상수만을 정의한 클래스 위주로 다루지만,

타입스크립트에서는 인터페이스를 객체 위주로 다룬다.

 

 

📍타입 별칭 vs 인터페이스

 

객체 구조 타입을 선언해서 사용한다고 가정할 때, 

인터페이스로도 구현 가능하고, 타입 별칭으로도 구현이 가능하다.

인터페이스는 확장이 가능하기 때문에 인터페이스로 구현하는 것을 권장하다.

 

// 리터럴 객체 타입
const a1: {
   name: string;
   age: number;
   talk: () => void;
} = {
   name: '홍길동',
   age: 12,
   talk() {},
};


// type alias 객체 타입
type Ty = {
   name: string;
   age: number;
   talk: () => void;
};
const a2: Ty = {
   name: '홍길동',
   age: 12,
   talk() {},
};


// 인터페이스 객체 타입
interface In {
   name: string;
   age: number;
   talk: () => void;
}
const a3: In = {
   name: '홍길동',
   age: 12,
   talk() {},
};

 

 

📍속성 타입

 

🔗 선택적 속성

 

인터페이스로 정의되어 있는 모든 속성을 다 사용해야한다면 코드의 유연성은 없어진다.

이를 해결하기 위하여 선택적 속성을 이용한다.

 

콜론(:)앞에 물음표(?)

 

interface CraftBeer {
  name: string;
  hope?: number; // number | undefined 라는 뜻
}

 

🔗 읽기 전용 속성(readonly)

 

인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미

 

간단히 readonly 만 붙히면 된다.

 

interface User {
   name: string;
   age: number;
   gender?: string;
   readonly birthYear: number; // 읽기 전용 속성
}

 

🔗 함수와 메서드

 

JS에서 객체 멤버가 객체 함수가 되는 것은 매우 일반적

TS에서도 인터페이스 멤버를 함수 타입으로 선언 가능하다.

 

• 메서드 구문 : 인터페이스 멤버를 member() : void와 같이 객체의 멤버로 호출되는 함수로 선언
• 속성 구문 : 인터페이스 멤버를 member: 90 => void와 같이 독립 함수와 동일하게 선언

 

interface signUp {
  id : () => string;
  pw() : string; 
}

const login : loginfunctionTypes = {
    id : () =>"",
    pw() {
    	return "";
    }
};

login.id();
login.pw();// 둘 다 가능

// ?를 사용해 속성을 필수로 제공하지 않아도 된다

 

 

🔗 호출 시그니처

 

인터페이스는 함수의 타입을 정의할 때에도 사용 가능하다.

그냘 함수의 모양(타입)을 정의한다고 보면 된다.

 

// java
public interface login {
    public Boolean loginUser(); // 자바는 함수명만 쓰지만
}

// ts
interface login {
  (username: string, password: string): boolean; // 타입스크립트는 함수명이 아닌 함수의 모양(인자, 리턴) 타입을 쓴다 
}

 

 

🔗 인덱스 시그니처

 

객체가 key,value 형식이며 key와 value 타입을 정확하게 명시해야 하는 경우 사용한다.

 

객체가 key,value 형식 예제

 

// 급여와 관련된 객체
let objSalary {
  bouns: 200,
  pay: 2000,
  allowance: 100,
  incentive: 100
}

//객체 내부에 존재하는 속성의 값을 모두 합산해야하는 경우
function totalSalary(salary: 무슨 타입...? ) {
  let total = 0;
  for (const key in salary) {
    total += salary[key];
  }
  return total;
}

totalSalary(objSalary);

 

totalSalary() 함수의 인자 salary는 Key가 string이고 Value가 number 타입인 객체만 허용

Key가 string 타입이 아닌 경우 객체의 속성을 접근하는데 문제가 발생하며, Value가 number 타입이 아닌 경우,

총금액을 계산하는데 문제가 발생하기 때문에 인덱스 시그니처를 사용해서

Key 타입이 string이고 Value 타입이 number인 인자 salary의 타입을 선언

 

// 인덱스 시그니처 사용 방법
// 방법1. Key와 Value의 타입이 string
type userType = {
  [key: string]: string;
}

let user: userType = {
  '홍길동': '사람',
  '둘리': '공룡'
}
// 방법2. Key의 타입은 string이며 Value의 타입은 string, number, boolean
type userType = {
  [key: string]: string | number | boolean;
}

let user: userType = {
  'name': '홍길동',
  'age': 20,
  'man': true
}
// 아까 문제 해결해보기
function totalSalary(salary: {[key: string]: number}) {
  let total = 0;
  for (const key in salary) {
    total += salary[key];
  }
  return total;
}

 

📍인터페이스 확장

 

클래스와 마찬가지로 인터페이스도 인터페이스 간 확장이 가능하다.

extend 키워드를 사용하며, 인터페이스에 그대로 사용해주면 된다.

 

interface Person {
   name: string;
}

interface Developer extends Person {
   skill: string;
}

let fe: Developer = { name: 'josh', skill: 'TypeScript' };

 

 

🙋‍♀️

확장기능을 타입 별칭으로 구현하려고 한다면?

인터렉션 타입(&) 이용

 

type Person = { name: string };

type Developer = Person & { skill: string };

let fe: Developer = { name: 'josh', skill: 'TypeScript' };

 

🔗  다중 인터페이스 확장

 

인터페이스에서 여러 개의 다른 인터페이스를 확장해서 선언 가능하다

 

 

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

interface Programmer {
   favoriteProgrammingLanguage: string;
}

interface Korean extends Person, Programmer { // 두개의 인터페이스를 받아 확장
   isLiveInSeoul: boolean;
}

const person: Korean = {
   name: '홍길동',
   age: 33,
   favoriteProgrammingLanguage: 'kor',
   isLiveInSeoul: true,
};

 

🔗  인터페이스 병합

 

두 개의 인터페이스가 동일한 이름으로 동일한 스코프에 선언된 경우 

선언된 모든 필드를 포함하는 더 큰 인터페이스가 코드에 추가된다.

자주 사용되진 않는다.

 

interface Box {
  height: number;
  width: number;
}
interface Box {
  scale: number;
}
let box: Box = { height: 5, width: 6, scale: 10 };