본문 바로가기

프론트엔드/타입스크립트

인터페이스

반응형

인터페이스는 지정할 타입만 분리하여 지정할 수 있게 해 주는 기능으로 클래스와 비슷하게 생겼지만 다른 점은 타입지정만 가능하고 값을 지정할 수 없다는 점입니다(다른 언어와 동일).

사용하기

아래와 같이 객체에 지정된 타입을 인터페이스를 활용하여 분리해 보겠습니다.

let object: { name: string; age: number; married?: boolean } = {
  name: 'tom',
  age: 20,
}

먼저 인터페이스를 생성하고 값과 타입을 지정합니다. 인터페이스도 메서드를 가질 수 있는 데 예시를 위해 메서드도 추가하였습니다.

interface Person {
  name: string
  age: number
  married?: boolean
  walk?: () => void // method
}

생성된 인터페이스를 기존에 설정해 두었던 타입과 교체합니다.

let person1: Person = {
  name: 'tom',
  age: 2,
}

코드가 훨씬 깔끔 해 졌죠?

이상으로 타입스크립트 인터페이스에 대해서 알아보았습니다.

소스코드

https://github.com/jin-co/web-mobile/tree/master/TypeScript

 

GitHub - jin-co/web-mobile

Contribute to jin-co/web-mobile development by creating an account on GitHub.

github.com

 

728x90
반응형

'프론트엔드 > 타입스크립트' 카테고리의 다른 글

데코레이터  (5) 2023.02.16
지네릭  (0) 2023.02.15
타입스크립트  (0) 2023.02.01