​

개요

저번에는 타입을 어떻게 정의하고 사용하는지에 대해 알아봤는데

이번에는 상속을 이용해서 타입을 조합해 정의해보겠습니다!

타입 정의 방법

type Test = {
  name: string,         // 이름
  description: string,  // 설명
  age: number,          // 나이
  func: () => void      // 함수
}

테스트로 타입을 정의 해보았습니다.

이 부분이 저번에 알려드린 내용과 같은데요.

하지만 이렇게 사용하게 되면 특수한 상황,

예를 들면 name과 age의 타입만 필요한 상황, func와 name의 타입 정의만 필요한 상황 같은 특수한 상황이 있을 수 있는데요

이럴때 필요한게 상속입니다.

상속이란?

마치 레고를 조립하듯이 기본이 되는 기본 블럭이 있고

거기에 특수한 기능을 가진 블럭을 붙이는 겁니다.

예시

// 형태
type Shape = {
  style: string         // 스타일
  color: string         // 색상
}

// 상세정보
type Details = {
  name: string,         // 이름
  description: string,  // 설명
  date: number          // 날짜
}

// 자동차 베이스
type Car = {
  company: string,      // 이름
  country: string       // 설명
}

만약 이러한 값이 있다고 하였을때

자동차 베이스에 형태 + 상세정보를 합쳐야 하는 상황이 있는데

지금과 같은 경우엔 나뉘어져 있어 조립이 필요한 상황입니다.

이 경우 다음과 같이 하면 됩니다.

// 형태
interface Shape {
  style: string;         // 스타일
  color: string;         // 색상
}

// 상세정보
interface Details extends Shape {
  name: string;         // 이름
  description: string;  // 설명
  date: number;         // 날짜
}

// 자동차 베이스
interface Car extends Details {
  company: string;      // 이름
  country: string;      // 설명
}

결과

이렇게 할 경우 Car 타입을 사용하면 이런 형태를 지니게 됩니다.

const myCar: Car = {
  style: "SUV",
  color: "red",
  name: "My Car",
  description: "This is a great car!",
  date: 2024,
  company: "Toyota",
  country: "Japan"
};

상속의 방법

상속의 방법은 interface의 extends만 있는게 아닌데요 type에 &를 붙여 조합하는것 또한 가능합니다.

그럼 결국 둘은 똑같은게 아니냐는 생각이 들수도 있을텐데

비유로 다름을 설명해보자면

const(상수)는 재선언 재할당이 불가능합니다.

var(변수)는 재선언 재할당이 가능합니다.

extends와 &는 이 차이인겁니다.

interface의 extends는 재선언 재할당이 불가능합니다.

type의 &는 재선언 재할당이 가능합니다.

예시

interface의 경우

interface User {
    name: string;
}

interface User {
    age: number; // 병합됨
}

const user: User = {
    name: "CODi",
    age: 28,
};

type의 경우

type User = {
    name: string;
};

type User = { // 오류 발생
    age: number;
};

​​마무리

이번에는 타입의 상속에 대해 알아보았습니다.

그래도 블럭으로 비유하며 생각해보니 상속이라고 외우는것보다 더 쉽네요 ㅋㅋㅋ