인터페이스

인터페이스는 다양한 프로퍼티, 혹은 메서드를 포함하고 있는 객체의 형태를 묘사하는 데에 사용됩니다.

참조 타입 Type Alias

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

Interface

interface Point {
  x: number;
  y: number;
}

인터페이스 메서드

객체가 어떤 메서드를 포함할 때, 메서드가 받고 반환하는 값을 타입 관점에서 지정할 수 있습니다.

첫 번째 형태

interface Person {
  readonly id: number;
  first: string;
  last: string;
  nickname?: string;
  sayHi(): string;
}

const thomas: Person = {
  first: "Thomas",
  last: "Hardy",
  nickname: "Tom",
  id: 21837,
  sayHi: () => {
    return "Hello";
  },
};

두 번째 형태

interface Person {
  readonly id: number;
  first: string;
  last: string;
  nickname?: string;
  sayHi: () => string;
}

const thomas: Person = {
  first: "Thomas",
  last: "Hardy",
  nickname: "Tom",
  id: 21837,
  sayHi: () => {
    return "Hello";
  },
};

매개변수 타입 지정 형태

interface Person {
  readonly id: number;
  first: string;
  last: string;
  nickname?: string;
  sayHi(name: string): string;
}

const thomas: Person = {
  first: "Thomas",
  last: "Hardy",
  nickname: "Tom",
  id: 21837,
  sayHi: (name) => {
    return `Hello ${name}`;
  },
};
thomas.sayHi("soyeon");

인터페이스 조합

인터페이스는 작업 이후에도 덮어쓰기 하거나 삭제하지 않고 인터페이스를 다시 열어 새로운 프로퍼티를 추가할 수 있습니다.

Interfaces

// 첫 번재 인터페이스
interface Dog {
  name: string;
  age: number;
}

// 두 번재 인터페이스
interface Dog {
  breed: string;
  bark(): string;
}

// 조합된 인터페이스 사용
const elton: Dog = {
  name: "beck",
  age: 0.5,
  breed: "mixed",
  bark() {
    return "Meow";
  },
};

Type Alias

type Dog {
  name: string;
  age: number;
}

//Duplicate identifier 'Dog'
type Dog {
  breed: string;
  bark(): string;
}

const elton: Dog = {
  name: "beck",
  age: 0.5,
  // Object literal may only specify known properties, and 'breed' does not exist in type 'Dog'
  breed: "mixed",
  bark() {
    return "Meow";
  },
};

인터페이스 확장

인터페이스는 extends 키워드를 통해 상속이 가능합니다.

interface Dog {
  name: string;
  age: number;
}

interface Dog {
  breed: string;
  bark(): string;
}

const elton: Dog = {
  name: "beck",
  age: 0.5,
  breed: "mixed",
  bark() {
    return "Meow";
  },
};

// ServiceDog 인터페이스틑 Dog 인터페이스의 메서드를 포함
interface ServiceDog extends Dog {
  job: true | false;
}

const loyal: ServiceDog = {
  name: "loyal",
  age: 4.5,
  breed: "Lab",
  bark() {
    return "Bark";
  },
  job: true,
};

다중 상속

interface Human {
  name: string;
}

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

// Enginner 인터페이스는 Human 인터페이스와 Employee 인터페이스를 모두 상속
interface Enginner extends Human, Employee {
  level: string;
  languages: string[];
}

const pierre: Enginner = {
  name: "sungryul",
  id: 123456,
  email: "zimablue@gmail.com",
  level: "junior",
  languages: ["JS", "TS"],
};

Types vs. Interfaces

1. 인터페이스는 객체 타입만 묘사할 수 있습니다.

Types

참조, 원시 타입 모두 사용 가능합니다.

type Color = "red" | "blue";

Interfaces

객체 타입만 사용 가능합니다.

// error '{' expected.
interface Color = "red" | "blue";


interface Color {
  color: "red" | "blue";
}

2. 인터페이스로는 이미 생성한 인터페이스에 내용을 추가하는 것이 가능합니다.

Interfaces

interface 이름을 중복해서 사용하면 동일 이름에서 사용한 프로퍼티들을 합칩니다.

interface Chicken {
  breed: string;
}
interface Chicken {
  numEggs: number;
}

const mbym: Chicken = {
  breed: "fried",
  numEggs: 2
}

Types

type 이름을 중복하여 사용할 수 없습니다.

type Chicken {
  breed: string;
}

// Duplicate identifier 'Chicken'.
type Chicken {
  numEggs: number;
}

3. 인터페이스는 extends를 사용한 상속, 타입은 &를 통한 교차 타입

Types

&를 사용합니다.

type Name = {
	name: string
}

type Person = Name & {
	age: number;
}

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

Interfaces

extends를 사용합니다.

interface Name = {
	name: string
}

interface Person extends Name {
	age: number;
}

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