[패캠] 타입스크립트 문법 - 인터페이스 기본 (Interface) (7/20)

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
    패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

07. 인터페이스 - 기본

---

인터페이스는 객체 데이터의 타입을 지정할 수 있는 기능이다.
이를 활용하면 신규 객체를 생성할 때마다 속성과 메소드에 타입을 일일이 지정해줄 필요 없다.

인터페이스는 앞서 타입에서 알아본 바와 같이 새로운 객체를 만들 때 이름을 지정한 별도의 객체 타입을 재사용할 수 있다. 인터페이스 사용 시 장점으로는, 인터페이스를 하나의 타입으로 사용하고 있는 객체에서 인터페이스에 정의된 프로퍼티의 이름과 속성(타입)이 다르면 감지하고 에러를 발생하여 사용자에게 알려줄 수 있다. 인터페이스에 지정된 타입에 맞게 객체 데이터를 만들어야 정상적으로 코드를 쓸 수 있다. 제약이 생기지만, 더 안정적이고 엄격한 타입 지정이 가능하다.

정의하는 방법은 interface 키워드와 함께 첫 글자가 대문자로 시작하는 pascal-case의 이름을 지정하고 중괄호를 사용한다. 지정한 이름을 통해 inteface는 재사용이 가능하다. 중괄호 내부는 인터페이스의 속성으로 key-value(이름:타입) 형태로 정의해주면 된다.

interface User {
    name: string
    age: number
    isValid: boolean
}

const heropy1: User = { // 타입 재사용
    name: 'Heropy',
    age: 85,
    isValid: true
}
const neo: User = { // 타입 재사용
    name: 'Neo',
    age: 102,
    isValid: false
}

 

인터페이스의 추가적인 기능 - 1

• 선택적 속성: ?
• 읽기 전용 속성: readonly

선택적 속성 (?)

물음표(?) 기호를 사용해서 선택적으로 속성을 쓸 것인지 말 것 인지를 결정한다. 아래 코드의 경우 isValid 속성은 있어도 되고 없어도 되다는 의미다. 반대로 물음표(?) 기호가 없는 속성은 필수로 존재해야 한다.

interface User {
    name: string
    age: number
    isValid?: boolean
}

const neo: User = {
    name: 'Neo',
    age: 102
}

읽기 전용 속성 (readonly)

읽기 전용으로만 속성을 지정한다.
읽기 전용으로 지정한 속성은 읽기만 가능해서 새로운 값을 할당할 수 없다.

interface User {
    name: string
    readonly age: number
    isValid?: boolean
}

const heropy: User = {
    name: 'Heropy',
    age: 85,
    isValid: true
}
heropy.isValid = false
heropy1.age = 22 // error

 

인터페이스의 추가적인 기능 - 2

• 함수 타입 - 호출 시그니처 (Call Signature)
• 인덱스 가능 타입 - 인덱스 시그니처 (Index Signature)
• 확장(상속)

인터페이스는 속성 뿐만 아니라 함수에도 타입을 지정할 수 있다. 이때 사용하는 방법이 호출 시그니처라는 문법이다.

기본적으로 객체의 속성을 조회할 때 점(.) 표기법을 사용하는데, 대괄호([]) 표기법을 사용하여 인덱싱을 할 수도 있다. 객체를 인덱싱 할 때는 인터페이스에 인덱스 가능 타입이 지정되어 있어야만 한다. 이렇게 인덱스 가능 타입을 지정할 때 사용하는 문법이 인덱스 시그니처이다.

JavaScript 클래스에서 각각의 클래스는 Extends 키워드를 통해서 확장 또는 상속하는 것이 가능했다. 인터페이스도 같은 개념으로 미리 작성된 인터페이스를 확장 혹은 상속하는 것이 가능하다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY