[TypeScript] interface란?

상호 간에 정의한 약속 혹은 규칙을 의미하며, 객체의 모양을 명시적으로 나타내기 위해 사용한다.

let user:object;

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

console.log(user.age); //error

위와 같이 사용하게 되면 property가 존재하지 않는다면서 에러가 발생한다. 따라서 아래와 같이 interface를 사용하여 객체의 모양을 나타내야 한다.

interface User {
    name:string;
    age:number;
}

let user:User;

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

console.log(user.age);

 

interface 내에서 정의해준 것을 모두 선언해주지 않으면 에러가 발생한다.

---

Optional Property

interface에서 정의해준 속성들을 모두 사용하지 않으면 에러가 발생한다.

interface User {
    name:string;
    age:number;
}

let user:User;

user={ //error
    name:'aa',
}

console.log(user.age);

 

이때 속성(변수명) 뒤에 ?를 붙이면 해당 속성을 꼭 사용하지는 않아도 된다. 이를 optional property라고 한다.

interface User {
    name:string;
    age?:number;
}

let user:User;

user={
    name:'aa',
}

console.log(user.age);

---

읽기 전용 속성

interface의 속성 중에서 처음 생성 시에만 값을 할당하고, 그 이후로는 변경이 불가능한 속성을 읽기 전용 속성이라고 한다. 이는 속성 앞에 readonly를 붙이면 된다.

interface User {
    name:string;
    age?:number;
    readonly job:string;
}

let user:User;

user={
    name:'aa',
    job:'developer'
}

user.job='doctor'; //error

 

그 밖에도 인터페이스 내에 정의하지 않은 속성들을 추가로 사용하고 싶을 때에는 아래와 같은 방법을 사용한다.

interface User {
    name:string;
    [addi: string]: any; //string type key와 any type value를 가질 수 있음
}

let user:User={
    name:'abd',
    'asd':false,
}

console.log(user.asd) //false

---

interface 내에서의 함수 정의

interface Add {
    (n1: number, n2: number): number;
}

const a: Add = (x, y) => {
    return x + y;
}

console.log(a(1, 2)); //3


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

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

const check: IsAdult = (age) => {
    return age>=20;
}

console.log(check(19)); //false

---

interface 내에서의 클래스 정의

implements(부모의 메소드를 반드시 오버라이딩(재정의))를 사용하여 아래와 같이 사용할 수 있다.

interface Car {
    color: string;
    wheels: number;
    isExpensive: boolean;
    drive(): void;
}

//하나라도 오버라이딩하지 않으면 에러
class Bentley implements Car{
    color = 'black';
    wheels = 4;
    isExpensive = true;
    drive(){
        console.log("Brrr");
    }
}

const B = new Bentley()
console.log(B)
B.drive()

 

또한 아래와 같이 extends를 사용하여 부모의 메소드를 오버라이딩 할 필요 없이 그대로 사용할 수 있다.

interface Car {
    color: string;
    wheels: number;
    isExpensive: boolean;
    drive(): void;
}

class Bentley implements Car{
    color = 'black';
    wheels = 4;
    isExpensive = true;
    drive(){
        console.log("Brrr");
    }
}

//Car의 속성을 물려받고 추가로 name 속성까지 선언
interface Toy extends Car {
    name: string;
}

//Toy에 대한 implements이므로 Car의 모든 속성 + Toy의 속성까지 모두 오버라이딩 해야한다.
class ToyCar implements Toy {
    color = 'black';
    wheels = 4;
    isExpensive = true;
    drive(){
        console.log("I'm toy");
    }
    name='honey';
}

const B = new Bentley()
const T = new ToyCar()
console.log(B)
console.log(T)
B.drive()