[TypeScript] 인터페이스(interface) - 사용 유형과 확장

Interface

인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.

 

변수와 인터페이스

type Score = 'A+' | 'A' | 'B' | 'C';
// 값을 특정할 수 있게 된다.

interface User {
  name : string;
  age : number;
  gender? : string;
  readonly birthYear: number;
  [grade:number] : Score;
  // number를 key로 하고, string의 value로 하는 property를 여러 개 받을 수 있다.
}

let user: User = {
  name : 'xx',
  age : 30,
  birthYear : 2000,
  1 : 'A',
  2 : 'B',
  3 : 'A+' 
}

user.age = 10;
user.gender = "male";
// user.birthYear = 2020; -> Error

console.log(user.name)
console.log(user.gender)

• ~? : Optional, 입력을 해도 되고, 안해도 되는 속성
• readonly ~ : 읽기 전용 속성
  
  

함수와 인터페이스

interface Add {
  (num1:number, num2:number): number;
}

const add:Add = function(x, y) {
  return x+y;
}

console.log(add(10,20))

interface isAdult {
  (age:number) : boolean
}

const a:isAdult = (age) => {
  return age > 19;
}

console.log(a(33))

 

 

 

 

클래스와 인터페이스

인터페이스로 클래스를 정의할 수도 있다.  ✅ implements

// implements

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

class Bmw implements Car {
  color;
  constructor(c:string){
    this.color = c;
  }
  wheels = 4;
  start() {
    console.log(`go..${this.color}`)
  }
}

const b = new Bmw('green');
console.log(b);
b.start()

 

인터페이스는 확장이 가능하다.

// extends

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

interface Benz extends Car{
  door: number;
  stop(): void;
}

const benz : Benz = {
  color: "red",
  wheels: 4,
  start() {
    console.log("benz opend!")
  },
  door:4,
  stop() {
    console.log("benz closed")
  }
}

console.log(benz);
benz.start();
benz.stop();

 

확장은 여러 개를 할 수도 있다.

// extends

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

interface Toy {
  name: string;
}

interface ToyCar extends Car, Toy {
  price:number;
}

---

🚀 참고

• TypeScript #3 인터페이스(interface), 코딩앙마
• 12.5 TypeScript - Interface