interface , Type alias(타입별칭)

interface 객체 타입명시 템플릿

주로 객체의 구조를 정의하는 데 사용된다.

"변수에 마우스를 올리면 툴팁으로 어떤 타입인가를 안보여준다던데"

==> 커맨드 누르고 마우스 갖다대니 보이네..

class를 예로 들어보겠다.

// 인터페이스 정의
interface Person {
    name: string;
    age: number;
    greet(): void;
}

// 인터페이스를 사용하는 객체
const person: Person = {
    name: 'Alice',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
};

// 인터페이스를 사용하는 클래스
class Employee implements Person {
    constructor(public name: string, public age: number) {}

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

 

 

서버와 데이터를 주고 받을 땐 이렇게 사용했다.

interface User {
  name: string;
  age: number;
  gender: string;
  height: number;
}

 

병합(Interface merging)

똑같은 인터페이스 이름이 정의가 되면,인터페이스는 합쳐지게 된다.

interface User ,interface User 이렇게 두개가 있으면 두개가 합쳐지는거임.

interface User {
  name: string;
  age: number;
  gender: string;
  height: number;
}

//병합
interface User {
	plus? : string;
    minus? : number;
}

//결과
interface User {
  name: string;
  age: number;
  gender: string;
  height: number;
  plus? : string;
  minus? : number;
}

 

 

 

확장(extends)

위에처럼 병합을 하는 거 외에도 재사용성을 늘릴 방법이 있다.

그것은 extends(확장)이다.

사용방법
interface "정의할 이름"extends "기존꺼이름"{ 타입이름: 타입}

//기존
interface User {
  name: string;
  age: number;
  gender: string;
  height: number;
}

//extends(확장)
interface Job extends User {
  money?: string;
  job?: string;
}

const jobObj: Job = { name: "박과장", age: 60, gender: "남자", height: 40 ,money : "부자"};

 

 

Type alias (타입 별칭)

인터페이스처럼, 타입별명을 만드는 것이다.

 interface가 아닌 "type"을 사용해 선언한다.

"변수에 마우스를 올리면 툴팁으로 어떤 타입인가를 보여준다" (interface도 지원함)

// 타입 별칭 정의
type Person = {
    name: string;
    age: number;
    greet(): void;
};

// 타입 별칭을 사용하는 객체
const person: Person = {
    name: 'Alice',
    age: 30,
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
};

// 타입 별칭으로 유니온 타입 정의
type ID = string | number;

// 타입 별칭으로 함수 타입 정의
type Add = (a: number, b: number) => number;

 

 

 

 

유니온(|) , 교차(&)를 사용해 복잡한 타입도 만들 수 있다.

type ID = string | number;
type Contact = Person & { email: string };

type Point = [number, number];
const point: Point = [10, 20];

'type'은 tuple,배열에 상황에서 매우 좋다.

 

 

const arr3: (number | string)[] = [1, "A", 3];

tuple을 사용하지 않고 쓰려면 , (자료형 | 자료형)[] 이런식으로 해주면 된다.

 

"type T(파스칼케이스로 변수명)" 이렇게 쓰는게 관례라고 한다.(명확히 이름만 써도 된다고함 ex:Person)

type TPerson = {
    name: string;
    age: number;
};

function getPerson<T>(data: T): T {
    return data;
}

 

 

== tuple : 해당 자리에 정확하게 타입지정해주는 것 ==

== 파스칼케이스(pascal Case) :첫단어의 첫글자,각단어의 첫글자를 대문자로 ex:PascalCase ==

 

 

 

어? 되게 유사한 거 같은데?

자 이제 interface , type alias의 차이점을 알아보겠다.

 

유니온(|) 타입 (type = ok , interface = X )

interface Cat {
  type: "cat";
  meow: () => void;
}

interface Dog {
  type: "dog";
  bark: () => void;
}

type Animal = Cat | Dog;

function handleAnimal(animal: Animal) {
  if (animal.type === "cat") {
    animal.meow();
  } else {
    animal.bark();
  }
}

Type Cat | Dog = OK. 

interface Cat | Dog = X

 

 

	interface	Type
주용도	객체	다양한 타입(객체,기본형 등등)
확장	가능(extends 사용)	타입을 조합하거나 교차 (&)
선언 병합	여러번 선언 , 선언이 자동으로 병합	딱 한번 선언가능 , 병합 불가
병합(중복 선언)	가능	불가능
복잡한 타입	유연한 타입 조합이 어렵다.	복잡한 타입 조합이 가능('type A = B')
타입체크	더 제한적	유연
예시	interface Person{name: string , ~}	type Person = {name : string, ~}

 

 

결론

객체 = interface

다른 것들 = type