step 1

type alias

: 어떤 타입을 부르는 이름

interface

: 어떤 새로운 타입을 만들어 내는 것

함수를 선언할 때 차이

// function
// type alias
type EatType = (food: string) => void;

// interface
interface IEat {
  (food: string): void;
}

배열을 선언할 때 차이

// array
// type alias
type PersonList = string[];

// interface
interface IPersonList {
  [index: number]: string;
}

interscection을 선언 할 때 차이

interscection: 여러 타입을 합쳐서 사용하는 타입

interface ErrorHandling {
  success: boolean;
  error?: {message: string};
}

interface ArtistsData {
  artists: {name: string}[];
}

// type allas
type ArtistsResponseType = ArtistsData & ErrorHandling;

// interface
interface IArtistsResponse extends ArtistsData, ErrorHandling{}

let art: ArtistsResponseType;
let iar: IArtistsResponse;

union을 사용할 때 차이

type alias는 사용가능 하지만 interface는 사용 불가능

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

// type alias에서는 union하기 편함
type PetType = Bird | Fish;

// 인터페이스에서는 union 하기 힘들다.
// 에러 발생
interface IPet extends PetType {};
// 에러 발생
class Pet implements PetType {};

Declaration Merging - 인터페이스에만 있는 기능

같은이름의 인터페이스를 생성하여 기능을 확장하여 사용할 수 있다.

// Declaration Merging - 인터페이스에만 있는 기능
// 같은 이름의 인터페이스를 선언 (기능을 확장할때 주로 사용)
interface MergingInterface {
  a: string;
}

interface MergingInterface {
  b: string;
}

let mi: MergingInterface;

인터페이스 변수에 readonly를 설정하면 

처음 선언했던 변수를 수정할 수 없다.

// 인터페이스 선언
interface Person8 {
  name: string;
  age?: number;
  readonly gender: string;
}

const p81: Person8 = {
  name: 'Mark',
  gender: 'male'
}

// readonly 이기 때문에 변경 불가
// p81.gender = "female";

console.log(p81);
console.log(p81.name);
console.log(p81.gender);

함수선언할때 인터페이스 사용하는 방법

interface HelloPerson {
  (name: string, age?: number): void;
}

// 함수 생성
const helloPerson: HelloPerson = function(name: string, age?: number){
  console.log(`안녕하세요! ${name} 입니다.`)
}

// 함수 사용
helloPerson("mark", 22);

인터페이스에서 인터페이스를 상속 받는 방법

ts

interface IPerson2 {
  name: string;
  age?: number;
  
}

// IPerson2를 상속받음
interface IKorean extends IPerson2 {
  city: string;
}

// 상속받은 인터페이스의 변수값을 입력
const k: IKorean = {
  name: "홍길동",
  city: "서울"
};

console.log(`${k.name}, ${k.city}, ${k.toString}`);

인터페이스를 상속받는 class 생성 예제

interface IPerson1 {
  name: string;
  age?: number;
  hello(): void;
}

class Person implements IPerson1 {
  name: string;
  age?: number | undefined;

  // name을 초기화
  constructor(name: string){
    this.name = name;
  }

  hello(): void {
    console.log(`안녕하세요! ${this.name} 입니다.`);
  }

}

const person = new Person('Mark');
person.hello();

const person11: IPerson1 = new Person("Mark2");
person11.hello();

인터페이스 내부에서 함수 사용 예제

interface Person4 {

  name: string;
  age: number;
  hello(): void;
}

const p41: Person4 = {
  name: 'Mark',
  age: 22,
  hello: function(): void{
    console.log(`안녕하세요! ${this.name} 입니다.`);
  },
};

const p42: Person4 = {
  name: 'Mark',
  age: 22,
  hello(): void{
    console.log(`안녕하세요! ${this.name} 입니다.`);
  },
};

// const p43: Person4 = {
//   name: 'Mark',
//   age: 22,
//   // 화살표 함수는 this를 사용할 수 없다.
//   hello: (this: Person4): void => {
//     console.log(`안녕하세요! ${this.name} 입니다.`);
//   },
// };

p41.hello();
p42.hello();