[TypeScript] 인터페이스

 

◽ 예제

인터페이스는 '상호간의 약속'으로 특정 형식으로 지정해준다.

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

 

변수에 인터페이스를 활용해보자.

const thor: User = {
  age: 50000,
  name: '토르'
}

 

함수에 인터페이스를 활용해보자.

// 함수에 인터페이스 활용
function getUser(user: User) {
  console.log(user);
}

 

API의 스펙을 지정하는 것에 가장 많이 사용한다.

// 함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction {
  (a: number, b: number): number;
}

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

 

오브젝트에 속성을 일일이 지정하지 않고 그때 그때 임의로 구해서 사용하는 인덱싱을 사용해보자.

// 인덱싱
// 속성이름이 정해져있지 않고 임의로 구해서 사용할 수 있도록 한다.
interface StringArray {
  [index: number]: string;
}

let arr: StringArray = ['a', 'b', 'c']
arr[0] = 'e'

 

딕셔너리 패턴을 사용해보자.

// 딕셔너리 패턴
// key: 'sth', string: '/abc/'
// 자바스크립트는 RegExp라는 예약어를 제공하고 있다.
interface StringRegexDictionary {
  [key: string]: RegExp
}

let obj: StringRegexDictionary = {
  cssFile: /\.css$/,
  jeFile: /\.js$/,
}

// 이렇게 사용할 수 있다.
Object.keys(obj).forEach((value) => {
  console.log(value);
})

 

상속을 사용해보자.

// 인터페이스 확장
// 인터페이스를 상속받아 사용하는 것
interface Person {
  name: string,
  age: number
}

interface Developer extends Person{
  language: string;
}

const thor: Developer = {
  name: 'thor',
  age: 50000,
  language: '아스가르드어'
}

 

 

---

 

 

출처

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