[TypeScript] 인터페이스(interface)

객체 생성 시 오류 에러 발생

let user:object;

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

console.log(user.name)

객체는 오브젝트 타입으로 정의 할 수 있다.

이때 console.log(user.name)을 찍으면 에러가 발생한다.

오브젝트에는 특정 속성값에 대한 정보가 없기 때문이다. property를 정의해서 객체를 정의할 때는 인터페이스를 사용한다.

property를 정의해서 객체 표현 ⇒ 인터페이스 사용

type Score = 'A' | 'B' | 'C' | 'F'; //타입 지정

interface User  {
    name:string,
    age:number,
    gender? : string, //물음표를 붙이면 옵션으로 써도 되고 안써도 된다.
    readonly birthYear : number//값의 접근은 가능하지만 수정은 불가능 하다. (read only)
    
    //여러개를 옵션으로 지정할 때, 문자열 인덱스 서명 추가
    [grade:number] : Score;
    //number을 키로 하고, Score type을 value로 받는 property를 여러개 받을 수 있다.
}

let user : User = { //User타입으로 명시, 어떤 property인지 정의를 해줘야한다.
    name : 'xx',
    age : 30,
    birthYear : 2000,
    1 : "A",
    2 : "B" 
}

console.log(user.age) //30

user.age = 10;
console.log(user.age) //10

user.gender = 'male'

user.birthYear = 1990; //읽기 전용이므로 에러가 발생한다.

• 물음표를 붙이면 옵션으로 써도 되고 안써도 된다.(옵션)
• readonly를 붙이면 값의 접근은 가능하지만 수정은 불가능 하다. (read only)
• 인터페이스 생성 후 인터페이스 타입으로 명시 하고, 어떤 property인지 정의를 해줘야한다.
• type Score = 'A' | 'B' | 'C' | 'F'; 와 같은 방법으로 타입을 지정한다.
• 인덱스 서명은 [grade:number] : Score 는 숫자로 인덱스 값이 정해질 때, Score 을 리턴한다.

인터페이스 함수 정의

//인터페이스로 함수 정의
interface Add{
    (num1 : number , num2 : number) : number 
    //괄호, 인자값                     리턴값

}

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

add(10,20);

interface IsAdult {
    (age : number) : boolean
}

const result : IsAdult = (age) => {

    return age > 19

}

result(33) //true

인터페이스로 클래스 정의, implements

//인터페이스로 클래스 정의, implements

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

class Bmw implements Car { //클래스 생성
    color = "red"; //속성값 입력
    wheels = 4;
    start() {
        console.log("go~");
    }
}

//construct 사용
class Audi implements Car {
    color;
    constructor( c : string){//생성될 때 색상을 입력 받겠다.
     this.color = c;
    }
    wheels = 4;
    start() {
        console.log("go!");
    }
}

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

인터페이스 확장 ⇒ extends

//extends

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

interface Benz extends Car { //Car가 가지고 있던 속성을 그대로 받게 된다.
    door : number;   //추가로 정의가 가능하다.
    stop() : void;
}

const benze : Benz = {
    color : "black",
    wheels : 4,
    start(){
        console.log('start')
    },
    door : 5,
    stop(){
        console.log('stop');
    }
}

확장 여러개 가능

//extends 2

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

interface Toy {
    name : string
}
//두개의 인터페이스를 동시에 extends 가능

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