📒 Interfaces

📜 Interfaces

Interfaces란 어떤 타입을 만드는 방식인데 내부적인 것과 상관없이 외부적으로 드러나는 객체의 사용방식이 적힌 타입이다.

function hello(person: { name: string; age: number; }): void { 
      console.log(`안녕하세요! ${person.name} 입니다.`);
  }
  
  const p: { name: string; age: number; } = { 
      name: 'Mark',
      age: 35 
  };
  
  hello(p); // 안녕하세요! Mark 입니다.



  //Interfaces 사용하면

  interface Person {
      name: string; 
      age: number; 
  }
  
  function hello(person: Person): void {
      console.log(`안녕하세요! ${person.name} 입니다.`); 
  }
  
  const p: Person = { 
      name: 'Mark', 
      age: 35
  };
  
  hello(p); // 안녕하세요! Mark 입니다.

❓ optional property

상황에 따라 있을 수도 없을 수도 있는 optional property
크게 두 가지 방법이 있는데 첫번째 방법은 다음과 같이 ?를 넣는 것이다.

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

  function hello(person: Person): void {
      console.log(`안녕하세요! ${person.name} 입니다.`); 
  }

  const p1: Person = { 
      name: 'Mark', 
      age: 35
  };

  const p2: Person = { 
      name: 'Anna' 
  };

  hello(p1); // 안녕하세요! Mark 입니다. 
  hello(p2); // 안녕하세요! Anna 입니다.

?넣는 방법이 아닌 두 번째 방법은 Indexable types이다.
어떤 이름의 프로퍼티가 와도 상관없다.

interface Person {
      name: string;
      age?: number; 
      [index: string]: any; 
  }

  function hello(person: Person): void {
      console.log(`안녕하세요! ${person.name} 입니다.`); 
  }

  const p1: Person = { 
      name: 'Mark', 
      age: 35,
  };

  const p2: Person = { 
      name: 'Anna', 
      systers: ['Joy', 'Hani'] 
  };

  const p3: Person = { 
      name: 'Bokdaengi', 
      father: p1,
      mother: p2 
  };

  hello(p1); // 안녕하세요! Mark 입니다.
  hello(p2); // 안녕하세요! Anna 입니다.
  hello(p3); // 안녕하세요! Bokdaengi 입니다.

🧡 function in interface

interface Person { 
      name: string; 
      age: number; 
      hello(): void; 
  }

  const p1: Person = { 
      name: 'Mark', 
      age: 35,
      hello: function (): void {
          console.log(this);
          console.log(`안녕하세요! ${this.name} 입니다.`);
      } 
  };

  const p2: Person = { 
      name: 'Mark',
      age: 35,
      hello(): void {
          console.log(this);
          console.log(`안녕하세요! ${this.name} 입니다.`);
      } 
  };

  const p3: Person = { 
      name: 'Mark', 
      age: 35,
      hello: (): void => {
          console.log(this);
          console.log(`안녕하세요! ${this.name} 입니다.`);//this 에러
      } 
  };

  p1.hello(); // 안녕하세요! Mark 입니다. 
  p2.hello(); // 안녕하세요! Mark 입니다. 
  p3.hello(); // 안녕하세요! 입니다.

💛 class implements interface

interface를 이용해 class를 만들 수 있다.

interface IPerson { 
      name: string; 
      age?: number; 
      hello(): void; 
  };

  class Person implements IPerson { 
      name: string;

      constructor(name: string) { //name은 초기값을 지정해줘야 함
          this.name = name;
      }
      hello(): void {
          console.log(`안녕하세요! ${this.name} 입니다.`);
      } 
  };

  const person = new Person('Mark'); 
  person.hello(); // 안녕하세요! Mark 입니다.

💚 interface extends interface

interface 끼리 상속(extends)해보자.

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

  interface Korean extends Person { 
      city: string;
  };

  const k: Korean = { 
      name: '이웅재', 
      city: '서울'
  };

💙 function interface

함수의 타입 체크는 할당할 때가 아니라 사용할 때 한다는 점을 명심하자.

interface HelloPerson {
      // (name: string, age: number): void;
      (name: string, age?: number): void; 
  };

  let helloPerson: HelloPerson = function (name: string) { 
      console.log(`안녕하세요! ${name} 입니다.`);
  };

  helloPerson('Mark'); // 안녕하세요! Mark 입니다.

👀 Readonly Interface Properties

인터페이스 속성을 readonly (읽기 전용)으로 지정해보자.
프로퍼티가 한 번 만들어지고 바뀌지 않는 값이라면 readonly 를 붙여야 한다.

interface Person8 {
      name: string; 
      age?: number;
      readonly gender: string;
  };

  const person: Person8 = { 
      name: "Mark",
      gender: "male",
  };

  person.gender = "female" // 에러

🆚 type alias vs interface

type alias 와 interface 를 비교해보자

function

// type alias
  type EatType = (food: string) => void; 

  // interface
  interface IEat {
    (food: string): void; 
  }

array

// type alias
  type PersonList = string[]; 

  // interface
  interface IPersonList { 
    [index: number]: string; 
  }

intersection

interface ErrorHandling { 
    success: boolean;
    error?: { message: string }; 
  }

  interface ArtistsData {
    artists: { name: string }[]; 
  }

  // type alias
  type ArtistsResponseType = ArtistsData & ErrorHandling; 

  // interface
  interface IArtistsResponse extends ArtistsData, ErrorHandling {} //다중 상속

  let art: ArtistsResponseType;
  let iar: IArtistsResponse;

union types

interface Bird { 
    fly(): void;
    layEggs(): void; 
  }

  interface Fish { 
    swim(): void; 
    layEggs(): void; 
  }

  // type alias
  type PetType = Bird | Fish;

  // interface는 불가
  interface IPet extends PetType {} // error TS2312: An interface can only extend an 
  object type or intersection of object types with statically known members.

  class Pet implements PetType {} // error TS2422: A class can only implement an 
  object type or intersection of object types with statically known members.

Declaration Merging

// type alias는 불가
  type MergingType = { 
    a: string;
  };

  type MergingType = { //이름이 똑같아서 에러
    b: string;
  };

  // interface 
  interface MergingInterface { 
    a: string;
  }
  interface MergingInterface { 
    b: string;
  }
  let mi: MergingInterface; 
  mi. // a와 b가 머징되어 둘 다 나온다.