TIL 23.07.27 타입과 인터페이스

타입과 인터페이스

 

공통점

 

1. 타입 정의 : 타입과 인터페이스는 둘 다 새로운 타입을 정의할 때  사용하며, 여러 변수에 동일한 타입을 재사용 하거나 함수의 매개변수 및 타입 반환을 할 때 사용된다. 

 

2. 타입 체킹 : 타입스크립트는 타입과 인터페이스를 이용하여 코드를 검사, 컴파일 할 때 타입오류를 찾아낸다. 

 

 

// 인터페이스 예제
interface Person {
  name: string;
  age: number;
}

// 타입 예제
type PersonType = {
  name: string;
  age: number;
};

// 확장 예제
interface Car {
  brand: string;
  model: string;
}

interface ElectricCar extends Car {
  batteryCapacity: number;
}

// 타입 앨리어싱 예제
type Car = {
  brand: string;
  model: string;
};

type ElectricCar = Car & {
  batteryCapacity: number;
};

 

---

 

차이점

 

1. 선언방법

타입 : type 키워드를 이용하여 선언

인터페이스 : interface 키워드를 이용하여 선언

 

2. 확장(extends)

타입 : 타입은 확장할 수 없다.

인터페이스 : 다른 인터페이스를 extends 로 확장할 수 있다.

 

3. 활용범위 

타입 : 객체 뿐 아니라 유니온, 인터섹션, 기본타입 등을 정의하는데 사용된다. 

인터페이스 : 객체의 타입을 정의 할  때 사용된다.  

 

4. 타입 앨리어싱(Type Alias)

타입 : 인터페이스와 다르게 타입 앨리어싱을 사용하여 타입을 정의한다. 

인터페이스 : 확장 가능하고, 디코레이터 패턴과 함께 사용할 수 있다.

 

---

 

타입앨리어싱이란?

기존의 타입에 새로운 이름을 부여하는 기능으로, 기존의 타입을 별칭으로 지정하여 타입을 참조할 수 있게 해준다.

 

type TypeName = TypeDefinition;

 

여기서 TypeName 은 새로운 타입의 이름을 나타내고, TypeDefinition 은 해당 별칭에 부여할 타입을 나타낸다. 

 

// 객체 타입의 타입 앨리어싱
type Person = {
  name: string;
  age: number;
};

// 유니온 타입의 타입 앨리어싱
type NumberOrString = number | string;

// 인터섹션 타입의 타입 앨리어싱
type MovableAndReadable = { move: () => void } & { read: () => void };

 

이는 다음과 같이 사용할 수 있다.

 

const personData: Person = { name: "John", age: 30 };
const value: NumberOrString = 42;
function performAction(action: MovableAndReadable) {
  action.move();
  action.read();
}