#2 인터페이스(interface)

object 

let user:object;

user = {
    name: 'xxx',
    age: 30,
}
console.log(user.name);

위 object 코드는 Property 'name' does not exist on type 'object'. 오류를 반환한다.
object 에는 property 속성이 없기 때문이며 이럴때 interface를 사용한다.

 

interface 로 object 구현

// grade 의 value를 한정지으려함.
type Score = 'A' | 'B' | 'C' | 'F';

// property 에 ? 를 지정하면 optionaly 한 속성이 된다
interface User {
    name : string;
    age : number;    
    gender? : string;
    readonly birthYear : number;
    [grade:number] : Score; // [KEY] : VALUE;
}

// 생성시 gender 없어도 됨
let user : User = {
    name : 'xxx',
    age : 30,   
    birthYear: 2000,
    1: 'A',
    2: 'B',
    3: 'C',
}

user.age = 20;
user.gender = "male";
// user.birthYear = 2010; // readonly 속성으로 수정 불가

console.log(user);
console.log(user.name);

------------------------------------------------------------------
js 결과

"use strict";
// 생성시 gender 없어도 됨
let user = {
    name: 'xxx',
    age: 30,
    birthYear: 2000,
    1: 'A',
    2: 'B',
    3: 'C',
};
user.age = 20;
user.gender = "male";
// user.birthYear = 2010; // readonly 속성으로 수정 불가
console.log(user);
console.log(user.name);


------------------------------------------------------------------
실행결과

[LOG]: {
  "1": "A",
  "2": "B",
  "3": "C",
  "name": "xxx",
  "age": 20,
  "birthYear": 2000,
  "gender": "male"
} 
[LOG]: "xxx"

 

 

interface로  function 구현

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

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

// 사용
console.log(add(100, 200));

// 생성
const add2 : Add = (x,y)=> x+y;

// 사용
console.log(add2(100, 200));


// 성인여부 체크
interface IsAdult {
    (age: number) : boolean;
}

const a:IsAdult = (age) => {
    return age>19;
}
console.log(a(33));

======================================================

"use strict";
// 생성
const add = function (x, y) {
    return x + y;
};
// 사용
console.log(add(100, 200));
// 생성
const add2 = (x, y) => x + y;
// 사용
console.log(add2(100, 200));
const a = (age) => {
    return age > 19;
};
console.log(a(33));

======================================================

[LOG]: 300 
[LOG]: 300 
[LOG]: true

 

 

interface로  class 구현

// implement

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

class Bmw implements Car {
    color;
    wheels = 4;
    // 생성자
    constructor(color: string){
        this.color=color;
    }
    // 메소드
    start() {
        console.log('달립니다.');
    }
}

const b1 = new Bmw('black');
console.log(b1.color);
b1.start();

=================================================

"use strict";
// implement
class Bmw {
    constructor(color) {
        this.wheels = 4;
        this.color = color;
    }
    start() {
        console.log('달립니다.');
    }
}
const b1 = new Bmw('black');
console.log(b1.color);
b1.start();


=================================================

[LOG]: "black" 
[LOG]: "달립니다."

 

interface 상속 (extends)

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

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

// 클래스 구현
class Benz implements Benz {
    color;
    wheels = 4;
    // 생성자
    constructor(color: string){
        this.color=color;
    }
    // 메소드
    start() {
        console.log('달립니다.');
    }
    door=4;
    stop(){
        console.log("멈춥니다");
    }
}

const b2 = new Benz('red');
console.log(b2);
b2.wheels=6;
b2.start();
b2.stop();

-----------------------------------------------------------------

"use strict";
// 클래스 구현
class Benz {
    // 생성자
    constructor(color) {
        this.wheels = 4;
        this.door = 4;
        this.color = color;
    }
    // 메소드
    start() {
        console.log('달립니다.');
    }
    stop() {
        console.log("멈춥니다");
    }
}
const b2 = new Benz('red');
console.log(b2);
b2.wheels = 6;
b2.start();
b2.stop();

-----------------------------------------------------------------

[LOG]: Benz: {
  "wheels": 4,
  "door": 4,
  "color": "red"
} 
[LOG]: "달립니다." 
[LOG]: "멈춥니다"

 

interface 다중상속 

// Car, Toy 를 상속한 ToyCar  interface 생성

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


interface Toy {
    name: string;
}

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

class ToyCar implements ToyCar {
    name;
    color;    
    wheels=4;
    
    constructor(name:string, color:string){
        this.name=name;
        this.color=color;
    }
    start(){
        console.log('달리자!!!');
    }    
}

const myCar = new ToyCar('mycar', 'blue');
console.log(myCar);
myCar.start();

-------------------------------------------------------------------

"use strict";
class ToyCar {
    constructor(name, color) {
        this.wheels = 4;
        this.name = name;
        this.color = color;
    }
    start() {
        console.log('달리자!!!');
    }
}
const myCar = new ToyCar('mycar', 'blue');
console.log(myCar);
myCar.start();

-------------------------------------------------------------------

[LOG]: ToyCar: {
  "wheels": 4,
  "name": "mycar",
  "color": "blue"
} 
[LOG]: "달리자!!!"