35일차[Type / Interface]

진하의 메모장·2025년 2월 25일

공부일기

목록 보기

41/66

2025 / 02 / 25

오늘 수업 시간에는 타입스크립트에서의 Type과 Interface를 배웠습니다.
C# 세미나에서 배운 인터페이스와 크게 다르지 않아서 괜찮았습니다.
오늘은 Type과 Interface의 차이에 대해 정리하여 포스팅하겠습니다.

💌 Type

타입 (Type)

타입은 변수나 함수 등의 데이터의 구조를 정의하는 데 사용됩니다.

"이 값은 무엇이 될 수 있나?"를 지정한다고 생각하시면 됩니다.

1. 특징

타입을 정의할 때 type 키워드를 사용합니다.

유니온 타입, 튜플, 객체 등 다양한 형태를 정의할 수 있습니다.

타입은 기본 데이터 타입부터 복잡한 구조까지 모두 다룰 수 있습니다.

// 기본 타입 정의
type NewStringType = string;
type NewNullType = null;
type NewNumberType = number;

// 유니온 타입 정의
type MaleOrFemale = "male" | "female";

const string1: NewStringType = "hello";

// 객체 형태의 타입 정의
type IdolType = {
  name: string;
  age: number;
};

const Leehan: IdolType = {
  name: "이한",
  age: 22,
};

2. 유니온 타입

유니온 타입은 여러 타입 중 하나를 가질 수 있는 경우 사용합니다.

type MaleOrFemale = "male" | "female";
const gender: MaleOrFemale = "male"; // "male" 또는 "female"만 가능

💌 Interface

인터페이스 (Interface)

인터페이스는 객체의 구조를 정의하는 데 사용합니다.

주로 객체지향 프로그래밍에서의 클래스와 비슷한 역할을 합니다.

1. 특징

interface 키워드를 사용하여 객체의 구조를 정의합니다.

선언한 인터페이스는 extends를 사용하여 다른 인터페이스를 확장할 수 있습니다.

인터페이스는 주로 객체의 구조에 사용되며, 타입은 보다 폭넓게 사용됩니다.

interface IdolInterface {
  name: string;
  age: number;
}

const wonyoung: IdolInterface = {
  name: "장원영",
  age: 22,
};

// 인터페이스를 사용하여 데이터 구조를 설정
interface IdolIT {
  name: string;
  age: number;
}

const heywon: IdolIT = {
  name: "오해원",
  age: 23,
};

💌 Optional

옵셔널 (Optional) 속성

옵셔널 속성을 설정하면 해당 속성을 선택적으로 사용할 수 있습니다.

값을 넣어도 되고 넣지 않아도 오류가 발생하지 않습니다.

interface IdolOptional {
  name: string;
  age?: number; // age는 선택적 속성
}

const minji: IdolOptional = {
  name: "민지",
  // age를 생략해도 오류가 발생하지 않음
};

💌 차이점

타입과 인터페이스의 차이점

조금 헷갈리는 것 같아서 타입과 인터페이스의 차이점을 정리해보았습니다.

1. 객체 선언 방식

인터페이스는 객체의 형태를 정의하는 데 주로 사용합니다.

타입은 기본 데이터 타입을 포함한 다양한 형태를 정의할 수 있습니다.

객체 외에도 유니온 타입, 튜플, 함수 시그니처 등을 정의할 수 있습니다.

// 인터페이스로 객체 선언
interface IdolInterface {
  name: string;
  age: number;
}

// 타입으로 객체 선언
type IdolType = {
  name: string;
  age: number;
};

2. 확장 가능성

인터페이스는 다른 인터페이스를 extends하여 확장할 수 있습니다.

타입은 & 연산자를 사용하여 타입을 결합하거나 교차 타입을 만들 수 있습니다.

// 인터페이스 확장
interface IdolDetails extends IdolInterface {
  group: string;
}

const idol: IdolDetails = {
  name: "이한",
  age: 22,
  group: "아이돌 그룹",
};

// 타입 결합
type IdolDetailsType = IdolType & { group: string };

const idolType: IdolDetailsType = {
  name: "유진",
  age: 23,
  group: "아이돌 그룹",
};

3. 중복 선언

인터페이스는 같은 이름으로 중복 선언이 가능합니다.

선언된 인터페이스들이 병합되어 하나로 합쳐집니다.

타입은 중복 선언이 불가능하고, 한 번 정의된 타입은 다시 정의할 수 없습니다.

