TypeScript: 타입스크립트를 사용하는 이유, Type과 Interface의 차이점

[Hah-nna]

타입스크립트 사용 이유, Type과 Interface의 차이점

타입스크립트 사용 이유

1. 정적 타입 체크 자바스크립트는 런타임 시 타입이 결정됨 따라서 타입관련 오류가 발생시 발견하기 어렵다는 단점이 있음 그래서 타입스크립트를 사용해 코드를 작성하는 시점에 타입 관련 오류를 발견하고 수정할 수 있음

2. 타입추론 타입을 명시적으로 지정하지 않아도 타입스크립트가 코드를 보고 타입을 추론함. 이를 통해 불필요한 타입 지정을 줄일 수 있고, 가독성도 높일 수 있음

Type과 Interface의 차이점

인터페이스는 객체의 형태를 묘사하는 데 사용됨 즉, 다양한 프로퍼티, 메소드 등을 포함하는 객체에 사용함

타입은 다 가능함

Type과 Interface의 사용법에서의 차이점

1. 프로퍼티 추가 인터페이스는 따로 선언해도 인터페이스의 변수명이 같으면 프로퍼티가 합쳐짐 타입은 타입의 변수명이 같아도 인터페이스처럼 알아서 합쳐지지 않고 에러 발생함

// interface

interface Person {
    name: string;
}

interface Person {
    age: number;
}

const haha: Person = {
    name: 'jerry',
    age: 4
} // 에러 X

// Types

type Person = {
    name: string;
}

type Person = {
    age: number;
}

const haha: Person = {
    name: 'jerry',
    age: 4
} // 에러 O

2. 프로퍼티 확장 인터페이스는 extends 키워드를 사용해 확장할 수 있고 타입은 & 기호를 사용해 확장할 수 있음

둘 다 여러 개의 다른 인터페이스나 타입을 상속받아 확장시킬 수도 있음(다중 상속)

// Interface

interface Name = {
    name: string
}

interface Person extends Name{
    age: number;
} 

const person: Person = {
    name: 'gh',
    age: 42
}

// Type

type Name = {
    name: string
}

type Person = Name & {
    age: number;
} 

const person: Person = {
    name: 'gh',
    age: 42
}

TypeScript Generic Utility Types

이미 정의한 타입을 변환할 때 사용하는 문법임

• Partial : 특정 타입의 일부 프로퍼티만 나타내는 타입
• Readonly : 모든 프로퍼티를 읽기 전용으로 설정.
• Record<K,T> : <key, type>으로 Key(key):Type(value)형태임

interface Person {
  age: number
}

type Member = 'mimi' | 'yujin' | 'youngji'

const example : Record<Member, Person> = {
   'mimi': {age: 25},
   'yujin': {age: 30},
   'youngji': {age: 2}
}

• Pick : 특정 타입에서 몇 개의 속성을 선택한 타입

  
  interface User {
  name: string;
  email: string;
  age: number;
  }

type aaType = Pick<User, 'email', | 'phone'>

const user: aaType = { email: 'koko@test.com, age: 111 }

- Omit<T,K> : T 중에서 k를 제외한 속성을 사용하고 싶을 때 사용함

interface User { email: string; password: string; game: { kill: number; death: number; assist: number; } }

const userOne: Omit<User, 'game'> = { email: 'game123@google.com', password: '1234', };