[Typescript] Section 04. 인터페이스

1. 인터페이스란

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터 & 반환 타입 등)
• 배열과 객체를 접근하는 방식 (인덱싱 & 딕셔너리 패턴)
• 클래스

객체의 스펙

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

const user:User {
  name: '오일';
  age: number;
}

함수의 파라미터

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

함수의 스펙

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

let sum: SumFunction;
sum = function (num1: number, num2: number): number {
  return num1 + num2;
};

함수의 전체적인 모습을 정의할 수 있음 이는 라이브러리를 직접 만들거나 여러명이 협업할 때 미리 함수의 모양을 잡은 후 작업 할 수 있는 장점이 있습니다.

 

배열과 객체를 접근하는 방식 (인덱싱 & 딕셔너리 패턴)

인덱싱 (배열에 접근할 때)

interface StringArray {
  [index: number]: string;
	[키: 배열에 접근 하는 키 타입]: 접근한 인덱스의 반환 타입
}
let arr: StringArray;
arr[0] = 'hi';
arr[1] = 10; //error

딕셔너리 패턴 (객체에 접근할 때)

interface StringRegexDictionary {
	[key: string]: RegExp;
}

var obj: StringRegexDictionary = {
	cssFile: /\\.css$/,
	jsFile: /\\.js$/,
}

 const test = new RegExp(`\\.css$`);
 obj["cssFile"] = test; //성공
 obj["cssFile"] = "a"; //에러

💡 인덱싱과 딕셔너리 패턴의 차이

[Javascript] 인덱싱 패턴과 딕셔너리 패턴의 차이점

클래스 타입

interface CraftBeer {
  beerName: string;
  nameBeer(beer: string): void;
}

class myBeer implements CraftBeer {
  beerName: string = 'Baby Guinness';
  nameBeer(b: string) {
    this.beerName = b;
  }
  constructor() {}
}

인터페이스 확장

interface Person {
  name: string;
  age: number; 
}
interface Developer extends Person {
  language: string;
}
const joo: Developer = { name: "joo", age: 20, language: "ts" };