// 인터페이스는 중복 선언 가능
interface IdolInterface {
  name: string;
  age: number;
}

interface IdolInterface {
  group: string;
}

const idolMerged: IdolInterface = {
  name: "정국",
  age: 24,
  group: "방탄소년단",
};

// 타입은 중복 선언이 불가능
type IdolType = {
  name: string;
  age: number;
};

// 오류: 이미 IdolType이 선언됨
// type IdolType = {
//   group: string;
// };

4. 역할 구분

타입은 유연한 정의를 제공하고, 원시 타입을 포함한 데이터를 정의할 수 있습니다.

인터페이스는 객체지향적인 방식으로 객체의 구조를 정의하며, 확장이 가능합니다.

💌 비교하기

타입과 인터페이스에 대해 알아보기 쉽게 표로 따로 정리해보았습니다.

특징	타입 (Type)	인터페이스 (Interface)
선언 방법	type 키워드를 사용	interface 키워드를 사용
타입 선언	원시 타입을 선언할 수 있음 (string, number 등)	원시 타입을 선언할 수 없음, 주로 객체의 형태를 정의하는 데 사용
객체 구조 정의	객체 형태도 정의 가능	객체 형태를 정의하는 데 주로 사용
확장 가능성	& 연산자를 사용하여 타입을 확장 가능	extends를 사용하여 다른 인터페이스를 확장 가능
중복 선언	중복 선언 불가능 (같은 이름의 타입을 두 번 선언할 수 없음)	중복 선언 가능 (같은 이름의 인터페이스를 선언하면 병합됨)
타입의 병합	타입은 병합되지 않음	같은 이름의 인터페이스가 병합됨
그 외	type은 기본 데이터 타입 외에도 튜플, 함수 시그니처 등도 정의 가능	interface는 주로 객체의 형태를 정의하는 데 초점

💌 요약하기

타입(type)은 더 유연하고, 기본 데이터 타입, 유니온 타입, 교차 타입, 함수 시그니처 등 다양한 형태를 다룰 수 있습니다.

인터페이스(interface)는 객체 지향적인 특성을 지니며, 객체의 형태를 정의하고, 확장성이 뛰어나며 클래스와의 관계를 잘 다룹니다. 또한, 중복 선언을 통해 인터페이스를 병합할 수 있다는 장점이 있습니다.

💌 실습 예제

변수를 선언하는 부분은 옵셔널을 적용해서 몇 개 생략하였습니다..

1. 다음 요구사항을 만족하는 UserType 타입을 정의하고 변수를 생성하시오.

name (문자열)

age (숫자)
type UserType = {
   name: string;
   age: number;
};

const Leehan: UserType = {
   name: "이한",
   age: 22,
};

2. 다음 요구사항을 만족하는 Book 인터페이스를 정의하고 변수를 생성하시오.

title (문자열)

author (문자열)

publishYear (숫자)
interface Book {
   title: string;
   author?: string;
   publishYear?: number;
}

const book: Book = {
   title: "아몬드",
};

3. 다음 요구사항을 만족하는 Movie 인터페이스 정의하고 변수를 생성하시오.

title (문자열)

director (문자열)

runningTime (숫자,옵셔널)
interface Movie {
   title: string;
   director?: string;
   runningTime?: number;
}

const show: Movie = {
   title: "라라랜드",
};

4. 다음 요구사항을 만족하는 AnimalType 타입과 AnimalInterface 인터페이스를 각각 정의하고 변수를 생성하시오.

name (문자열)

age (숫자)
type AnimalType = {
   name: string;
   age: number;
};

interface AnimalInterface {
   name: string;
   age: number;
}

const duna: AnimalType = {
   name: "두나",
   age: 10,
};

const bang_ul_i: AnimalInterface = {
   name: "방울이",
   age: 4,
};

35일차 후기

인터페이스는 다른 프로그래밍 언어를 배울 때 많이 들어봐서 괜찮았습니다.

타입도 기존에 알고있던 내용이라서 딱히 걸린 부분은 없는 것 같습니다.

그래도 어떤 점이 다른지 헷갈리는 부분은 있기 때문에 확실히하고 넘어가야겠습니다.

인터페이스를 하면 클래스와 상속이 무조건 나오게 되는데.. 이 내용을 배우게 되면 확실히 어려워질 수도 있을 것 같아서 개념이라도 공부를 해놔야겠습니다. (๑ᵔ⤙ᵔ๑)