[패캠] 타입스크립트 문법 - 인터페이스 상속 (extends) (10/20)

Fastcampus 프론트엔드 개발 강의

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

 

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

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

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

 

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

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

 

10. 인터페이스 - 확장(상속)

---

자바스크립트 클래스 문법에서 extends 키워드로 클래스의 확장(상속) 개념에 대해서 배웠다. 인터페이스에서도 확장(상속)의 개념을 사용할 수 있다.

인터페이스의 상속 개념은 아주 간단하다. 인터페이스 부분에 extends 키워드를 통해서 다른 인터페이스의 내용을 상속 받아서 쓸 수 있다.

인터페이스의 상속: extends 키워드

아래 코드는 UserB 인터페이스가 UserA의 인터페이스 내용을 상속 받아서 추가로 쓸 수 있다는 개념이 된다. UserB 같은 경우에는 isValid 속성의 boolean 데이터 타입만 지정되어 있는데, UserA 인터페이스의 내용을 전부 다 상속 받기 때문에 UserB는 name과 age 속성도 존재한다.

interface UserA {
    name: string
    age: number
}
interface UserB extends UserA {
    isValid: boolean
}

const neo: UserB = {
    name: 'Neo',
    age: 102,
    isValid: true
}

인터페이스의 중복

인터페이스의 이름을 같게 하고, 중복되는 인터페이스 부분에서 어떤 특정 속성 타입을 추가로 작성할 수 있다. 주의할 부분은 기존에 존재하는 속성의 이름을 작성 했다면, 기존의 존재하는 속성의 타입을 그대로 명시해줘야 문제가 없다. 속성의 이름이 중복됐을 때 다른 타입을 입력하면 Error가 발생한다.

interface FullName {
    firstName: string
    lastName: string
}
interface FullName {
    middleName: string
    lastName: boolean // Error
}

const fullName: FullName = {
    firstName: 'Tomas',
    middleName: 'Sean',
    lastName: 'Connery'
}

다시 정리하면, 인터페이스라는 개념은 같은 이름으로 여러 개를 만들 수 있고, 한번 지정된 속성은 중복되는 다른 인터페이스에서 같은 타입으로 만들어야 문제가 발생하지 않는다.

 

 

Reference

---

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

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

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

 

김영웅 강사님 유튜브 채널

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

HEROPY