[TypeScript] #3 인터페이스

📌 Interface

다음과 같은 범주에 대해 인터페이스를 정의할 수 있다.

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

let user:object;

user = {
  name: 'xx',
  age: '30'
}

console.log(user.name) // error : Property 'name' does not exist on type 'object'.
// object에 특정 속성 값에 대한 정보가 없기 때문!

프로퍼티를 정하여 객체를 표현하고자 할 때는 인터페이스를 사용한다.

interface User {
  name : string;
  age : number;
  gender? : string; // ?를 붙이면 옵셔널한 속성이 됨
  readonly birthYear : number; // readonly - 읽기 전용 속성
}

let user : User = {
  name : 'xx',
  age : 30,
  birthYear : 2000,
}

만약 유저의 학년별 학점을 표현하고 싶다면?

interface User {
  name : string;
  age : number;
  gender? : string; // ?를 붙이면 옵셔널한 속성이 됨
  readonly birthYear : number; // readonly - 읽기 전용 속성
  1 : string;
  2 : string;
  3 : string;
  4 : string;
}

let user : User = {
  name : 'xx',
  age : 30,
  birthYear : 2000,
  1 : 'A'  // 에러
}

이 때 만약, 유저가 1학년 성적까지만 보유하고 있다면?
=> 2, 3, 4를 입력하지 않아 에러 발생!

interface User {
  name : string;
  age : number;
  gender? : string;
  readonly birthYear : number;
  [grade:number] : string; // number를 키로 하고, string을 value로 하는 프로퍼티를 여러 개 받을 수 있다는 의미
}

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

[grade:number] : string;
number를 키로 하고, string을 value로 하는 프로퍼티를 여러 개 받을 수 있다는 의미

그러나 성적은 string 타입으로만 받기에는 너무 범위가 넓어 진다.

이 때 사용할 수 있는 것이 문자열 리터럴 타입!

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

interface User {
  name : string;
  age : number;
  gender? : string;
  readonly birthYear : number;
  [grade:number] : Score; // Score에 해당하는 값 외에 입력 불가!
}

let user : User = {
  name : 'xx',
  age : 30,
  birthYear : 2000,
  1 : 's' // Error !
}

---

인터페이스로 함수 정의

interface Add {
  (num1:number, num2:number): number; // 반환값이 number
}

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

add(10, 20)

interface IsAdult {
  (age:number): boolean; // 반환값이 boolean
}

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

a(33) // true

---

인터페이스로 클래스 정의

implements를 사용한다.

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

class Bmw implements Car {
  color = "red";
  wheels = 4;
  start() {
    console.log('go...');
  };
}

// constructor 사용
class Bmw implements Car {
  wheels = 4;
  
  // 생성될 때 색상을 입력 받음
  contructor(c:string){
    this.color = c;
  }
  
  start() {
    console.log('go...');
  };
}

const b = new Bmw('green');
b.start(); // 'go...'

인터페이스는 extends를 사용하여 확장이 가능하다.

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

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


const benz : Benz = {
  door: 5,
  stop() {
    console.log('stop')
  },
  color: 'black',
  wheels: a,
  start()
}

확장은 동시에 여러 개도 가능하다!

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

interface Toy {
  name: string;
}

// Car와 Toy를 동시에 확장
interface ToyCar extends Car, Toy {
  price: number;
}

---