반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 서버리스 컴퓨팅
  • 플라이웨이트패턴
  • bean Validation
  • 스프링 검증
  • 도커공식문서
  • next js app
  • NEXT JS
  • 메이븐 페이즈
  • Javadoc 자바독 자바주석 주석 Comment
  • 이펙티브 자바 item9
  • item8
  • 슬로우 쿼리
  • item9
  • try-with-resources
  • 작업기억공간
  • 메이븐 라이프사이클
  • 메이븐 골
  • 알고리즘
  • Pre-rendering
  • 자바스크립트 인터뷰
  • 토비의 스프링
  • 디자인패턴
  • 빈 검증
  • Next.js
  • 자바 검증
  • 자료구조
  • 이펙티브자바
  • serverless computing
  • 싱글턴
  • pnpm
  • 자바스크립트 면접
  • 자바스크립트
  • 자바 디자인패턴
  • rust
  • 추상 팩터리 패턴
  • 이펙티브 자바
  • 객체복사
  • 외래키 제약조건
  • 참조 해제
  • 느린 쿼리
  • prerendering
  • 자바
  • item7
  • 싱글톤 패턴
  • 러스트
  • 팩터리 메서드 패턴
  • 프로그래머의 뇌
  • MSSQL
  • Java
  • 싱글톤

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

Typescript

TS015. 타입스크립트에서 타입과 인터페이스의 차이

2023. 12. 30. 01:21

타입과 인터페이스의 차이

  • interface 는 시기상 type 보다 나중에 등장했다.
  • 그렇다고 interface 가 type 의 상위호환은 아니고 각자만의 역할이 존재한다.

오브젝트 선언 방법 알아보기

type 의 경우

  • 일반 자바스크립트에서 오브젝트를 선언하는 것과 흡사하다.
  • 함수의 시그니처를 선언할 때는 표현식처럼 선언한다.
// 일반 오브젝트 선언
type t = {
  x: number;
  y: number;
};
// 함수 시그니처
type t = (x: number, y: number) => number;
// 오브젝트 메서드
type t = {
  foo(x: number): number;
};

interface 의 경우

  • 인터페이스도 일반 자바스크립트에서 오브젝트를 정의하는 것과 흡사하게 선언한다.
  • 타입과 다르게 = 기호를 사용하지 않는다.
  • 함수의 시그니처를 선언할 때, 아래의 코드 스니펫처럼 선언한다.
// 일반 오브젝트 선언
interface inter {
  x: number;
  y: number;
}
// 함수 시그니처
interface inter {
  (x: number, y: number): number;
}
// 오브젝트 메서드
interface inter {
  foo(x: number): number;
}

interface 만 할 수 있는 것

  • type 은 못하고 interface 만 할 수 있는 것도 있다.

인터페이스 병합 (interface merging)

  • 아래와 같이 User 인터페이스를 2번 선언하면, 중복 선언에 대한 에러가 나는 것이 아니라 2개의 인터페이스가 머지된다.
interface User {
  name: string;
}

interface User {
  age: number;
}
  • 아래는 머지의 결과이다.
interface User {
  name: string;
  age: number;
}

인터페이스 병합 시 유의사항 1: 메서드 오버로드

  • 인터페이스에서 객체 메서드를 병합하면 오버로드가 일어난다.
interface int1 {
  foo(x: number): number;
}

interface int1 {
  foo(x: string): number;
}

const obj1: int1 = {
  foo(x) {
    // 에러, 오버로드가 되었기 때문에 string 이 들어왔을 때 반환 타입이 string 이 되어버림
    return x;
  },
};

const obj2: int1 = {
  foo(x) {
    // 정상, 오버로드 된 케이스들을 전부 처리 가능
    return 1;
  },
};

인터페이스 병합 시 유의사항 2: 콜백함수 시그니처가 다른 경우에 나는 에러

  • 특정 프로퍼티에 삽입되는 콜백함수의 시그니처를 정의할 때는 객체 메서드 때처럼 오버로드가 일어나지 않고 그냥 에러가 나버린다.
interface int2 {
  foo: (x: number) => number;
}

interface int2 {
  foo: (x: string) => number; // 에러, 프로퍼티 콜백함수로 줄 때 완전히 똑같은 타입으로만 interface merging 이 가능하다.
}

인터페이스 상속 (extends)

  • 인터페이스는 다른 인터페이스를 상속할 수 있다.
interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

구현 (implementation)

  • 인터페이스는 클래스와 함께 쓰여 클래스가 반드시 구현해야 할 것을 정의할 수 있다.
interface Shape {
  draw(): void;
}

class Circle implements Shape {
  draw() {
    // 구현
  }
}

type 만 할 수 있는 것

  • type 만 할 수 있는 것도 있다.

유니온 타입 (Union Type)

type StringOrNumber = string | number;

타입 인터섹션 (Type Intersection)

  • 여러개의 타입을 하나로 교차(Intersection) 시킬 수 있다.
type Employee = Person & { employeeId: number };

맵드 타입 (Mapped Types)

  • 맵드 타입을 만드는데 type 을 사용할 수 있다. 일부 속성을 기반으로 유형을 변환하는 방법이다.
type Readonly<T> = { readonly [P in keyof T]: T[P] };

튜플 및 특정 형태 만들기

  • 2차원 좌표의 경우, 배열 사이즈와 타입이 강제되어 있는 튜플로 표기하기 적합하다.
type Point = [number, number];

타입의 병합?

  • 타입은 인터페이스처럼 병합하려고 하면 에러가 나니 조심해야 한다.
  • 인터페이스처럼 병합하려면 intersection (&) 을 이용해야 한다.
type User = {
  name: string;
};

// 중복 선언 에러
type User = {
  age: number;
};

정리

  • 인터페이스는 클래스에 의해 확장되거나 구현될 수 있는 객체 모양을 정의하는데 더 적합하다.
    • 인터페이스 선언 병합을 지원하고, 객체지향 디자인 패턴에 더 부합한다.
  • 타입은 유니언와 인터섹션을 통해 타입을 결합하는데 더 유연하고 튜플과 같이 더 다양한 모양을 나타낼 수 있다.
반응형
저작자표시 비영리 (새창열림)

'Typescript' 카테고리의 다른 글

TS017. 타입스크립트에서 Any 타입 사용의 문제점  (0) 2023.12.30
TS016. 타입스크립트 타입, 인터페이스 상속과 오버라이딩  (0) 2023.12.30
TS014. Type Predicate (타입 술어, 타입 가드)  (0) 2023.12.28
TS013. 타입스크립트의 문장(statement)과 표현식(expression)  (0) 2023.12.28
TS012. 타입스크립트 함수 오버로딩  (0) 2023.12.28
    'Typescript' 카테고리의 다른 글
    • TS017. 타입스크립트에서 Any 타입 사용의 문제점
    • TS016. 타입스크립트 타입, 인터페이스 상속과 오버라이딩
    • TS014. Type Predicate (타입 술어, 타입 가드)
    • TS013. 타입스크립트의 문장(statement)과 표현식(expression)
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바