[TypeScript ] #3 인터페이스

시작에 앞서

타입스크립트에서 객체내의 프로퍼티를 정의하는 방법인 인터페이스를 알아보자.
변수를 선언할 때마다 각각 타입을 지정하는 방법보다 인터페이스를 사용하는 방법이 편리하고 재사용도 가능하기 때문에 자주 사용하는 문법이다.

인터페이스?

인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다.
타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다.

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

---

프로퍼티를 정의해서 객체로 표현하는 경우 interface사용

type Score = 'A' | 'B' | 'C'| 'F';

interface User {
  name: string;
  age: number;     // 필수: 없으면 안 된다.
  gender?:string; // 옵션: 있어도 되고 없어도된다.
  readonly birthYear : number;
  //인터페이스 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 아래와 같은 방법을 사용
  [grade:number] : Score;
}

//user의 타입을 User로 설정 
let user : User = {
  name: 'wono',
  age : 30,  // 만약 age속성이 없다면 에러가 난다.
  birthYear: 2000,  
  1: 'A', // 인터페이스에서 정의하지 않은 속성을 추가로 사용할 수 있다.
 // 2: 's',  에러 발생 : Score는 A,B,C,F 중 하나만 들어갈 수 있음
}

user.age = 10; // 수정가능
user.gender = "male"
user.birthYear = 2010;  // readonly 이므로 수정 불가.

interface 를 통해 객체를 표현하자.

• 필수 속성과 옵션(?) 속성을 정의 할 수 있다.

• 필수 속성은 없으면 에러가 나고, 옵션 속성은 그렇지 않다.

• 옵션 속성으로 일일이 지정하기 힘든 경우 [grade:number] : any 와 같이 정의하고 속성들을 추가로 사용할 수 있다.

  만약 위 예제에서 1:'A', 2:'B', 3:'C' .. 등과 같이 사용하려면 인터페이스 내부에 1?:Score; 2?:Score... 로 해야하는 불편함이 있다.

• readonly 속성을 사용하면 읽기전용이 되므로 수정이 불가능 하다.

  추가적으로 읽기 전용 배열도 사용가능하다.

  let arr: ReadonlyArray<number> = [1,2,3];
  arr.splice(0,1); // error
  arr.push(4); // error
  arr[0] = 100; // error

  • 배열을 선언할 때 ReadonlyArray<T> 타입을 사용하면 읽기 전용 배열을 생성할 수 있다.

  • 배열의 내용을 변경할 수 없다.
    선언하는 시점에만 값을 정의할 수 있으니 주의해서 사용해야한다.

---

interface 로 함수 타입

//2개의 number타입의 매개변수를 받아서 number타입을 리턴하는 Add함수 정의
interface Add {
  (num1: number, num2: number): number;
}
const add: Add = function (x,y){
  return x+y;
}
add(10,20); //30

interface IsAudult {
  (age: number): boolean;
}
const check: IsAudult = (age)=>{
  return age > 19;
}
check(33); //true

---

interface 로 클래스 타입

interface Car {
  color:string;
  wheels:number;
  start():void;
}

//implements 키워드 사용
class Bmw implements Car{
  color;
  wheels = 4;
  constructor(c:string){
    this.color = c;
  }
  start(){
    console.log('go!')
  }
}

const b= new Bmw('green');
console.log(b); // Bmw:{"wheels":4, "color": "green"}
b.start(); // go!

//확장 : extends  : Car 인터페이스를 확장한 Benz
interface Benz extends Car{
  door: number;
  stop():void;
}

const benz : Benz = {
  //Car 인터페이스에서 정의한 속성을 입력해주지 않으면 에러 발생
  color:'black',	
  wheels: 4,
  start() {console.log('go~~~');},
  door: 5,
  stop(){ console.log('stop'); }
}

• 클래스 타입도 implements를 사용하여 인터페이스로 타입을 정의할 수 있다.
• 클래스와 마찬가지로 인터페이스도 extends를 사용하여 다른 인터페이스를 상속받아 사용할 수 있다.

---

하이브리드 타입

interface CraftBeer {
  (beer: string): string;
  brand: string;
  brew(): void;
}
function myBeer(): CraftBeer {
  let my = (function(beer: string) {}) as CraftBeer;
  my.brand = 'Beer Kitchen';
  my.brew = function() {};
  return my;
}

let brewedBeer = myBeer();
brewedBeer('My First Beer');
brewedBeer.brand = 'Pangyo Craft';
brewedBeer.brew();

• 타입스크립트는 신기하게 여러 가지 타입을 조합해서 만들 수 있는 타입이 존재한다.

• brewedBeer는 인자를 전달하면 함수가 실행되고 객체처럼 내부의 프로퍼티나 메소드를 불러올 수 있다.

• 이 부분은 좀 더 공부가 필요할 것 같다.....

---

마치며

interface로 클래스 타입을 정하는 부분이나 클래스 관련 된 부분은 추가적으로 공부하고 수정해야 겠다.