[TypeScript] 타입스크립트의 인터페이스(interface)

 

 

   목차 

1. 인터페이스란?
2. 인터페이스 적용 전 후 살펴보기
3. 변수에 인터페이스 활용하기
4. 함수에 인터페이스 활용하기
5. 함수 스펙에 인터페이스 활용하기
6. 배열 인덱스에 인터페이스 활용하기
7. 인터페이스 딕셔너리 패턴
8. 옵션 속성
9. 읽기 전용 속성
10. 인터페이스 확장

 

 

 

타입스크립트의 인터페이스(interface)에 대해서 알아보자!

 

 

---

 

 

 1. 인터페이스란? 

* 인터페이스: 상호 간에 정의한 약속 혹은 규칙

 

인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다.

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

 

 

---

 

 

 2. 인터페이스 적용 전 후  살펴보기 

 

 적용 전 

let person = { name: 'Capt', age: 28 };

function logAge(obj: { age: number }) {
  console.log(obj.age); // 28
}
logAge(person); // 28


// logAge 함수에 person 객체를 인수로 넣는다. 
// 객체 안의 age가 매개변수로 들어가야하니까 age(=객체의 속성)의 타입을 적어준다. // obj: { age: number }

 

 

 적용 후 

interface personAge {  // 인터페이스 정의
  age: number;  // 아까 매개변수에 적었던 것
}

function logAge(obj: personAge) {  // logAge()의 인자는 personAge 라는 타입을 가져야한다
  console.log(obj.age);
}
let person = { name: 'Capt', age: 28 };
logAge(person);


// logAge 함수에 person 객체를 인수로 넣는다. 
// 매개변수의 타입을 인터페이스를 사용해서 정의한다.

 

- 인터페이스를 인자로 받아 사용할 때 항상 인터페이스의 속성 개수(여기서는 age 1개)와 인자로 받는 객체의 속성 개수(여기서는 name, age이므로 총 2개)를 일치시키지 않아도 된다. 

- 즉, 인터페이스에 정의된 속성, 타입의 조건만 만족한다면(age: number인 것만 만족한다면,) 객체의 속성 개수가 더 많아도 상관 없다는 의미

- 또한 인터페이스에 선언된 속성 순서를 지키지 않아도 된다. 

 

 

---

 

 3. 변수에 인터페이스 활용하기 

 

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


let seho: User ={
  age: 33,
  name: '세호'
}

 

 

---

 

 

 4. 함수에 인터페이스 활용하기 

 

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


function getUser(user: User) {
console.log(user);
}

const capt = {
  name: "캡틴",
  age: 100
}

getUser(capt);

 

 

---

 

 

 5. 함수 스펙에 인터페이스 활용하기 

 

함수의 인자의 타입과 반환 값의 타입을 정한다.

interface SumFunction {
  (a: number, b: number): number;
}

let sum: SumFunction;

sum = function (a: number, b: number): number {
  return a + b;
};

 

interface login {
  (username: string, password: string): boolean;
}

let loginUser: login;
loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}

 

 

---

 

 

 6. 배열 인덱스에 인터페이스 활용하기 

 

interface StringArray{
  [index: number]: string;
}

let arr : StringArray = ["a", "b", "c"];
// arr[0] = 10 // 할당 불가

 

 

---

 

 

 7. 인터페이스 딕셔너리 패턴 

interface StringRegexDictionary {
 [key: string]: RegExp // 정규표현식 생산자 같은거 
}

let obj: StringRegexDictionary = {
  // sth: /abc/,
  cssFile:/\.css$/,
  JsFile:/\.js$/,
}

 

 

---

 

 

 8. 옵션 속성 

 

* 옵션 속성: 인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지 않아도 된다. 

 

문법

interface 인터페이스_이름 {
  속성?: 타입;
}

 

 

 1) 옵션 속성을 안 썼을 경우 

 

interface CraftBeer {
  name: string;
  hop: number;  
}

let myBeer = {
  name: 'Saporo'
};
function brewBeer(beer: CraftBeer) {
  console.log(beer.name); 
}
brewBeer(myBeer); // 에러 발생

 

 

객체에 없는 속성(hop)은 인터페이스에서 정의할 수 없다. 
* 비교) 객체 속성보다 인터페이스 속성 개수가 적은건 상관 없음 

 

 

 2) 옵션 속성을 썼을 경우 

 

interface CraftBeer {
  name: string;
  hop?: number;  
}

let myBeer = {
  name: 'Saporo'
};
function brewBeer(beer: CraftBeer) {
  console.log(beer.name); // Saporo
}
brewBeer(myBeer);

hop을 옵션 속성으로 선언하면 에러 없이 매개변수로 넘길 수 있음.

 

 

---

 

 

 9. 읽기 전용 속성 

 

* 읽기 전용 속성: 인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성

 

interface CraftBeer {
  readonly brand: string;
}

 

 

인터페이스로 객체를 readonly로 선언하고 나서 수정하려고 하면 아래와 같이 오류가 난다.

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!

 

 

---

 

 

 10. 인터페이스 확장 

 

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

interface Developer extends Person{ // Developer에 Person것도 갖다쓰겠다.
  language: string;
}

let captain: Developer = {  // 변수에 Developer 인터페이스 사용 (Developer엔 People도 포함돼있음)
  language: "ts", 
  age: 100, 
  name: "캡틴"
}

 

interface Person {
  name: string;
}
interface Developer extends Person {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';

 

interface Person {
  name: string;
}
interface Drinker {
  drink: string;
}
interface Developer extends Person {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';
fe.drink = 'Beer';