TS

Interface

• Interface는 객체의 형태를 묘사하는 데에 사용된다. ⭐️ 오직 객체에만 사용된다.⭐️

• 리터럴 타입을 묘사하는 데는 인터페이스를 사용할 수 없다. => type을 사용해야함.
  ㄴ type 예시 ) type Color = "red" | "blue" [두 개 리터럴 사이의 유니온 타입] (이는 객체가 아닌 다른 타입이기 때문에 인터페이스를 사용할 수 없음.)

• 이처럼 모든 종류의 타입 별칭을 인터페이스로 대체할 수는 없다. 객체 이외의 다른 형태를 묘사하려면 type 별칭을 사용해야한다.

• 다양한 프로퍼티, 혹은 메서드를 포함하고 있는 객체에 사용된다.

• Union 타입에 interface를 쓰는 것은 불가능하다. 하지만 Union에 Type은 사용 가능.

• interface는 작업 이후에도 다시 열어 프로퍼티 속성을 추가할 수 있다. => interface를 재선언 할 필요가 없음. 전체를 덮어쓸 필요 없이 필요한 속성이 있다면 바로 추가하면 된다.
  ㄴ interface extends. (interface 고유 기능이다.) 인터페이스 확장 시, 다수의 인터페이스를 확장할 수도 있다.

type vs interface

• Interface는 객체의 형태를 묘사하는 데에 사용된다.⭐️ 오직 객체에만 사용된다.⭐️

• 리터럴 타입을 묘사하는 데는 인터페이스를 사용할 수 없다. => type을 사용해야함.
  ㄴ type 예시 ) type Color = "red" | "blue" [두 개 리터럴 사이의 유니온 타입] (이는 객체가 아닌 다른 타입이기 때문에 인터페이스를 사용할 수 없음.)

• 이처럼 모든 종류의 타입 별칭을 인터페이스로 대체할 수는 없다. 객체 이외의 다른 형태를 묘사하려면 type 별칭을 사용해야한다.

• interface는 작업 이후에 다시 열어 프로퍼티 속성을 추가할 수 있다. 하지만 type은 한 번 선언하면 끝이다.

• interface는 객체를 기반으로 한 extends 확장을 채택한다. 반면 Type은 &를 이용한 교차 타입을 사용한다.

요약

• 1. 인터페이스는 객체 형태 묘사에만 사용된다. 객체 형태가 아닌 다른 형태가 있을 경우에는 사용할 수 없음.
     1-1. 객체타입을 묘사할 때는 항상 인터페이스를 사용하기.
• 2. 인터페이스는 다중상속이 가능하다. Type에서는 &를 이용한 교차 확장이 가능.

// type
type Point = {
  x: number;
  y: number;
};

// interface
interface Points {
  x: number;
  y: number;
}

const point: Point = {
  x: 34234,
  y: 129,
};

console.log("point : ", point);

// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

// Interface
interface Person {
  name: string;
  age: number;
}

//  Use the type alias in the annotation
const sayHappyBirthday = (person: Person) => {
  return `Wow ${person.name}, today's ur happy day in ${person.age}`;
};

console.log(sayHappyBirthday({ name: "Tom", age: 18 }));

// interface에 method 추가하기
// interface에서 메서드를 정의할 때는 중괄호를 사용하지 않는다.🔥
// 중괄호는 언제사용? => 함수를 정의할 때 사용.
interface People {
  readonly id: number; // readonly가 붙은 key의 value값은 변경 불가함.
  first: string;
  last: string;
  nickname?: string; // ? << 있어도 되고, 없어도 되고 선택적임.
  // sayMyName: () => string; 화살표 함수 구문
  sayMyName(): string;
}

const thomas: People = {
  id: 16,
  first: "Thomas",
  last: "Party",
  nickname: "Arsnal",
  sayMyName: () => {
    return "Thomas Party!!!!";
  },
};

console.log("thomas : ", thomas);
console.log("thomas : ", thomas.sayMyName());

// interface
interface Product {
  name: string;
  price: number;
  applyDiscount(discount: number): number;
}

const Iphone: Product = {
  name: "Iphone13 mini",
  price: 99,
  applyDiscount(amount: number) {
    const newPrice = this.price * (1 - amount);
    this.price = newPrice;
    return this.price;
  },
};

console.log("Iphone : ", Iphone.applyDiscount(0.5));

// interface 프로퍼티 추가하기

// 어디 먼 곳에 있는 interface임..
interface Dog {
  name: string;
  age: number;
  sex: string;
}

const dog1: Dog = {
  name: "초코",
  age: 3,
  sex: "male",
};

// 어디 먼 곳에 있는 Dog interface에 color 프로퍼티 추가하기
interface Dog {
  color?: string;
  bark?(): string;
  breed?(): string;
}

const dog2: Dog = {
  name: "바닐라",
  age: 1,
  sex: "female",
  color: "Brown",
  bark: () => {
    return "Well Well";
  },
  breed: () => {
    return "Puddle";
  },
};

// interface extends
interface ServiceDog extends Dog {
  job: "drug sniffer" | "bomb" | "guide dog";
}

const serviceDog: ServiceDog = {
  name: "Tammy",
  age: 3,
  sex: "female",
  job: "drug sniffer",
};
console.log("serviceDog : ", serviceDog);

// 다중 interface 상속
interface Staff {
  name: string;
}

interface Employee {
  readonly id: string;
  email: string;
}

interface Engineer extends Employee, Staff {
  level: string;
  languages: string[];
}

const Toby: Engineer = {
  name: "Toby",
  id: "33823",
  languages: ["JS", "TS", "React"],
  level: "Junior",
  email: "test1@naver.com",
};

console.log("Toby : ", Toby.languages[2]);