[타입스크립트] 인터페이스 사용법 (interface)

인터페이스

인터페이스는 타입을 정의하는 강력한 방법으로 변수, 함수, 클래스의 타입을 정의할 수 있게 도와준다.

 

---

 

인터페이스는 변수, 함수, 클래스의 타입을 정의함으로써 일관성을 유지시켜주는데 크게 기여한다.

인터페이스가 어떻게 작동하는지 다음 예시를 통해 확인하자.

 

 

interface Items {
    id: string
    category_id: string
    category_name: string
    name: string
    price: number
}

위 예시를 보면 Items라는 인터페이스 안에 여러 변수가 들어있다.

그리고 각각 타입이 지정되어 있는 것을 확인할 수 있다.

 

---

 

interface 형식

interface 이름 {
    키: 타입
    key : type
}

 

interface를 선언한 후 이름을 지정해준다.

그리고 그 안에 정의할 변수와 타입을 차례대로 작성하는 형식으로 구성되어 있다.

 

---

 

✔️ interface 변수

interface Tooo {
  id: number
  content: string
}

let tooo: Tooo;

tooo = { id: 1, content: 'tooo1' };

Tooo라는 인터페이스를 만들어주었고 그 안에 id와 content 변수에 대해 타입을 정의해주었다.

id의 타입은 number, content의 타입은 string이다.

 

그리고 변수 tooo의 타입을 Tooo 인터페이스로 정의해주고,

변수 tooo에 값을 타입을 고려하여 대입해주었다.

 

 

 

✔️ interface 함수

interface ToooFunc {
  (num: number): number;
}

const toooFunc: ToooFunc = function (num: number) {
  return num * num;
}

interface는 함수도 타입 정의가 가능하다. 

위 예시는 ToooFunc 함수의 타입을 정의하기 위해 interface를 사용한 모습이다.

 

 

✔️ interface 클래스

interface Tooo {
  id: number;
  content: string;
}

class To implements Tooo {
  constructor (
    public id: number,
    public content: string
  ) { }
}

const to = new To(1, 'tooo1');

interface는 클래스도 타입 정의가 가능하다. 

위 예시는 To 클래스의 타입을 정의하기 위해 interface를 사용한 모습이다.

 

---

 

😁 interface 상속

interface Tooo {
  id: number
  content: string
}

interface Toooo extends Tooo {
  to : number
}

const tooo: Toooo {
  id: 1
  content: 'Hi'
  to : 123
}

인터페이스는 extends 키워드를 사용하여 인터페이스 또는 클래스를 상속받을 수 있다.

 

 

 

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!