type, interface

choi seung-i·2023년 3월 24일
1

TS로그

목록 보기
7/7
post-thumbnail

type과 interface

둘 다 데이터의 객체나 값의 타입을 정의하기 위해 사용

type

  • 기존 타입을 재사용하거나 새로운 타입을 정의할 때 사용

  • 일반 타입처럼 사용되기 때문에 타입 앨리어싱(Type Aliasing)이라고도 불림

  • computed property나 Union타입이나 Tuple타입 등을 정의하는데 사용

  • 타입 주석자리에 사용 가능

    // type
    type Animal = {breath: true};
    
    const sseung1: Animal & {think: true} = {breath: true, think: true}

- union( | )

  • 보통 또는 이라고 부른다 string | number (string 또는 number)
type Person = {name: string} | {age: number};

// 속성 중 한개만 있어도 에러가 나지 않음
const my: Person = {name: "sseung" };
const my: Person = {age: 33};

- intersection(&)

  • 둘 다여야한다 (확장)
// 속성 중 한개만 없어도 에러가 남
type Person = {name: string} & {age: number};

const my: Person = {name: "sseung", age: 33}; // 가능
const my: Person = {name: "sseung"}; // age가 없음으로 에러

interface

  • 객체의 형태를 정의

extends

  • 객체지향에서 사용하는 것으로, class 뿐만아니라 interface에서도 사용 가능
  • 기존 클래스를 상속받아 새로운 클래스를 만들 때 'extends'로 부모 클래스를 지정할 수 있다.
  • 자식 클래스에서 부모클래스로부터 상속받은 속성과 메서드를 오버라이드하여 새롭게 정의 가능
// interface에서 extends 사용 예시
interface Person {
  name: string;
  age: number;
  
  sayHello(): void;
}

interface Employee extends Person {
  employeeID: number;
}
// class에서 extends 사용 예시
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

class Employee extends Person {
  employeeID: number;

  constructor(name: string, age: number, employeeID: number) {
    super(name, age);
    this.employeeID = employeeID;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and my employee ID is ${this.employeeID}.`);
  }
}

🧐 내 생각 정리

상황에 맞게 골라쓰면 되지만 보통
객체를 사용할 때에는 interface, 그 외의 타입 지정해야할 때에는 type을 쓰면 되는 것 같다.


공부하며 정리&기록하는 ._. 씅로그

profile
Front-end

0개의 댓글