5. 인터페이스와 타입 별칭

1. 인터페이스란 ?

• 상호간의 약속
• 타입을 interface를 통해 미리 정의 및 활용
• 중복 제거 및 생산성 증가

2. 인터페이스 활용해보기

• 변수에 인터페이스 활용

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

// 변수에 인터페이스 활용
var seho: User = {
  age: 33,
  name: '세호'
}

• 함수에 인터페이스 활용

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

// 함수에 인터페이스 활용
function getUser(user: User) {
  console.log(user);
}
const capt = {
  name: '캡틴',
  age: 100
}
getUser(capt);

// 함수의 스펙(구조)에 인터페이스를 활용
// 라이브러리 만들 때 유용합니다.
interface SumFunction {
  (a: number, b:number): number;
}

var sum: SumFunction;
sum = function(a: number, b:number): number {
  return a + b;
}

• 배열 및 인덱싱 활용

interface StringArray {
  [index: number]: string;
}

var arr: StringArray = ['a', 'b', 'c'];
//arr[0] = 10; //에러 발생

• 딕셔너리 패턴

// 딕셔너리 패턴
interface StringRegexDictionary {
  [key: string]: RegExp;
}

var obj: StringRegexDictionary = {
  // sth: /abc/,
  cssFile: /\.css$/,

  jsFille: /\.js$/
}

obj['cssFile'] = 'a'; //에러 발생( 일반 문자열이 들어갔기 때문이다. )

// key값들을 가져와 forEach 돌릴 때에 value값이 추론되어집니다. ( 마우스 오버시 string)
Object.keys(obj).forEach(function(value) {})

• 인터페이스 확장

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

interface Developer {
  name: string;
  age: number;
  language: string;
}

// 위와 같이 중복된 인터페이스 정의가 있다면 상속을 통해 중복을 제거합니다.
interface Devaloper extends Person {
  language: string;
}

// language만 입력시 에러 발생 : 상속받은 프로퍼티도 정의를 해줘야 하기 때문이다.
var captain: Devaloper = {
  language: 'hi',
  age: 100,
  name: '우동'
}

3. 비슷한 타입 별칭은 무엇일까?

• 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다.
• 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것을 의미합니다.
• VSCode 상의 프리뷰 상태로 다른 타입과 어떤 차이점이 있는지 확인할 수 있습니다.

type MyName = string;
const name: MyName = 'capt';

• 인터페이스와 비슷한 구조로도 정의할 수 있습니다.

type Developer = {
	name: string;
	skill: string;
}

• 프리뷰의 차이점

  • 인터페이스 ( Ctrl을 누르고 Persons 타입을 누르게 되면 상세히 볼 수 있으며 그 타입으로 이동가능합니다. )

  

  • 타입 별칭

  

4. 인터페이스와 타입 별칭의 차이점은 무엇일까?

• 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다.
• 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다.
• 결국 확장이 용이한 인터페이스로 선언하는 것이 가장 좋습니다.