인터페이스 / 타입 별칭

* 인터페이스는 타입을 정의하는 것.

* 타입을 정의해 놓은걸 똑같이 반복해서 쓰고 싶지않으면 extends를 써서 확장으로 쓰면 된다.

인터페이스

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

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

//함수에 인터페이스 활용
function getUser(user: User){
  console.log(user);
}
const capt = {
  name: 'captine',
  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];

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

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

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

interface Developer extends Person{
  language: string;
}

var josh: Developer = {
  name: '조쉬',
  age: 100,
  language: 'hi'
}

타입 별칭

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

var seho: Person = {
  name: '세호',
  age: 30
}

type Mystring = string;
var str:Mystring = 'hello';

type Todo = { id: string; title: string; done: boolean }
function getTodo(todo: Todo) {
  
}

var seho: Person 에서 Person 에 커서를 올렸을 경우

- interface로 정의됐을 때는
   - " interface Person "

- type 별칭으로 정의됐을 때는
type Person = {
    name: string;
    age: number;
}

로 뜨게 된다.

❓ 타입별칭과 인터페이스의 가장 큰 차이점?!

인터페이스는 확장이 가능 / 타입 별칭은 확장이 불가능

=> 인터페이스를 더 추천한다

 

개폐원리