[TypeScript] type VS interface

TypeScript 를 사용해서 프로젝트를 진행 중인데 정확히 알지 못하는 부분이 많아 정리하는 중이다. 이번에는 type 과 interface 의 차이와 경우마다 어떤 걸 사용하는게 좋을지 찾아보았다.

interface

• 여러가지 타입을 갖는 property 로 이루어진 새로운 타입을 정의한다
• 타입 체크를 위해 사용된다.
• 객체에만 사용이 가능하다.
• 선언된 property 또는 method 구현을 강제하여 일관성을 유지한다.
• extends 키워드를 사용하여 인터페이스 또는 클래스를 단일 혹은 다중 상속받을 수 있다.
• property 모두 꼭 구현하지 않아도 된다. (선택적 property)
  - BUT! 선택적 속성은 추론을 할 수 없으므로 선택적 속성을 사용하여 로직을 짜는 경우 에러를 발생시킨다.

interface User {
  name: string;
  loginId: string;
  password: string;
  address?: string;
}

const user: User = {
  username: 'user1@gmail.com',
  loginId: 'user1',
  password: '1234'
}

 // 선택적 속성을 이용하여 로직 짜는 법 ==> 타입 가드 기법 사용
 if(user.password && user.password.length < 6) {
 	console.log('user password is too short')
 }

type

• 기존의 타입에 새로운 이름을 부여하는 것이다.
• 확장은 & 로 가능하다. (typescript 몇 버전이상부터 된다했는데.. 기억이안남..)
• computed value 로 사용이 가능하다.
• 인덱스 시크니처 라는 개념이 있다.
  • 객체의 인덱스에 대한 타입을 선언 (참고한 URL)

  // 인덱스 시그니처
  type CountryCodes = {
    [key: string]: string;
  };

  let countryCodes: CountryCodes = {
    Korea: "ko", // key: string
    UnitedStates: "us",
    UnitedKingdom: "uk",
  };

  type CountryNumberCodes = {
    [key: string]: number;
    Korea: number; // 필수 속성
    UnitedState: string; // ❌ No
  };

  let countryNumberCodes: CountryNumberCodes = {
    Korea: 410, // key: number 
    UnitedStates: 840,
    UnitedKingdom: 826,
  };

interface vs type ??

1. 확장하는 방법
- interface

```
// 확장하는 방법
	interface Flavors {
    	likeIt: number;
    }
    
    // extends 키워드 사용
    interface Choco extends Flavors {
    	ingredients: string;
    }
    
    const good: Choco = {
    	likeIt: 10,
        ingredients: 'chocolate'
    }


// 선언적 확장 예시
	interface Buldog {
    	name: string;
        age: number;
    }
    
    // 선언적 확장이 가능하다
    interface Buldog {
    	color: string;
    }
    
    const choco: Buldog = {
    	name: 'choco',
        age: 8,
        color: 'brown'
    }
```
- type
```
// 확장하는 방법
	type Flavors = {
    	likeIt: number
    }
    
    // & 키워드를 사용한다
    type Choco = Flavors & {
    	ingredients: string
    }
    
// 선언적 확장 예시
	// duplicate error 가 나므로 불가능하다.
```

2. computed value 가능 여부
- interface 는 불가능하고, type 은 가능하다.

3. 자료형
- interface 는 객체의 타입을 설정할 때 사용할 수 있으며, 원시 자료형에는 사용이 불가하다.
- type 은 모든 자료형에서 사용이 가능하다.

참고 및 결론

• typescript 팀에서는 interface 의 사용을 권장하고 있다.
• interface 가 성능이 더 좋다고는 하는데... 이유는 나중에 알아봐야겠다.
• 확장성을 고려한다면 interface 사용이 좋지 않을까??