본문 바로가기

Frontend/typescript

Typescript 배우기 3 (interface)

// 인터페이스

// let user:object;

// user = {
//   name : 'xx',
//   age : 30
// }
// console.log(user.name) // error
// property를 정의해서 객체를 사용할 때 interface 사용

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

interface User {
  name: string;
  age: number;
  gender?: string; // 있어도 되고 없어도 되고
  readonly birthYear: number; // 읽기 전용
  [grade: number]: Score; // type을 생성해서 사용할 수 있음
}

let user: User = {
  name: 'xx',
  age: 30,
  birthYear: 2000,
  1: 'A',
  // 2 : 'D' // error 정의되지 않은 Score
};

user.age = 10;
user.gender = 'male';
// user.birthYear = 1990; // error readonly
console.log(user);

// interface 함수

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

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

add(1, 2);
// add(a, 2); // type error

interface isAdult {
  (age: number): boolean;
}

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

g(33); // true

// implements
// interface class

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

class Bmw implements Car {
  color;
  wheels = 4;

  constructor(c: string) {
    this.color = c;
  }

  start() {
    console.log('go...');
  }
}

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


// extend 인터페이스 확장

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

const benz : Benz = {
  color : 'black',
  wheels : 4,
  start(){
    console.log('do not go')
  },
  door : 5,
  stop(){
    console.log('stop');
  }
}

console.log(benz)

// 복수 확장

interface Toy {
  name: string;
}

interface ToyCar extends Car, Toy {
  price : number
}

https://www.youtube.com/watch?v=OIMPLNICzoc 

https://yamoo9.gitbook.io/typescript/interface/extends

728x90