Typescript type alias & interface

지금까지 변수와 함수에서의 타입 선언을 알아보았습니다.

직접적으로 타입을 넣는 경우도 있지만 type과 interface로 따로 뺄 수 있습니다.

 

타입을 따로 빼면 불필요한 반복이 줄어들어 확장성이 좋아집니다.

 

 

 

Type Aliases

---

기본 구조

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

function logUserData(user: UserData){
	console.log(user.name);
	console.log(user.age);
}

logUserData({name:"song", age:0}); // 성공
logUserData({name:"song", address:"pangyo"}); // 오류 address는 type에서 선언되지 않았다.
logUserData({name:"song"}); // 오류 age가 없다.

상단에 타입을 선언하고 기존에 선언했던 곳에 동일하게 선언하면 됩니다.

 

확장(상속)

type UserName = {name: string};
type UserData = UserName & {age: number};

확장(상속)을 하려면 &를 이용하시면 됩니다.

UserName과 {age: number}를 합쳐 UserData라는 타입을 선언합니다.

type alias는 선언적 확장이 불가능합니다.

 

 

 

Interfaces

---

기본 구조

interface IUserData {
    name:string,
    age:number,
}
function logUserData(user:IUserData){
	console.log(user);
}

인터페이스도 타입과 동일하게 선언합니다.

 

확장(상속)

 interface IUserName {name: string}
 interface IUserData extends IUserName {age: number}

 function logUserData(user:IUserData){
     console.log(user.name);
     console.log(user.age);
 }

확장(상속)을 하기 위해서는 "extends"를 사용하시면 됩니다.

 

선언적 확장

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

 function logUserData(user:IUserData){
     console.log(user.name);
     console.log(user.age);
 }

extends말고 위와 같이 두 번 선언하게 되면 확장이 됩니다.

 

함수 구조를 정의

interface ISum{
    (a: number, b: number) : number;
}

let sum: ISum = (a, b) => a + b;

sum(1, 2) // 성공
sum("1", 2) // 오류 string타입을 넘기고있습니다.

함수 구조를 정의하여 함수를 선언할 때 매개변수와 리턴 값을 따로 정의하지 않아도 됩니다.

 

 

 

 

Type Aliases vs Interfaces  차이점

---

타입과 인터페이스 모두 타입을 선언하고 사용하는 것은 동일합니다.

그렇다면 뭐가 다를까요?

 

1. 선언적 확장

 type은 선언적 확장이 불가능하지만 interface는 가능합니다.

 

2. interface는 타입을 정의하는 것이지만 type은 정의한 타입을 이름을 부여하는 것입니다.

 

Typescript 팀에서는 type보다 interface를 권장하고 있습니다.

필요에 따라 사용하시면 될 것 같습니다.

 

 

 

참고 : 

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases

https://medium.com/humanscape-tech/type-vs-interface-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-f36499b0de50